大家對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 :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>