Vue简介
Vue.js 是一套构建用户界面的渐进式框架, 只关注视图层, 采用自底向上增量开发的设计,目标是尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
基本原理
1、建立虚拟DOM Tree,通过document.createDocumentFragment(),遍历指定根节点内部节点,根据{{ prop }}、v-model等规则进行compile;
2、通过 Object.defineProperty() 进行数据变化拦截;
3、截取到的数据变化,通过发布者-订阅者模式,触发Watcher,从而改变虚拟DOM中的具体数据;
4、通过改变虚拟DOM元素值,从而改变最后渲染dom树的值完成双向绑定。
常用的功能插件
路由插件 Router
Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成。
常用特点:
动态路由匹配
路由路径中使用“动态路径参数”
```
const router=new VueRouter ({
routes:[// 动态路径参数 以冒号开头
{path:'/user/:id',component:User}
]
})
```
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时,参数值会被设置到 this.$route.params,可以在每个组件内使用。
```
const User = {
template:'<div>User {{ $route.params.id }}</div>'
}
```
嵌套路由
```
const router = new VueRouter({
routes:[
{
path:'/user/:id',
component:User,
children:[{
path:'profile',
component:UserProfile
},
{
path:'posts',
component:UserPosts
}
]
}]
})
```
重定向
```
const router = new VueRouter({
routes:[ { path:'/a', redirect:'/b '} ]
})
```
HTML5 History 模式
状态管理插件 Vuex
Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储,其规则确保状态只能以可预测的方式进行变更。
http客户端 axios
UI插件
桌面端UI库 ElementUI
Element - The world's most popular Vue UI framework
移动端UI库 Vant
https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/password-input
https://youzan.github.io/vant/?source=vuejsorg#/zh-CN/password-input