模板語(yǔ)法

插值

• Vue 2 提供了 v-once 指令進(jìn)行一次插值，替代了 Vue 1 的 {{ * msg }} 戚丸。
• Vue 2 提供了 v-html 插入純 HTML 文本逻住，替代了 Vue 1 的 {{{ rawHTML }}}? 惧蛹。
• Vue 2 取消了在元素屬性中直接使用 Mustache 語(yǔ)法的做法右冻，所有的元素屬性都要用 v-bind 進(jìn)行綁定滑频。
• Vue 2 為模板表達(dá)式添加了白名單淳地，在模板中只能訪問白名單內(nèi)的全局變量怖糊。

過濾器

• 在 Vue 2 中帅容，過濾器只能在 mustache 綁定和 v-bind 表達(dá)式中使用，對(duì)于更復(fù)雜的數(shù)據(jù)變換應(yīng)當(dāng)使用計(jì)算屬性伍伤。

Class 與 Style 綁定

綁定 HTML Class

• Vue 2 允許 v-bind:class 與普通的 class 屬性共存并徘。
• Vue 2 中，在一個(gè)定制的組件上用到 class 屬性的時(shí)候扰魂，這些類將被添加到根元素上面麦乞，這個(gè)元素上已經(jīng)存在的類不會(huì)被覆蓋。

條件渲染

v-if

• Vue 2 添加了 v-else-if 劝评。

• Vue 2 中姐直，可以使用 key 管理 v-if 上不可復(fù)用的元素（ key 必須唯一 ）：

  <template v-if="loginType === 'username'">
    <label>Username</label>
    <input placeholder="Enter your username" key="username-input">
  </template>
  <template v-else>
    <label>Email</label>
    <input placeholder="Enter your email address" key="email-input">
  </template>
  

  沒有添加 key 屬性的元素仍然會(huì)被復(fù)用。

v-show

• Vue 2 完全放棄了 v-show 中的 v-else 語(yǔ)法蒋畜，同時(shí) v-show 也不支持 <template> 語(yǔ)法声畏。

v-for

• Vue 2 添加了對(duì)象迭代 v-for：

  • 可以用 v-for 通過一個(gè)對(duì)象的屬性來迭代。

    <ul id="repeat-object" class="demo">
      <li v-for="value in object">
        {{ value }}
      </li>
    </ul>
    

    new Vue({
      el: '#repeat-object',
      data: {
        object: {
          FirstName: 'John',
          LastName: 'Doe',
          Age: 30
        }
      }
    })
    

  • 也可以提供第二個(gè)參數(shù)為鍵名姻成，第三個(gè)參數(shù)為索引插龄。

    <div v-for="(value, key) in object">
      {{ key }} : {{ value }}
    </div>
    

    <div v-for="(value, key, index) in object">
      {{ index }}. {{ key }} : {{ value }}
    </div>
    

• Vue 2 還提供了整數(shù)迭代 v-for：

  <div>
    <span v-for="n in 10">{{ n }}</span>
  </div>
  

• Vue 2 還提供了組件 v-for 。但是組件 v-for 不能自動(dòng)傳遞數(shù)據(jù)到組件里科展，因?yàn)榻M件有自己的獨(dú)立作用域均牢，要使用 props 傳遞。

  <my-component
    v-for="(item, index) in items"
    v-bind:item="item"
    v-bind:index="index">
  </my-component>
  

key

• 從 Vue 2 開始才睹，Vue 不再需要用戶顯式使用 Vue 1 提供的 track-by="$index" 語(yǔ)法徘跪，而是提供了一套類似的“就地復(fù)用”策略。但是這個(gè)策略只適用于不依賴子組件狀態(tài)或者臨時(shí) DOM 狀態(tài)（例如：表單輸入值）的列表渲染輸出砂竖。

