知識點

• 列表渲染
• 事件處理器
• 表單
• 生命周期

列表渲染

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