先附上官網:https://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
這對選項需要一起使用,以允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,並在起上下游關系成立的時間里始終生效。
https://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
偵聽器
https://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>
元素上使用,而可以用在插槽內的任何元素或組件上。