知识点

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

列表渲染

• 概念
  • 用 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....');
            }