Vue基础入门

1. 理解MVC（数据层和表现层）的使用逻辑
2. 使用Vue组件的生命周期和钩子函数
3. 使用全局的Filters
4. Slot、ref、nextTick等属性或方法的使用
5. Watch函数
6. 避免数据更改并没有触发视图更新的错误
7. 更进阶的使用：mixin、directives等

什么是MVC

Model 负责具体的数据
Controller 负责根据业务对数据进行操作
View 负责根据此刻的数据渲染对应的视图

MVC示意

当我使用MVC模式开发时的思路

1. M只关心数据，托管所有View需要的数据
2. C只关心用户行为，和对数据的操作。某个按钮会触发某个行为，这个行为需要修改哪些M
3. V只关心M，并根据M的具体值，渲染页面

基于这样的思路请尽量避免：

1. 在JS里操作DOM。（C只修改数据，数据的变动自然会触发V的更新）
2. 设计过多的Model。（过多的Model会让你的View结构混乱，M与V之间的关系不清）

什么是生命周期

1. 任何组件（包括IOS，安卓内的类）都有他的生命周期 。
2. 生命周期通常有 创建(create)、挂载(mounted)、更新(update)、销毁(destory)四种
3. 生命周期内的每一个动作通常都有前后两个钩子函数

Vue组件的生命周期

使用全局的filter

全局filter的定义及使用

1. 复用性高的过滤器要挂靠全局
2. 此外还有全局的Vue.component(); Vue.directive()

slot、ref、nextTick等属性或方法的使用

使用slot分发组件内容

slot的name属性分发不同的html

使用ref选择Dom和组件

1. 选择DOM效果相等于document.getElement

使用ref获取DOM

2. 组件

可使用组件的$emit 在组件中监听对应的事件

使用nextTick触发视图更新

适用场景：
需要更新视图后才能获取正确的一些属性

nextTick的使用方法

使用Watch函数监听属性变化

wath内监听某值的变化

适用场景：
需要监听props的变化并做一些较复杂的更新

避免数据更改并没有触发视图更新的错误

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject,'b',2)

// 代替 `Object.assign(this.someObject, { a: 1, b: 2 })`
this.someObject = 
Object.assign({}, this.someObject, { a: 1, b: 2 })

更新数组

vm.userList = array.map(function(u) {
                      u.checked = false;
                      return u;
                  });