知识点

列表渲染
事件处理器
表单
生命周期

列表渲染

概念
- 用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法， items 是源数据数组并且 item 是数组元素迭代的别名。

基本例子

  <ul id="example-1">
    <li v-for="item in items">
      {{ item.message }}
    </li>
  </ul>

数组更新注意点
- 变异方法
  - Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新.方法如下 :push(),pop(),shift(),unshift(),splice(),sort(),reverse()
- 重塑数组
  - 不会改变原始数组，但总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组.方法如下:filter(), concat(), slice()
- 数组更新
```
   //this.hobby[2] = '呵呵'   //不行
   //Vue.set(this.hobby, 2, '呵呵')   //方法一
   this.hobby.splice(2,1,'哈哈')
```

事件处理器

1.事件传参
2.访问原生 DOM 事件。可以用特殊变量 $event 把它传入方法
3.事件修饰符(事件捕获机制:https://segmentfault.com/q/1010000005875549)
4.键值修饰符

表单

1.v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
2.当v-model绑定值和value相同时,表示选中
3.修饰符
- .lazy : 失去焦点时才发生更新
- .number : 转化为字符串
- .trim : 自动过滤用户输入的首尾空格

生命周期

            beforeCreate(){
                console.log('创建之前,beforeCreate....');
            },
            created(){
                console.log('创建完成了，created...');
            },
            beforeMount(){
                console.log('挂载之前,beforeMount....');
            },
            mounted(){
                console.log('挂载完成了,mounted....');
            },
            beforeUpdate(){
                console.log('更新之前，beforeUpdate....');
            },
            updated(){
                console.log('更新后，updated....')
            },
            beforeDestroy(){
                console.log('销毁前，beforeDestroy...')
            },
            destroyed(){
                console.log('销毁后，destroyed....');
            }