Vue.js学习

发布于

前言

最近在看Vue.js相关的东西，比如说vue-router、vuex，还有基于Vue.js的前端UI框架Element-UI和iview

Vue router

其中，Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：

  • 嵌套的路由/视图表
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 基于 Vue.js 过渡系统的视图过渡效果
  • 细粒度的导航控制
  • 带有自动激活的 CSS class 的链接
  • HTML5 历史模式或 hash 模式，在 IE9 中自动降级
  • 自定义的滚动条行为 关于vue router的使用，可以开始起步或尝试一下官方的示例 (查看仓库的 README.md 来运行它们)。

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。 Vuex中的核心概念有：State、Getter、Mutation、Action、Module，下面的图展示了Vuex的状态管理：

vuex

Element-UI

Element UI 是一套采用 Vue 2.0 作为基础框架实现的组件库，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助网站快速成型,由饿了么前端开发。

手册目录
  • 指南
  • 开发指南
  • 组件

iview ui

iview ui是一套基于 Vue.js 的高质量UI 组件库

关于iView

iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。

1.特性
  • 高质量、功能丰富
  • 友好的 API ，自由灵活地使用空间
  • 事无巨细的文档
  • 细致、漂亮的 UI
  • 使用单文件的 Vue 组件化开发模式
  • 基于 npm + webpack + babel 开发，支持 ES2015
  • 安装 #
2.安装

1.使用 npm

代码语言：javascript
复制
$ npm install iview@1.0.1 --save

或使用

代码语言：javascript
复制
<script type="text/javascript" src="iview.min.js"></script>

2.示例

代码语言：javascript
复制
<template>
    <Slider :value.sync="value" range></Slider>
</template>
<script>
    export default {
        data () {
            return {
                value: [20, 50]
            }
        }
    }
</script>

参考资料

  • vue.js官网中文文档
  • Vue router中文官方文档
  • Vue router - github
  • vuex中文官方文档
  • vuex-github
  • awesome-vue A curated list of awesome things related to Vue.js
  • vuex-router-sync - github
  • element - github A Vue.js 2.0 UI Toolkit for Web https://element.eleme.io/
  • iviewui
  • https://www.iviewui.com/
  • iview - github
  • iview-码云
  • iview webapp 一套高质量的 微信小程序 UI 组件库
#git#github#开源#vue.js#iview ui