• 為了給 Vue 一個(gè)提示真椿，以便它能跟蹤每個(gè)節(jié)點(diǎn)的身份，從而重用和重新排序現(xiàn)有元素乎澄，要為每項(xiàng)提供一個(gè)唯一 key 屬性。理想的 key 值是每項(xiàng)都有唯一 id测摔。這個(gè)特殊的屬性相當(dāng)于 Vue 1.x 的 track-by 置济，但它的工作方式類似于一個(gè)屬性，所以要用 v-bind 來綁定動(dòng)態(tài)值锋八。

  <div v-for="item in items" :key="item.id">
    <!-- 內(nèi)容 -->
  </div>
  

• 建議盡可能使用 v-for 來提供 key 浙于，除非迭代 DOM 內(nèi)容足夠簡(jiǎn)單，或者你是故意要依賴于默認(rèn)行為來獲得性能提升挟纱。（通常情況下羞酗，所有自定義組件和依賴于臨時(shí) DOM 狀態(tài)的組件都應(yīng)當(dāng)綁定 key 屬性。）

事件處理器

事件修飾符

• Vue 2 相比 Vue 1 提供了更豐富的事件修飾符：

  <!-- 阻止單擊事件冒泡 -->
  <a v-on:click.stop="doThis"></a>
  <!-- 提交事件不再重載頁(yè)面 -->
  <form v-on:submit.prevent="onSubmit"></form>
  <!-- 修飾符可以串聯(lián)  -->
  <a v-on:click.stop.prevent="doThat"></a>
  <!-- 只有修飾符 -->
  <form v-on:submit.prevent></form>
  <!-- 添加事件偵聽器時(shí)使用事件捕獲模式 -->
  <div v-on:click.capture="doThis">...</div>
  <!-- 只當(dāng)事件在該元素本身（而不是子元素）觸發(fā)時(shí)觸發(fā)回調(diào) -->
  <div v-on:click.self="doThat">...</div>
  <!-- 2.14 新增：點(diǎn)擊事件將只會(huì)觸發(fā)一次 -->
  <a v-on:click.once="doThis"></a>
  

  .once 修飾符還能被用到自定義的組件事件上紊服。

按鍵修飾符

• Vue 2 相比 Vue 1 提供了更豐富的按鍵別名檀轨。

• 全部按鍵別名

• Vue 2 修改了自定義按鍵修飾符別名的方式 - 使用 Vue.config.keyCodes ：

  // 可以使用 v-on:keyup.f1
  Vue.config.keyCodes.f1 = 112
  

表單控件綁定

修飾符

• Vue 2 修改了綁定修飾符的方法：

  <input v-model.number="age" type="number"> // type="number" 是原生 DOM 屬性胸竞。
  

• Vue 2 添加了 .trim 修飾符，用于去掉輸入字符串首尾的空格参萄。

  <input v-model.trim="msg">
  

v-model 與組件

• 可以說 Vue 2 實(shí)現(xiàn)的 v-model 才是真正的 v-model卫枝。
• Vue 2 的組件系統(tǒng)允許你創(chuàng)建一個(gè)具有自定義行為可復(fù)用的 input 類型，這些 input 類型甚至可以和 v-model 一起使用讹挎！要了解更多校赤，請(qǐng)參閱自定義 input 類型

組件

使用組件

• 在 Vue 2 中，對(duì) DOM 模板的驗(yàn)證放寬了筒溃。對(duì)于一些 HTML 有限制的元素马篮，在下列環(huán)境下將不受限制：

  • <script type="text/x-template">
  • JavaScript 內(nèi)聯(lián)模板字符串
  • .vue 組件

• data 必須是函數(shù)：在 Vue 2 中，data 被強(qiáng)制要求成了函數(shù)怜奖。

Prop

