Vue2.2.0+新特性整理及注意事項(xiàng)

大家對(duì)vue的基本概念了解嗎？不太清楚的朋友可以先熟悉下。

vue基礎(chǔ)教程

Vue.js（讀音 /vjuː/, 類似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開發(fā)的設(shè)計(jì)。
Vue 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

本文給大家整理了vue2.2.0+新特征并詳細(xì)的給大家羅列了各個(gè)版本的注意要點(diǎn)。這是本文重點(diǎn)要講的知識(shí)，大家可以參考學(xué)習(xí)。

先附上官網(wǎng)： https://cn.vuejs.org/v2/guide/

2.2.0+版本

v-for

2.2.0+ 的版本里，當(dāng)在組件中使用  v-for 時(shí)， key 現(xiàn)在是必須的。

鼠標(biāo)修飾符

.left
.right
.middle

這些修飾符會(huì)限制處理函數(shù)僅響應(yīng)特定的鼠標(biāo)按鈕。

model

允許一個(gè)自定義組件在使用 v-model 時(shí)定制 prop 和 event。默認(rèn)情況下，一個(gè)組件上的  v-model 會(huì)把  value 用作 prop 且把  input 用作 event，但是一些輸入類型比如單選框和復(fù)選框按鈕可能想使用  value prop 來(lái)達(dá)到不同的目的。使用  model 選項(xiàng)可以回避這些情況產(chǎn)生的沖突。

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>

上述代碼相當(dāng)于：

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

注：checked屬性要聲明在props中

provide/inject

這對(duì)選項(xiàng)需要一起使用，以允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。

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

2.3.0版本

綁定內(nèi)聯(lián)樣式

從 2.3.0 起你可以為 style 綁定中的屬性提供一個(gè)包含多個(gè)值的數(shù)組，常用于提供多個(gè)帶前綴的值，例如：

<div :></div>
這樣寫只會(huì)渲染數(shù)組中最后一個(gè)被瀏覽器支持的值。在本例中，如果瀏覽器支持不帶瀏覽器前綴的 flexbox，那么就只會(huì)渲染

display: flex
。

事件修飾符

Vue 還對(duì)應(yīng) addEventListener  中的  passive  選項(xiàng) 提供了  .passive 修飾符。

<!-- 滾動(dòng)事件的默認(rèn)行為 (即滾動(dòng)行為) 將會(huì)立即觸發(fā) -->
<!-- 而不會(huì)等待 `onScroll` 完成 -->
<!-- 這其中包含 `event.preventDefault()` 的情況 -->
<div v-on:scroll.passive="onScroll">...</div>

這個(gè) .passive 修飾符尤其能夠提升移動(dòng)端的性能。

注：新標(biāo)準(zhǔn)中addEventListener中的第三個(gè)參數(shù)不再是true（事件捕獲）fasle（事件冒泡）,而是一個(gè)對(duì)象：

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

注：不要把 .passive 和  .prevent 一起使用，因?yàn)?nbsp; .prevent 將會(huì)被忽略

v-bind

修飾符 .sync (2.3.0+) 語(yǔ)法糖，會(huì)擴(kuò)展成一個(gè)更新父組件綁定值的  v-on 偵聽(tīng)器

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 同樣支持不帶參數(shù)綁定一個(gè)事件/監(jiān)聽(tīng)器鍵值對(duì)的對(duì)象,如$listeners。注意當(dāng)使用對(duì)象語(yǔ)法時(shí)，是不支持任何修飾器的。

注：v-bind在沒(méi)有參數(shù)時(shí)，可以綁定到一個(gè)包含鍵值對(duì)的對(duì)象。其中class和style不能表示對(duì)象和數(shù)組。

2.5.0版本

按鍵修飾符

你也可直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉(zhuǎn)換為 kebab-case（短橫線命名） 來(lái)作為修飾符：

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

有一些按鍵 ( .esc 以及所有的方向鍵) 在 IE9 中有不同的  key 值, 如果你想支持 IE9，它們的內(nèi)置別名應(yīng)該是首選。在上面的例子中，處理函數(shù)僅在  $event.key === 'PageDown' 時(shí)被調(diào)用。

.exact修飾符（系統(tǒng)修飾按鍵）

.exact 修飾符允許你控制由精確的系統(tǒng)修飾符組合觸發(fā)的事件。

<!-- 即使 Alt 或 Shift 被一同按下時(shí)也會(huì)觸發(fā) -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時(shí)候才觸發(fā) -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒(méi)有任何系統(tǒng)修飾符被按下的時(shí)候才觸發(fā) -->
<button @click.exact="onClick">A</button>

slot-scope

用于將元素或組件表示為作用域插槽。特性的值應(yīng)該是可以出現(xiàn)在函數(shù)簽名的參數(shù)位置的合法的 JavaScript 表達(dá)式。這意味著在支持的環(huán)境中，你還可以在表達(dá)式中使用 ES2015 解構(gòu)。它在 2.5.0+ 中替代了 scope 。

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

總結(jié)

以上所述是小編給大家介紹的Vue2.2.0+新特性整理及注意事項(xiàng)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！