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

創(chuàng)新互聯(lián)建站專(zhuān)注于龍華企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城網(wǎng)站建設(shè)。龍華網(wǎng)站建設(shè)公司,為龍華等地區(qū)提供建站服務(wù)。全流程按需求定制網(wǎng)站，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)建站專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

vue基礎(chǔ)教程

Vue.js（讀音 /vjuː/, 類(lèi)似于 view） 是一套構(gòu)建用戶界面的漸進(jìn)式框架。
Vue 只關(guān)注視圖層， 采用自底向上增量開(kāi)發(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，但是一些輸入類(lèi)型比如單選框和復(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:`
 `
 
 // ...
})

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

注：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è)帶前綴的值，例如：

display: flex
。

事件修飾符

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

...

這個(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 開(kāi)始， 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)作為修飾符：

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

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

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

A

A

A

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 不再限制在