• 在 Vue 2 中使用字符串模板時(shí)积蔚，不需要將 camelCase 轉(zhuǎn)換成 kebab-case
• Vue 2 不允許在子組件內(nèi)部改變 prop，即便使用雙向綁定也不行烦周。應(yīng)當(dāng)通過子組件觸發(fā) event 由父組件捕獲尽爆，或者其他方式更改 prop 。
  • 在 JavaScript 中對(duì)象和數(shù)組是引用類型读慎，指向一個(gè)內(nèi)存空間漱贱。所以如果 prop 是一個(gè)對(duì)象或數(shù)組，在子組件內(nèi)部改變它會(huì)影響父組件的狀態(tài)夭委。

自定義組件

• 在 Vue 2 中幅狮，不能用 $on 偵聽子組件拋出的事件，必須要在模板里直接用 v-on 綁定株灸。

• Vue 2 移除了 Vue 選項(xiàng)中的 events 選項(xiàng)崇摄。

• 在 Vue 2 中，如果要在某個(gè)組件的根元素上監(jiān)聽原生事件慌烧，要使用 .native 修飾 v-on

  <my-component v-on:click.native="doTheThing"></my-component>
  

• 在 Vue 2 中逐抑，v-model 實(shí)現(xiàn)了一個(gè)語(yǔ)法糖：在自定義的 Input 組件中使用 v-model 進(jìn)行數(shù)據(jù)綁定時(shí)，組件內(nèi)要接收一個(gè) value 屬性屹蚊，并在有新的 value 時(shí)觸發(fā) input 事件厕氨。其余的事情 v-model 會(huì)自動(dòng)處理。一個(gè)官方示例（使用的是字符串模板）：

  <currency-input v-model="price"></currency-input>
  

  Vue.component('currency-input', {
    template: '\
      <span>\
        $\
        <input\
          ref="input"\
          v-bind:value="value"\
          v-on:input="updateValue($event.target.value)"\
        >\
      </span>\
    ',
    props: ['value'],
    methods: {
      // 不是直接更新值汹粤，而是使用此方法來對(duì)輸入值進(jìn)行格式化和位數(shù)限制
      updateValue: function (value) {
        var formattedValue = value
          // 刪除兩側(cè)的空格符
          .trim()
          // 保留 2 小數(shù)位
          .slice(0, value.indexOf('.') + 3)
        // 如果值不統(tǒng)一命斧，手動(dòng)覆蓋以保持一致
        if (formattedValue !== value) {
          this.$refs.input.value = formattedValue
        }
        // 通過 input 事件發(fā)出數(shù)值
        this.$emit('input', Number(formattedValue))
      }
    }
  })
  

• Vue 2 取消了 $dispatch 和 $broadcast ，可以使用 bus 替代嘱兼。

• 非父子組件通信：

  • Vue 2 給出了一個(gè)新的思路用于處理簡(jiǎn)單場(chǎng)景的組件通信：使用一個(gè)空的 Vue 實(shí)例當(dāng)做中央事件總線：

    var bus = new Vue()
    

    // 觸發(fā)組件 A 中的事件
    bus.$emit('id-selected', 1)
    

    // 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
    bus.$on('id-selected', function (id) {
      // ...
    })
    

使用 slot 分發(fā)內(nèi)容

• Vue 2 提供了作用域插槽国葬，用作使用一個(gè)（能夠傳遞數(shù)據(jù)到）可重用模板替換已渲染元素。在子組件中，只需要將數(shù)據(jù)傳遞到插槽汇四，就像使用 prop 一樣：

  <div class="child">
    <slot text="hello from child"></slot>
  </div>
  

  在父級(jí)中接奈，具有特殊屬性 scope 的 <template> 元素，表示它是作用域插槽的模板船殉。scope 的值對(duì)應(yīng)一個(gè)臨時(shí)變量名鲫趁，此變量接收從子組件中傳遞的 prop 對(duì)象。

  <div class="parent">
    <child>
      <template scope="props">
        <span>hello from parent</span>
        <span>{{ props.text }}</span>
      </template>
    </child>
  </div>
  

  渲染結(jié)果：

  <div class="parent">
    <div class="child">
      <span>hello from parent</span>
      <span>hello from child</span>
    </div>
  </div>
  

• 一個(gè)作用域插槽更實(shí)用的例子：

  <my-awesome-list :items="items">
    <!-- 作用域插槽也可以在這里命名 -->
    <template slot="item" scope="props">
      <li class="my-fancy-item">{{ props.text }}</li>
    </template>
  </my-awesome-list>
  

  列表組件模板：

  <ul>
    <slot name="item"
      v-for="item in items"
      :text="item.text">
      <!-- fallback content here -->
    </slot>
  </ul>
  // 這邊應(yīng)該定義了一個(gè)叫 items 的 prop 利虫，然后父組件 :items="items" 傳進(jìn)去挨厚。
  

• 在 Vue 2 中 keep-alive 變成元素了，而不是一個(gè)指令或者參數(shù)糠惫。

  <keep-alive>
    <component :is="currentView">
      <!-- 非活動(dòng)組件將被緩存疫剃！ -->
    </component>
  </keep-alive>
  

雜項(xiàng)

• Vue 2 修改了 v-ref 的用法，并合并了 v-el 硼讽，新的屬性叫 ref 巢价，用于訪問子組件（訪問的方式不變）：

  <div id="parent">
    <user-profile ref="profile"></user-profile>
  </div>
  

  var parent = new Vue({ el: '#parent' })
  // 訪問子組件
  var child = parent.$refs.profile
  

  • 要注意的是，$refs 只在組件渲染完成后才填充固阁，而且是非響應(yīng)式的壤躲。所以應(yīng)當(dāng)避免在模板或計(jì)算屬性中使用 $refs 。

• Vue 2 引入了一種新的定義模板的方式： X-Template

  <script type="text/x-template" id="hello-world-template">
    <p>Hello hello hello</p>
  </script>
  

  Vue.component('hello-world', {
    template: '#hello-world-template'
  })
  

  • 這在有很多模版或者小的應(yīng)用中有用备燃，否則應(yīng)該避免使用碉克，因?yàn)樗鼘⒛０婧徒M件的其他定義隔離了。

Render 函數(shù)

• Vue 2 新增了 Render 函數(shù)并齐，一個(gè)例子：

  Vue.component('anchored-heading', {
    render: function (createElement) {
      return createElement(
        'h' + this.level,   // tag name 標(biāo)簽名稱
        this.$slots.default // 子組件中的陣列
      )
    },
    props: {
      level: {
        type: Number,
        required: true
      }
    }
  })
  

  • 需要知道當(dāng)你不使用 slot 屬性向組件中傳遞內(nèi)容時(shí)漏麦， 這些子元素被存儲(chǔ)在組件實(shí)例中的 $slots.default 中。詳見 instance properties API

• 更詳細(xì)的內(nèi)容可以參考官方文檔况褪。

自定義指令

鉤子函數(shù)

• Vue 2 擴(kuò)充了指令的鉤子函數(shù)：
  • bind : 只調(diào)用一次撕贞，指令第一次綁定到元素時(shí)調(diào)用，用這個(gè)鉤子函數(shù)可以定義一個(gè)在綁定時(shí)執(zhí)行一次的初始化動(dòng)作测垛。
  • inserted : 被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用（父節(jié)點(diǎn)存在即可調(diào)用捏膨，不必存在于 document 中）。
  • update : 被綁定元素所在的模板更新時(shí)調(diào)用赐纱，而不論綁定值是否變化脊奋。通過比較更新前后的綁定值，可以忽略不必要的模板更新（詳細(xì)的鉤子函數(shù)參數(shù)見下）疙描。
  • componentUpdated : 被綁定元素所在模板完成一次更新周期時(shí)調(diào)用。
  • unbind : 只調(diào)用一次讶隐， 指令與元素解綁時(shí)調(diào)用起胰。
• 有關(guān)鉤子函數(shù)的詳細(xì)信息可以查看官方文檔。