Vue2.2.0+新特性整理及注意事項

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

vue基礎教程

Vue.js（讀音 /vjuː/, 類似于 view） 是一套構建用戶界面的漸進式框架。
Vue 只關注視圖層， 采用自底向上增量開發的設計。
Vue 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件。

本文給大家整理了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 :></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> 元素上使用，而可以用在插槽內的任何元素或組件上。

總結

以上所述是小編給大家介紹的Vue2.2.0+新特性整理及注意事項，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！