Vue2.2.0+新特性整理

先附上官網：cn.vuejs.org/v2/guide/

2.2.0+版本

 

v-for

2.2.0+ 的版本裡，當在組件中使用 v-for 時，key 現在是必須的。

 

滑鼠修飾符

• .left
• .right
• .middle

這些修飾符會限制處理函數僅響應特定的滑鼠按鍵。

 

model

允許一個自訂群組件在使用 v-model 時定製 prop 和 event。預設情況下，一個組件上的 v-model 會把 value 用作 prop 且把 input 用作 event，但是一些輸入類型比如單選框和複選框按鈕可能想使用 value prop 來達到不同的目的。使用 model 選項可以迴避這些情況產生的衝突。Vue.component('my-checkbox', {

  model: {    prop: 'checked',    event: 'change'  },  props: {    // this allows using the `value` prop for a different purpose    value: String,    // use `checked` as the prop which take the place of `value`    checked: {      type: Number,      default: 0    }  },
  data:function(){
    return{
        _value:this.value
    }
  },
  template:`
   <input 
         type="checkbox" 
         v-bind:checked="checked"
         v-on:change="$emit('change',$event.target.checked)" 
   ></input>`
     // ...})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

上述代碼相當於：

<my-checkbox  :checked="foo"  @change="val => { foo = val }"  value="some value"></my-checkbox>

註：checked屬性要聲明在props中

 

provide/inject

這對選項需要一起使用，以允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下遊關係成立的時間裡始終生效。

cn.vuejs.org/v2/api/#provide-inject

 

2.3.0版本

 

綁定內聯樣式

從 2.3.0 起你可以為 style 綁定中的屬性提供一個包含多個值的數組，常用於提供多個帶首碼的值，例如：

<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

這樣寫只會渲染數組中最後一個被瀏覽器支援的值。在本例中，如果瀏覽器支援不帶瀏覽器首碼的 flexbox，那麼就只會渲染 display: flex
。

 

事件修飾符

Vue 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。

<!-- 滾動事件的預設行為 (即滾動行為) 將會立即觸發 --><!-- 而不會等待 `onScroll` 完成  --><!-- 這其中包含 `event.preventDefault()` 的情況 --><div v-on:scroll.passive="onScroll">...</div>

這個 .passive 修飾符尤其能夠提升移動端的效能。

註：新標準中addEventListener中的第三個參數不再是true（事件捕獲）fasle（事件冒泡）,而是一個對象：

document.addEventListener('click',callback,{    capture:false,//是否捕獲事件    passive:false,//是否允許預設行為，移動端觸屏放大縮小非常有用    once:false//執行一次就remove掉該事件})

註：不要把.passive 和 .prevent 一起使用，因為 .prevent 將會被忽略

 

v-bind

修飾符.sync (2.3.0+) 文法糖，會擴充成一個更新父組件綁定值的 v-on 接聽程式

cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6

 

2.4.0版本

 

v-on

從 2.4.0 開始，v-on 同樣支援不帶參數綁定一個事件/監聽器索引值對的對象,如$listeners。注意當使用對象文法時，是不支援任何修飾器的。

註：v-bind在沒有參數時，可以綁定到一個包含索引值對的對象。其中class和style不能表示對象和數組。

 

2.5.0版本

 

按鍵修飾符

你也可直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case（虛線命名） 來作為修飾符：

<input @keyup.page-down="onPageDown">

有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支援 IE9，它們的內建別名應該是首選。在上面的例子中，處理函數僅在 $event.key === 'PageDown' 時被調用。

 

.exact修飾符（系統修飾按鍵）

.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 --><button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的時候才觸發 --><button @click.ctrl.exact="onCtrlClick">A</button><!-- 沒有任何系統修飾符被按下的時候才觸發 --><button @click.exact="onClick">A</button>

 

slot-scope

用於將元素或組件表示為範圍插槽。特性的值應該是可以出現在函數簽名的參數位置的合法的 JavaScript 運算式。這意味著在支援的環境中，你還可以在運算式中使用 ES2015 解構。它在 2.5.0+ 中替代了 scope。

在 2.5.0+，slot-scope 不再限制在 <template> 元素上使用，而可以用在插槽內的任何元素或組件上。