Vue2.2.0+新特性整理


先附上官網: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> 元素上使用,而可以用在插槽內的任何元素或組件上。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM