1. 事件修飾符

Vue官方推崇方法內(nèi)只有純粹的數(shù)據(jù)邏輯，而不是去處理 DOM 事件細(xì)節(jié)同時(shí)也建議把阻止冒泡阻止默認(rèn)行為這些事件使用修飾符進(jìn)行處理。

修飾符是緊跟方法名之后，使用"."加上下面的關(guān)鍵字：

.stop       // 類似使用stopPropagation阻止冒泡
.prevent    // 類似使用preventDefault阻止默認(rèn)行為
.once       // 事件執(zhí)行一次后自動(dòng)移除
.capture    // 監(jiān)聽事件切換成捕獲模式
.self       // 事件只在目標(biāo)元素上觸發(fā)才會(huì)執(zhí)行，忽略冒泡的事件

有如下的例子驗(yàn)證stop、capture、once修飾符作用：

<ul @click="testModel">
    <li @click="printInfo" v-for="item in clickInfo">{{item.msg}}</li>
</ul>

data中添加如下數(shù)據(jù)：

clickInfo: [
    {msg: '標(biāo)題'},
    {msg: '內(nèi)容'},
    {msg: '落款'}
]

methods下添加如下事件：

methods: {
    printInfo () {
        console.log('li標(biāo)簽的點(diǎn)擊事件');
    },
    testModel () {
        console.log('ul標(biāo)簽的點(diǎn)擊事件');
    }
}

點(diǎn)擊頁面渲染后的任意元素，控制臺(tái)會(huì)輸出

li標(biāo)簽的點(diǎn)擊事件
ul標(biāo)簽的點(diǎn)擊事件

說明事件監(jiān)聽按冒泡模式觸發(fā)，進(jìn)行如下改動(dòng)，添加capture修飾符：

<ul @click.capture="testModel">
...

再點(diǎn)擊頁面元素，此時(shí)控制臺(tái)輸出為

ul標(biāo)簽的點(diǎn)擊事件
li標(biāo)簽的點(diǎn)擊事件

事件監(jiān)聽換成了捕獲模式，清除剛剛添加的capture修飾符，添加stop修飾符

<li @click.stop="printInfo" v-for="item in clickInfo">{{item.msg}}</li>

這時(shí)添加頁面任意元素，控制臺(tái)輸出：

li標(biāo)簽的點(diǎn)擊事件

并不會(huì)執(zhí)行ul的綁定事件

<li @click.stop.once="printInfo" v-for="item in clickInfo">{{item.msg}}</li>

使用once修飾符，可以使該方法只執(zhí)行一次，這里這么操作會(huì)有一個(gè)有意思的現(xiàn)象，你對(duì)任意一個(gè)li進(jìn)行多次點(diǎn)擊，我們會(huì)發(fā)現(xiàn)li標(biāo)簽上的事件只執(zhí)行一次，但是ul標(biāo)簽上的事件除了第一次點(diǎn)擊不執(zhí)行，其后的點(diǎn)擊都會(huì)執(zhí)行，如果要避免這種情況可以使用self修飾符，完整代碼如下:

<ul @click.self="testModel">
    <li @click.stop.once="printInfo" v-for="item in clickInfo">{{item.msg}}</li>
</ul>

這時(shí)頁面點(diǎn)擊后的表現(xiàn)行為就和我們預(yù)期的一致，點(diǎn)擊li標(biāo)簽只會(huì)執(zhí)行一次li標(biāo)簽上的事件，再次點(diǎn)擊沒有任何事件執(zhí)行，點(diǎn)擊li標(biāo)簽之外ul之內(nèi)的區(qū)域，則會(huì)觸發(fā)ul上的綁定事件

<a  @click.prevent>百度</a>

.prevent修飾符是阻止標(biāo)簽的默認(rèn)行為，比如按上面的調(diào)用方式，就會(huì)阻止a標(biāo)簽的跳轉(zhuǎn)行為

.left .right .middle修飾符

<p @click.right="editInfo('修改info值', $event)">{{info}}</p>

這三個(gè)修飾符分別代表事件只在鼠標(biāo)的點(diǎn)擊左鍵，右鍵，中鍵時(shí)觸發(fā)，如上代碼只會(huì)在鼠標(biāo)點(diǎn)擊右鍵時(shí)觸發(fā)

使用.passive修飾符提升移動(dòng)端滾動(dòng)體驗(yàn)

該修飾符設(shè)置后事件就不會(huì)等待事件執(zhí)行完成再進(jìn)行默認(rèn)的行為，下面是一個(gè)很夸張的例子：

<p @touchmove="scrollEvt" style="height: 3000px">{{info}}</p>

在methods中建立方法scrollEvt

methods: {
    scrollEvt () {
        let j = 0;
        for (let i = 0; i < 1000000000; i++) {
            j = i;
        }
        console.log('頁面發(fā)生了滾動(dòng)');
    }
}

此時(shí)如果你在瀏覽器中使用移動(dòng)版模式，點(diǎn)擊拉動(dòng)頁面，你會(huì)感覺有明顯的卡頓之感，因?yàn)檫@時(shí)會(huì)等待scrollEvt事件執(zhí)行完成后才會(huì)繼續(xù)進(jìn)行滾動(dòng)，要解決這個(gè)問題可以使用.passive修飾符

<p @touchmove.passive="scrollEvt" style="height: 3000px">{{info}}</p>

這時(shí)就會(huì)發(fā)現(xiàn)頁面可以流暢拖動(dòng)，控制臺(tái)會(huì)在事件完成后輸出

事件修飾符可以串起來使用，但要注意順序，不同的順序下，事件執(zhí)行不同
@click.prevent.self 會(huì)阻止所有的點(diǎn)擊，而 @click.self.prevent 只會(huì)阻止對(duì)元素自身的點(diǎn)擊

<ul @click.self.prevent="testModel">
    <li v-for="item in clickInfo"><a >{{item.msg}}</a></li>
</ul>

這種情況下，并不會(huì)阻止a標(biāo)簽的跳轉(zhuǎn)行為

<ul @click.prevent.self="testModel">

如果修改成這樣，則會(huì)阻止所有a標(biāo)簽的跳轉(zhuǎn)行為

2. 按鍵修飾符

事件修飾符主要是針對(duì)事件進(jìn)行的一些限制條件，按鍵修飾符是點(diǎn)擊特定按鍵時(shí)觸發(fā)

<input placeholder="輸入內(nèi)容" @keyup.enter="printMsg"/>

執(zhí)行上述代碼，輸入框在選中狀態(tài)，點(diǎn)擊回車鍵就會(huì)觸發(fā)printMsg事件，以下時(shí)Vue支持的鍵盤修飾符

.enter              // 捕獲回車鍵
.tab                // 捕獲tab鍵
.delete             // 捕獲“刪除”和“退格”鍵
.esc                // 捕獲esc鍵
.space              // 捕獲空格 
.up                 // 捕獲鍵盤向上按鈕
.down               // 捕獲鍵盤向下按鈕
.left               // 捕獲鍵盤向左按鈕
.right              // 捕獲鍵盤向右按鈕

3. 系統(tǒng)修飾鍵

系統(tǒng)修飾符是實(shí)現(xiàn)僅在按下相應(yīng)按鍵時(shí)才觸發(fā)鼠標(biāo)或鍵盤事件的監(jiān)聽器。

<p @click.shift="printMsg">{{info}}</p>

這個(gè)點(diǎn)擊事件只會(huì)在按住shift按鈕時(shí)，進(jìn)行點(diǎn)擊才會(huì)觸發(fā)，類似的鍵盤事件還有

.ctrl
.alt
.shift
.meta

.exact精確控制系統(tǒng)修飾符的組合事件

上例，除了按住shift外，如果你同時(shí)按住shift和其他任意鍵，進(jìn)行點(diǎn)擊是亦然可以觸發(fā)綁定事件，為了修正這個(gè)錯(cuò)誤，可以添加exact修飾符達(dá)到精確控制，只在shift被按住才會(huì)觸發(fā)

<p @click.shift.exact="printMsg">{{info}}</p>

4. v-model

表單相關(guān)的元素是頁面進(jìn)行交互時(shí)比較重要的元素，很多操作都是這些元素進(jìn)行操作的。Vue對(duì)此進(jìn)行了增強(qiáng)，專門添加了該指令

1) 文本

<input v-model="msg" placeholder="edit me">
<p>Message is: {{ msg }}</p>

在data中建立msg屬性

msg: '',

在頁面，輸入框中輸入任意數(shù)據(jù)，會(huì)發(fā)現(xiàn)p標(biāo)簽內(nèi)容會(huì)同步更新

2) 多行文本

<p style="white-space: pre-line;">多行文本信息：{{msg}}</p>
<textarea v-model="msg" placeholder="edit me"></textarea>

同文本，輸入信息會(huì)同步到綁定屬性中

3) 單選框

<input type="radio" name="gender" value="man" id="manRadio" v-model="gender"/>
<label for="manRadio">男</label><br/>
<input type="radio" name="gender" value="woman" id="womanRadio" v-model="gender"/>
<label for="womanRadio">女</label><br/>
<p>你選擇的性別為：{{gender}}</p>

在data中建立gender屬性

gender: '',

綁定屬性gender會(huì)同步為選中單選的value值

4) 復(fù)選框

復(fù)選框會(huì)因?yàn)樵O(shè)定的綁定值類型不同，展示的不同

<input type="checkbox" name="vehicle" id="vehicle" value="bike" v-model="vehicle"/>
<label for="vehicle">自行車</label>
<p>你的車輛為：{{vehicle}}</p>

在data中建立屬性vehicle

vehicle: '',

此時(shí)使用的是單個(gè)復(fù)選框，按照單選框的例子，很容易就認(rèn)為我們選中復(fù)選框時(shí)p標(biāo)簽顯示的應(yīng)該是復(fù)選框的value值，但實(shí)際上這里顯示的true值，不勾選后顯示的是false值，原因是此時(shí)Vue期望綁定值是數(shù)組，如果把綁定值換成數(shù)組

vehicle: [],

選中后數(shù)據(jù)顯示正常

<input type="checkbox" name="vehicle" id="bike" value="bike" v-model="vehicle"/>
<label for="bike">自行車</label>
<input type="checkbox" name="vehicle" id="car" value="car" v-model="vehicle"/>
<label for="car">汽車</label>
<p>你的車輛為：{{vehicle}}</p>

多個(gè)條目進(jìn)行選擇或者移除選擇，數(shù)組會(huì)同步刪除指定數(shù)據(jù)

5) 下拉列表

<select v-model="selValue">
    <option disabled value="">你出行的方式</option>
    <option>步行</option>
    <option>自行車</option>
    <option>汽車</option>
</select>
<p>你的出行方式：{{selValue}}</p>

在data中設(shè)置selValue值

selValue: '',

與復(fù)選框類似，如果要多選時(shí)，綁定的屬性要是數(shù)組類型

<select v-model="selValue" multiple>
    <option disabled value="">你出行的方式</option>
    <option>步行</option>
    <option>自行車</option>
    <option>汽車</option>
</select>
<p>你的出行方式：{{selValue}}</p>

如果此時(shí)selValue設(shè)定值還是字符串，Vue會(huì)在控制臺(tái)拋出警告，提醒你此時(shí)應(yīng)該使用數(shù)組數(shù)據(jù)

6) v-model修飾符附帶修飾符

對(duì)v-model的適當(dāng)補(bǔ)充的修飾符有：

.lazy       // 取代 input 監(jiān)聽 change 事件
.number     // 輸入字符串轉(zhuǎn)為數(shù)字
.trim       // 輸入首尾空格過濾

上文文本的事例：

<input v-model.lazy="msg" placeholder="edit me">
<p>Message is: {{ msg }}</p>

v-model對(duì)input元素默認(rèn)進(jìn)行的input監(jiān)聽，添加.lazy修飾符后，進(jìn)行的change監(jiān)聽

v-model.number

換成number修飾符，就會(huì)把輸入的字符串轉(zhuǎn)為數(shù)字的形式，比如你輸入:1.34e+5; 1.34e-5，Vue會(huì)進(jìn)行string-to-number的操作

v-model.trim

使用trim修飾符會(huì)對(duì)輸入框進(jìn)行頭尾去除空格的操作

5. v-pre

該指令是用來跳過這個(gè)元素和它的子元素的編譯過程，跳過大量沒有指令的節(jié)點(diǎn)會(huì)加快編譯。按指令設(shè)定的意義來看，是想當(dāng)模版元素是純靜態(tài)內(nèi)容時(shí)，使用這個(gè)指令，指定某個(gè)區(qū)域不行編譯，提升Vue的編譯速度。不過可能就只有純背景的DOM區(qū)域會(huì)需求這個(gè)指令吧

6. v-cloak

很少用，按現(xiàn)在構(gòu)建代碼的形式，只要在進(jìn)入頁面加上一個(gè)全局loading，load完再展示頁面

7. 自定義指令（糟粕）

除了Vue自帶的指令，還可以自定義一些自己需要的指令，自定義指令可以放在組件內(nèi)部使用directives屬性，也可以把公用的指令，放到外部文件然后引用擴(kuò)展到內(nèi)部屬性directives上

<input placeholder="edit name" v-focus/>

...
directives: {
    focus: {
        inserted: function (el) {
            el.focus()
        }
    }
}

此時(shí)渲染頁面進(jìn)到頁面就會(huì)自動(dòng)獲取輸入框焦點(diǎn)，如果是要把公共指令放到外部文件可以這么操作

• 在src根目錄下，建立directives文件夾，然后建立directives.js，在其內(nèi)部輸入

let focus = {
    inserted: function (el) {
        el.focus()
    }
};

export { focus }

• 在組件的目錄下引入該文件

<script>
    import * as directives from './../../directives/directives'; // 引入公共指令
    ...

• 在組件內(nèi)部的相關(guān)屬性上擴(kuò)展相關(guān)屬性

directives: {
    ...directives
},  

8. 自定義指令的相關(guān)鉤子函數(shù)（糟粕）

自定義指令的鉤子一共有如下幾個(gè)

bind：只調(diào)用一次，指令第一次綁定到元素時(shí)調(diào)用。在這里可以進(jìn)行一次性的初始化設(shè)置。

inserted：被綁定元素插入父節(jié)點(diǎn)時(shí)調(diào)用 (僅保證父節(jié)點(diǎn)存在，但不一定已被插入文檔中)。

update：所在組件的 VNode 更新時(shí)調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見下)。

componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。

unbind：只調(diào)用一次，指令與元素解綁時(shí)調(diào)用。

在directives.js中做如下改造

let focus = {
    bind () {
        console.log('bind focus');
    },
    inserted (el) {
        console.log('inserted focus');
        el.focus()
    },
    update () {
        console.log('update focus');
    },
    componentUpdated () {
        console.log('componentUpdated focus');
    },
    unbind () {
        console.log('unbind focus');
    }
};

export { focus }

模板中做如下調(diào)整

<input placeholder="edit name" v-focus="focusValue" v-model="focusValue"/>

...
// data中設(shè)定focusValue屬性值
focusValue: ''

刷新頁面，在未進(jìn)行任何操作前控制臺(tái)輸出

console.log('bind focus');
console.log('inserted focus');

在輸入框輸入任意字符觸發(fā)focus指令更新，控制臺(tái)輸出

console.log('update focus');
console.log('componentUpdated focus');

多次輸入，控制也同樣多次輸出，證明update、componentUpdated鉤子函數(shù)會(huì)多次執(zhí)行，而bind、inserted鉤子函數(shù)只會(huì)在初始化時(shí)執(zhí)行一次

自定義指令的鉤子函數(shù)，可以接收如下幾個(gè)參數(shù)：

el：指令所綁定的元素，可以用來直接操作 DOM
binding：一個(gè)對(duì)象，包含以下屬性：
  - arg：指令的參數(shù)(可選值)，修飾符和參數(shù)的順序會(huì)影響這個(gè)值的取值，比如:v-focus:gool.foo.rel:bar，arg的取值為gool，如果為v-focus.foo.rel:bar:gool，arg的取值就為空不展示，此時(shí)指令會(huì)把gool當(dāng)作修飾符rel的值
  - def：指令的方法，顯示的是添加的鉤子函數(shù)(添加了幾個(gè)鉤子函數(shù)就顯示幾個(gè))
  - expression：字符串形式的指令表達(dá)式。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"。
  - modifiers：一個(gè)包含修飾符的對(duì)象。比如:v-focus:gool.foo.rel:bar中，修飾符對(duì)象為 {foo: true, rel:bar: true}
  - name：指令名，不包括 v- 前綴，不包括修飾符和參數(shù)。
  - rawName：指令名全稱，包括v-前綴，包括修飾符和參數(shù)
  - value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
  - oldValue：指令綁定的前一個(gè)值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)
oldVnode：上一個(gè)虛擬節(jié)點(diǎn)，僅在 update 和 componentUpdated 鉤子中可用

這四個(gè)參數(shù)，在鉤子函數(shù)中都是通用的，做如下改造

inserted (el, binding, vnode, oldVnode) {
    console.log('inserted focus');
    console.log(binding);
    console.log(vnode);
    console.log(oldVnode);
    el.focus();
},
update (el, binding, vnode, oldVnode) {
    console.log('update focus');
    console.log(binding);
    console.log(vnode);
    console.log(oldVnode);
},

這時(shí)再控制臺(tái)就輸出相關(guān)信息binding，vnode和oldVnode的值了，這三個(gè)對(duì)象的值，官方建議是只進(jìn)行只讀操作，從中讀取需要的信息，并不要進(jìn)行相關(guān)修改

focusValue: {color: 'red', size: '14px'}

如果傳入的指令的值是對(duì)象，那么binding對(duì)象中的value也是對(duì)象，方便調(diào)用

9.計(jì)算屬性(computed)和觀察屬性(watch) (精華)

計(jì)算屬性在上文已經(jīng)使用了多次，只要插值展示的值包含一定程度的計(jì)算量，而不能直觀看出變量信息時(shí)均可使用計(jì)算屬性。

<p>你的姓名: {{name}}</p>
<p>你的性別: {{gender}}</p>
<p>你的學(xué)校: {{school}}</p>
<p>你的學(xué)院: {{college}}</p>

在data中建立相關(guān)信息

name: 'Tom',
gender: '男',
school: '深圳大學(xué)',
college: '軟件學(xué)院'

如所見，這些信息都非常的直觀，如果我們換一個(gè)稍微復(fù)雜些的信息

<p>你的全名是: {{fullName}}</p>
<input placeholder="edit firstName" v-model="firstName"/><br/>
<input placeholder="edit lastName" v-model="lastName"/><br/>

在data下建立如下信息：

firstName: 'Lin',
lastName: 'Ken',

在computed中建立如下信息：

computed: {
    fullName () {
        return `${this.firstName} ${this.lastName}`
    }
}

這個(gè)例子是一個(gè)不合理的例子，只為了簡(jiǎn)單說明計(jì)算屬性包含了邏輯處理，在輸入框修改相關(guān)信息p標(biāo)簽信息就會(huì)更新，在開發(fā)中還有可能碰到類似這樣的需求，雖然插值fullName是依賴firstName和lastName計(jì)算出來的值，但偶爾需要直接修改fullName的情況，我們先直接在頁面上添加對(duì)應(yīng)方法

<button @click="changeFullName">改變姓名</button>

methods: {
    changeFullName () {
        this.fullName = '李 尋歡';
    }
}

這時(shí)如果你直接點(diǎn)擊頁面上的按鈕，Vue會(huì)在控制臺(tái)報(bào)錯(cuò)，告知fullName沒有setter屬性，那是因?yàn)槲覀冎苯邮褂糜?jì)算屬性時(shí)，其實(shí)是直接使用getter屬性，要解決這個(gè)問題我們可以做如下改造

computed: {
    fullName: {
        get () {
            return `${this.firstName} ${this.lastName}`
        },
        set (newValue) {
            let names = newValue.split(' ');
            this.firstName = names[0];
            this.lastName = names[names.length - 1];
        }
    }
}

再次點(diǎn)擊頁面按鈕，頁面邏輯就會(huì)正常，我們要記得這個(gè)思路，就算我們要修改一個(gè)計(jì)算屬性值，實(shí)際上是修改計(jì)算屬性相關(guān)聯(lián)的屬性中的值(比如這里的firstName和lastName)，依賴這些關(guān)聯(lián)值更新觸發(fā)相關(guān)計(jì)算屬性的更新，不要嘗試直接在set中直接返回相關(guān)值，比如這樣：

set (newValue) {
    return newValue;
}

計(jì)算屬性可以滿足我們常見的數(shù)據(jù)關(guān)聯(lián)更新需求，但還有些會(huì)是自更新觸發(fā)不相關(guān)數(shù)據(jù)更新的需求，不如下面的問題：

<p>你的職業(yè)為：{{occupation}}</p>

在模板中添加上面內(nèi)容，對(duì)應(yīng)data中設(shè)置occupation的值

occupation: '程序員',

我們現(xiàn)在有這么一個(gè)需求，就是當(dāng)用戶姓名變成指定姓名時(shí)，occupation的值變成特定值，也就是當(dāng)firstName或lastName發(fā)生更新時(shí)，觸發(fā)器occupation值的更新，這個(gè)時(shí)候我們?nèi)绻麌L試用計(jì)算屬性來處理，會(huì)感覺有些邏輯上的問題，畢竟occupation的值和firstName與lastName值，并不像它們和fullName那樣有很強(qiáng)的邏輯關(guān)聯(lián)型，這時(shí)如果使用觀察屬性來進(jìn)行處理(watch)一切就變得很好理解

watch: {
    firstName (val) {
        if (val === '李') {
            if (this.lastName === '尋歡') {
                this.occupation = '小李飛刀的傳人'
            } else {
                this.occupation = '程序員';
            }
        } else {
            this.occupation = '程序員';
        }
    },
    lastName (val) {
        if (val === '尋歡') {
            if (this.firstName === '李') {
                this.occupation = '小李飛刀的傳人'
            } else {
                this.occupation = '程序員';
            }
        } else {
            this.occupation = '程序員';
        }
    }
}

這時(shí)的邏輯就是當(dāng)firstName或lastName數(shù)據(jù)發(fā)生變化時(shí)，判斷變化后的值是不是指定名稱，然后進(jìn)行相關(guān)更新

10.過濾(filter) （精華）

過濾是對(duì)插值和v-bind指令的補(bǔ)充，是對(duì)其返回值再進(jìn)行一次篩選，過濾器的使用分為組件內(nèi)和全局兩種

<p>{{info | upperCase}}</p>

此時(shí)我們先使用組件內(nèi)的過濾器，在組件內(nèi)使用filters屬性

filters: {
    upperCase (val) {
        return val.toUpperCase();
    }
}

過濾器默認(rèn)接收的第一個(gè)參數(shù)是表達(dá)式的值，如果在使用過濾器時(shí)需求傳參數(shù)，可以用下面這種形式

<p>{{info | upperCase('進(jìn)行大寫轉(zhuǎn)換后為：')}}</p>

...
// filters下的upperCase做如下修改
upperCase (val, str) {
    return `${val} ${str} ${val.toUpperCase()}`;
},

過濾器支持多個(gè)條件過濾，按如下寫法進(jìn)行

<p>{{info | upperCase | reverse}}</p>

多個(gè)過濾器類型管道的寫法，下一個(gè)過濾器會(huì)把上一個(gè)過濾器處理后的值當(dāng)作入?yún)⑻幚?/p>

filters: {
    upperCase (val) {
        return `${val.toUpperCase()}`;
    },
    reverse (val) {
        return val.split("").reverse().join("");
    }
}

以上都是過濾器在組件內(nèi)的使用方法，這些過濾器只適合處理沒有很強(qiáng)復(fù)用型的過濾器，其他比如幣種的轉(zhuǎn)換，金額的格式化，這些都是那種很通用的過濾器，還用組件內(nèi)的寫法就不合適了，這時(shí)就需要把過濾器放在公共的地方，通過全局方式進(jìn)行引用

• 在src的根目錄下建立filters文件夾，然后在文件夾內(nèi)建立filters.js文件，里面內(nèi)容如下

let upperCase = (val) => {
    return `${val.toUpperCase()}`;
};

let reverse = (val) => {
    return val.split("").reverse().join("");
};

export { upperCase, reverse }

• 在組件內(nèi)引入剛剛添加的文件

<script>
    import * as filter from './../../filters/filters'; // 引入公共過濾器
    ...

• 在filters下把剛剛引入的文件擴(kuò)展到組件內(nèi)過濾器(把上一步相關(guān)過濾器刪除)

filters:{
    ...filter
}

這樣頁面的過濾器一樣正常生效，不過這種把部分過濾器提取到一個(gè)公共文件夾下做法，比較易于維護(hù)

11.總結(jié)：關(guān)于data，computed，watch和filters的使用 （精華）

這四個(gè)屬性是我們處理數(shù)據(jù)最常用的操作屬性，很多操作都是圍繞這些屬性展開，下面說下我對(duì)這些屬性的理解：

data通常是定義基礎(chǔ)數(shù)據(jù)，在模板中使用的插值，一般都是由這些數(shù)據(jù)演變而來，比如現(xiàn)在是一個(gè)產(chǎn)品詳情頁，在頁面模板中，有關(guān)于產(chǎn)品的信息，而這些信息通常來源于接口，一般會(huì)在接口請(qǐng)求的回調(diào)函數(shù)中，把接口返回的產(chǎn)品數(shù)據(jù)賦值給某個(gè)data中代表產(chǎn)品的屬性值(比如為prdInfo，這個(gè)值默認(rèn)會(huì)是空值，在接口請(qǐng)求的成功回調(diào)中會(huì)把這個(gè)接口返回的產(chǎn)品信息賦給prdInfo)，模版中會(huì)引用多個(gè)計(jì)算屬性來動(dòng)態(tài)的設(shè)定包括比如產(chǎn)品名稱，產(chǎn)品圖片之類的信息，而這些計(jì)算屬性(computed)觸發(fā)更新的條件就是prdInfo值的變化，watch關(guān)注的是值的更新，這個(gè)值可以是data中的值，也可以是computed的值，只要值發(fā)生變化就會(huì)觸發(fā)watch，至于filters是對(duì)模板插值的補(bǔ)充，會(huì)對(duì)模板輸出的插值(以及v-bind的綁定數(shù)據(jù))再進(jìn)行一次過濾

12. 組件 （精華）

組件是Vue最強(qiáng)大的功能，對(duì)Html進(jìn)行了很強(qiáng)的擴(kuò)展，對(duì)相關(guān)代碼進(jìn)行了封裝。

在整個(gè)項(xiàng)目中，因?yàn)槲覀兪褂昧藇ue-loader，所以會(huì)使用.vue的形式去創(chuàng)建組件。

1）創(chuàng)建一個(gè)組件

上面所有例子，其實(shí)都是在index.vue這個(gè)組件中進(jìn)行的，為了強(qiáng)化理解組件的感念，下面所進(jìn)行的例子都是在組件內(nèi)進(jìn)行，這也是Vue官方推崇的一種思路，即把界面抽象成一個(gè)組件樹，頁面由一個(gè)個(gè)獨(dú)立的組件拼接而成，組件也可以由多個(gè)組件拼接而成

2）全局組件和局部組件

通過Vue.component進(jìn)行注冊(cè)的組件就是全局組件，不過在這里有一個(gè)需要注意的地方，因?yàn)槲覀兪峭ㄟ^npm進(jìn)行安裝的Vue，最新版的Vue是一個(gè)運(yùn)行時(shí)的版本，不包含支持template的編譯功能，我們上面可以使用template是因?yàn)槭褂昧藇ue-loader并使用了vue-template-compiler這個(gè)插件，如果在我們當(dāng)前的項(xiàng)目中使用全局組件，需要使用render而不是template(后面渲染函數(shù)會(huì)詳細(xì)講解)

在index.js中添加全局插件的注冊(cè)

...
Vue.component('anchored-heading', {
    render: function (createElement) {
        return createElement(
            'h' + this.level,   // tag name 標(biāo)簽名稱
            this.$slots.default // 子組件中的陣列
        )
    },
    props: {
        level: {
            type: Number,
            required: true
        }
    }
});

let vm = new Vue({
    el: "#app",
    render: h => h(app)
});

在index.vue的模板中添加如下代碼

<anchored-heading :level="1">Hello world!</anchored-heading>

這樣頁面就能渲染出如下內(nèi)容

<h1>Hello world!</h1>

在實(shí)例選項(xiàng)components中注冊(cè)的組件就是局部組件，只在組件內(nèi)使用，比如在hello-world的目錄下建立一個(gè)新的組件header.vue，在其中輸入如下內(nèi)容

<template>
    <header>{{title}}</header>
</template>
<script>
    export default {
        data () {
            return {
                title: '這是頭部'
            }
        }
    }
</script>

在index.vue中引入這個(gè)組件，在components中組冊(cè)該組件

<script>
...
import cusHeader from './header.vue'; // 引入頭部組件

...
components: {
    cusHeader
}

在模板中引用這個(gè)組件

<cusHeader></cusHeader>

最終渲染結(jié)果為

<header>這是頭部</header> 

由于我們使用的是.vue組件形式，所以無需考慮自定義組件無法在普通DOM中不能使用(渲染出錯(cuò))的情況(比如table標(biāo)簽下出現(xiàn)了出現(xiàn)了自定義標(biāo)簽)，如果碰到這種情況需要使用is關(guān)鍵字，告訴編譯器使用的是特殊字符，這個(gè)不在我的考慮。

3）組件組合

像上面局部組件的例子，就是在一個(gè)組件內(nèi)引用另外一個(gè)組件，這個(gè)例子并沒有涉及父子組件之間的通信，下面用一個(gè)例子來說明父子組件之間如何通信：

父組件向子組件傳遞數(shù)據(jù)

// 在模板中添加title屬性，在自定義組件添加的屬性就會(huì)被作為props傳遞給組件
<cusHeader title="頭部信息"></cusHeader>

在組件內(nèi)部設(shè)置接收這個(gè)屬性的參數(shù)(props):

props: ['title'],

這時(shí)如果直接渲染Vue會(huì)提示你data中的title被聲明為prop，要使用默認(rèn)值代替在data中聲明，因?yàn)樯弦徊轿覀冊(cè)赿ata中聲明了title，而在這里我們用props來接收一個(gè)傳入的title值，從這個(gè)例子我們推測(cè)在Vue中props的優(yōu)先級(jí)應(yīng)該是高于data的優(yōu)先級(jí)(?這個(gè)地方有點(diǎn)疑問，按官方文檔所說，因?yàn)閜rop會(huì)在組件實(shí)例創(chuàng)建之前進(jìn)行校驗(yàn)，此時(shí)data，computed，methods等實(shí)例屬性都還不能使用，這里應(yīng)該能解釋為什么props的優(yōu)先級(jí)為什么會(huì)比data的優(yōu)先級(jí)高，但判斷使用默認(rèn)值代替data中聲明的邏輯是在哪里進(jìn)行的？)，解決方法就是刪除在data中的聲明，如果你確實(shí)希望這個(gè)title有個(gè)默認(rèn)值要像下面這樣做改造：

props: {
    title: {
        default: '這是頭部'
    }
}

這時(shí)如果你刪除模板中cusHeader設(shè)定的title值，頁面就渲染成這個(gè)指定的默認(rèn)值，上面對(duì)象的寫法，除了可以指定默認(rèn)值以外還可以對(duì)接收參數(shù)的類型以及值進(jìn)行設(shè)定

• 接收參數(shù)，直接跟一個(gè)數(shù)據(jù)類型，這時(shí)是指定當(dāng)前值只接收某類數(shù)據(jù)

props: {
    title: Number
}

這樣寫就表示接收的值必須是數(shù)字類型，如果傳入其他類似的值，Vue會(huì)渲染出來，但是會(huì)在控制臺(tái)報(bào)錯(cuò)，此例中，控制臺(tái)會(huì)報(bào)錯(cuò)提示title期望的是一個(gè)Number類型，但是接收的卻是一個(gè)String類型，Vue可以設(shè)置如下的參數(shù)類型：

String
Number
Boolean
Function
Object
Array
Symbol

如果要設(shè)置可以同時(shí)接收多種數(shù)據(jù)類型，可以使用數(shù)組的形式

title: [Number, String], // 接收數(shù)字或字符類型

• 接收參數(shù)，跟一個(gè)對(duì)象，可以在對(duì)象中對(duì)接收參數(shù)設(shè)置更多參數(shù)

參數(shù)必傳：required設(shè)為true

props: {
    title: {
        type: String,
        required: true
    }
}

如果做了這種設(shè)定，在cusHeader中如果不傳title值，控制臺(tái)報(bào)錯(cuò)告知缺少必須的參數(shù)

默認(rèn)值：default跟相關(guān)值

如上所述，可以使用default跟一個(gè)值，表示接收參數(shù)的默認(rèn)值，這個(gè)跟隨的值，根據(jù)type類型的不同，其值也不同

// 如果是數(shù)字類型，默認(rèn)值為數(shù)字
type: Number,
default: 100
...
// 如果是數(shù)組或值對(duì)象，默認(rèn)值也必須是工廠函數(shù)的返回值(如果不用工廠函數(shù)，直接把數(shù)組值賦值給default，控制臺(tái)會(huì)報(bào)錯(cuò)，提示props的type類型為數(shù)組/對(duì)象，必須使用工廠函數(shù)返回)
title: {
    type: Array,
    default: function () {
        return ['這是頭部', '這是主體']
    }
}

自定義驗(yàn)證函數(shù)：validator

title: {
    type: Number,
    validator: function (val) {
        return val > 10;
    }
}

如果在index.vue中模板這么寫

<cusHeader title="12"></cusHeader>

控制臺(tái)會(huì)報(bào)錯(cuò)，提示傳值的類型錯(cuò)誤，因?yàn)閜rops進(jìn)行父子組件通信時(shí)默認(rèn)傳值類型是String，如果要傳其他類型數(shù)據(jù)，要使用綁定屬性，做如下處理

// 在data中建立一個(gè)titleNum
titleNum: 12
...
// 模板中改為
<cusHeader :title="titleNum"></cusHeader>

這時(shí)頁面就能正常渲染，如果把titleNum換成1，控制臺(tái)報(bào)錯(cuò)提示不符合驗(yàn)證條件

3） 普通HTML屬性添加到組件上

如果在組件內(nèi)部的props沒有設(shè)置對(duì)某個(gè)屬性的接收，那么那個(gè)屬性就會(huì)當(dāng)作普通HTML屬性加載到組件內(nèi)最外層的DOM元素上

// index.vue模板做如下改造
<cusHeader class="header" :title="titleNum"></cusHeader>
...
// header.vue組件做如下改造
<template>
    <div>
        <header>{{title}}</header>
    </div>
</template>

這時(shí)頁面會(huì)渲染為

<div class="header"><header>12</header></div>

4）替換/合并現(xiàn)有特性

如果組件內(nèi)部的外層元素和要添加的屬性存在相同屬性，那么這個(gè)屬性就會(huì)進(jìn)行替換或合并，例如：

// 模板內(nèi)做如下修改，添加一個(gè)自定義的info屬性
<cusHeader info="header" style="color: red" class="header" :title="titleNum"></cusHeader>
...
// 組件內(nèi)部也一樣做調(diào)整
<template>
    <div class="basis" info="basis" style="color: yellow; font-size: 14px">
        <header>{{title}}</header>
    </div>
</template>

此時(shí)頁面渲染為

<div class="basis header" info="basis" style="color: red; font-size: 14px;">
    <header>12</header>
</div>

我們發(fā)現(xiàn)info屬性被替換，class屬性進(jìn)行了合并，而style屬性被有選擇型合并了(組件內(nèi)的color被父組件的color覆蓋了，而font-size被保留)，Vue在處理這些組件傳遞的特性時(shí)大部分會(huì)被直接替換，只有在處理class和style時(shí)才會(huì)有選擇性的合并

5）子組件向父組件傳遞數(shù)據(jù)

使用props我們可以很容易的從父組件向子組件傳遞數(shù)據(jù)，但是如果反過來，要從子組件向父組件傳遞數(shù)據(jù)時(shí)，就要借助自定義事件來完成：

// index.vue模板中做如下改造
<cusHeader :title="titleNum" @concat="changeNum"></cusHeader>
...
// 在index.vue的methods下新建方法changeNum
methods: {
    changeNum (val) {
        this.titleNum = val;
    }
}
...
// header.vue做如下改造
<template>
    <div @click="clickEvt">
        <header>{{title}}</header>
    </div>
</template>
...
// header.vue的methods下添加下面方法
clickEvt () {
    this.$emit('concat', 20);
}

渲染完成的頁面，當(dāng)你點(diǎn)擊頁面元素，就會(huì)發(fā)現(xiàn)，對(duì)應(yīng)數(shù)值發(fā)生了改變，在這里主要關(guān)心這幾個(gè)方面：

// concat是自定義事件，這里表示監(jiān)聽自定義事件concat，當(dāng)concat被觸發(fā)時(shí)，再觸發(fā)changeNum
@concat="changeNum"; 
...
// 表示觸發(fā)concat事件，并傳值20
this.$emit('concat', 20); 
...
// 在changeNum中接收的參數(shù)val，就是上面從子組件中傳遞而來
changeNum (val) {
    this.titleNum = val;
}

從上面的例子可以看出，借用自定義事件，我們實(shí)現(xiàn)了從子組件向父組件傳遞數(shù)據(jù)的能力，Vue推崇的單向數(shù)據(jù)流，所以才會(huì)用父組件到子組件通過props，子組件到父組件使用自定義事件，下圖是官網(wǎng)解釋父子組件通信的圖片：

image.png

不過Vue針對(duì)子組件對(duì)父組件通信，提供了一個(gè)語法糖修飾符sync，讓子組件可以通過事件直接觸發(fā)父組件中值或狀態(tài)的修改，形成類似雙向綁定。

<cusHeader :title.sync="titleNum"></cusHeader>
...
// 在header.vue做如下改動(dòng)，update:title是顯示觸發(fā)相關(guān)更新
clickEvt () {
    this.$emit('update:title', 30)
}

這時(shí)點(diǎn)擊頁面元素，我們發(fā)現(xiàn)對(duì)應(yīng)數(shù)值也一樣發(fā)生了變動(dòng)，此時(shí)頁面的數(shù)據(jù)就形成了一種類似雙向綁定的交互邏輯：
子組件傳值到父組件，父組件更新數(shù)據(jù)，又回傳給子組件，子組件數(shù)據(jù)更新

6）使用native修飾符觸發(fā)事件 （精華）

// 比如，你想直接在組件上綁定一個(gè)click事件
<cusHeader :title="titleNum" @click="changeNum"></cusHeader>
...
methods: {
    changeNum () {
        console.log('changeNum');
    }
}
...
// 此時(shí)Vue是會(huì)把@click="changeNum"中的click識(shí)別成一個(gè)自定義事件，如果想正常觸發(fā)，需要在組件內(nèi)添加相應(yīng)的事件進(jìn)行觸發(fā)
// 在header.vue中的事件做改造，這時(shí)組件上的click事件就能正常觸發(fā)
clickEvt () {
    console.log('從子組件觸發(fā)');
    this.$emit('click');
}

為了解決上面的問題，Vue制定了一個(gè).native的修飾符

<cusHeader :title="titleNum" @click.native="changeNum"></cusHeader>
...
// header.vue把觸發(fā)click的代碼刪除
clickEvt () {
    console.log('從子組件觸發(fā)');
}

這時(shí)組件的click事件就能正常觸發(fā)

子組件之間的通信 （其他章節(jié)詳細(xì)描述）

上面探討了父組件和子組件，子組件和父組件通信的問題，為了解決子組件之間的通信，官方提供了Vuex，內(nèi)容偏多，分開討論

使用插槽分發(fā)內(nèi)容

如果我們把新建的組件當(dāng)作普通的HTML元素，在其中引用普通元素

<cusHeader>
    <p>內(nèi)部元素</p>
</cusHeader>

最終渲染會(huì)忽略插在組件內(nèi)部的元素，如果要解決這個(gè)問題，需要借助插槽(slot)，在header.vue組件做如下改造：

<template>
    <div>
        <header>{{title}}</header>
        <slot>只有在沒有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示</slot>
    </div>
</template>

這時(shí)頁面就可以正常渲染出p標(biāo)簽中的內(nèi)容，現(xiàn)在如果刪除p標(biāo)簽，那么頁面就顯示slot中的文字，這個(gè)地方就會(huì)有一個(gè)問題，比如slot中這段文字，你希望是按需展示出來，而不是當(dāng)沒有插槽內(nèi)容就直接展示，這時(shí)可以借助作用域插槽來解決這個(gè)問題

// header.vue做如下修改，把插槽的默認(rèn)值放到text(自定義屬性，可以是任意值)屬性中
<slot text="只有在沒有要分發(fā)的內(nèi)容時(shí)才會(huì)顯示"></slot>
...
// index.vue做如下修改，在組件引用的地方調(diào)用這個(gè)插槽存儲(chǔ)的值
// 下面slot-scope可以用在p標(biāo)簽是在Vue 2.5+以上的版本
// prop也可以是任意值
<cusHeader>
    <p slot-scope="prop">{{prop.text}}</p>
</cusHeader>

通過這種方式，我們就可以在組件內(nèi)定義一些默認(rèn)信息，同時(shí)可以按需進(jìn)行加載，形成來類似父組件通過props向子組件傳值的能力，此時(shí)綁在組件插槽的內(nèi)容只能在組件調(diào)用的域中可用。

slot最初被設(shè)定為備用內(nèi)容，但當(dāng)和name屬性一并使用時(shí)，其就具備了分發(fā)內(nèi)容的能力

// header.vue下模板改造為
<template>
    <div>
        <div class="header">
            <slot name="header"></slot>
        </div>
        <div class="body">
            <slot></slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>
...
// index.vue下模板修改為
<cusHeader>
    <h1 slot="header">這是頭部</h1>
    <p>這個(gè)會(huì)放到默認(rèn)body中</p>
    <h1 slot="footer">這是底部</h1>
</cusHeader>
...
// 頁面渲染為
<div>
    <div class="header">
        <h1>這是頭部</h1>
    </div> 
    <div class="body"> 
        <p>這個(gè)會(huì)放到默認(rèn)body中</p> 
    </div> 
    <div class="footer">
        <h1>這是底部</h1>
    </div>
</div>

使用具名插槽在組件設(shè)計(jì)上，會(huì)使組件更加靈活

動(dòng)態(tài)組件

官網(wǎng)上提到的動(dòng)態(tài)組件并不是動(dòng)態(tài)加載的組件，而是可以動(dòng)態(tài)切換的組件，是指利用保留的component標(biāo)簽，在結(jié)合is特性，對(duì)某一處的加掛點(diǎn)動(dòng)態(tài)切換組件，在這里我們實(shí)現(xiàn)一個(gè)相對(duì)復(fù)雜點(diǎn)tab頁切換

// 在hello-world目錄下，新建三個(gè).vue文件，分別表示三個(gè)新聞塊的內(nèi)容
game.vue
sport.vue
news.vue
...
// game.vue內(nèi)添加如下內(nèi)容
<template>
    <ul>
        <li v-for="item in gameList">{{item.title}} - {{item.time}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                gameList: [
                    {id: 'g01', title: '游戲新聞1', time: '03-07'},
                    {id: 'g02', title: '游戲新聞2', time: '03-07'},
                    {id: 'g03', title: '游戲新聞3', time: '03-07'},
                    {id: 'g04', title: '游戲新聞4', time: '03-07'},
                    {id: 'g05', title: '游戲新聞5', time: '03-07'},
                ]
            }
        },
        created () {
            console.log('game module');
        }
    }
</script>
...
// news.vue添加如下內(nèi)容
<template>
    <ul>
        <li v-for="item in gameList">{{item.title}} - {{item.time}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                gameList: [
                    {id: 'n01', title: '新聞1', time: '03-07'},
                    {id: 'n02', title: '新聞2', time: '03-07'},
                    {id: 'n03', title: '新聞3', time: '03-07'},
                    {id: 'n04', title: '新聞4', time: '03-07'},
                    {id: 'n05', title: '新聞5', time: '03-07'},
                ]
            }
        },
        created () {
            console.log('news module');
        }
    }
</script>
...
// sport.vue添加如下內(nèi)容
<template>
    <ul>
        <li v-for="item in gameList">{{item.title}} - {{item.time}}</li>
    </ul>
</template>
<script>
    export default {
        data () {
            return {
                gameList: [
                    {id: 's01', title: '體育新聞1', time: '03-07'},
                    {id: 's02', title: '體育新聞2', time: '03-07'},
                    {id: 's03', title: '體育新聞3', time: '03-07'},
                    {id: 's04', title: '體育新聞4', time: '03-07'},
                    {id: 's05', title: '體育新聞5', time: '03-07'},
                ]
            }
        },
        created () {
            console.log('sport module');
        }
    }
</script>
...
// index.vue引入添加的三個(gè)組件
import gameList from './game.vue'; // 引入游戲列表
import newsList from './news.vue'; // 引入新聞列表
import sportList from './sport.vue'; // 引入運(yùn)動(dòng)新聞列表
...
// index.vue的components注冊(cè)這三個(gè)組件
components: {
    gameList,
    newsList,
    sportList
}
...
// index.vue的data中添加如下信息
tabList: ['新聞', '游戲新聞', '體育新聞'],
showTabView: 'gameList'
...
// index.vue的模板做如下修改
<ul>
    <li v-for="item in tabList" @click="changeTab(item)">{{item}}</li>
</ul>
<component :is="showTabView"></component>
...
// index.vue的methods下添加changeTab方法
changeTab (val) {
    if (val === '新聞') {
        this.showTabView = 'newsList';
    } else if (val === '游戲新聞') {
        this.showTabView = 'gameList';
    } else if (val === '體育新聞') {
        this.showTabView = 'sportList';
    }
}

當(dāng)然這個(gè)例子是有點(diǎn)不合適的，這三個(gè)列表應(yīng)該是復(fù)用一個(gè)列表組件，只不過根據(jù)不同數(shù)據(jù)源展示不同，我們?cè)邳c(diǎn)擊進(jìn)行切換時(shí)，會(huì)發(fā)現(xiàn)控制臺(tái)會(huì)一直輸出我們?cè)O(shè)置在created中的log，證明在切換組件時(shí)，組件每一次都是重新加載，這個(gè)從性能上考慮是需要進(jìn)行優(yōu)化的，使用Vue盡可能的復(fù)用重復(fù)代碼

使用keep-alive標(biāo)簽保留組件狀態(tài)以及靜態(tài)資源，避免重新渲染

// 在動(dòng)態(tài)加載組件的標(biāo)簽外添加keep-alive標(biāo)簽
<keep-alive>
    <component :is="showTabView"></component>
</keep-alive>

這時(shí)如果我們?cè)冱c(diǎn)擊頁面進(jìn)行組件切換，會(huì)發(fā)現(xiàn)各個(gè)組件created方法，只會(huì)執(zhí)行一次，再次切換回相關(guān)組件時(shí)，created就不會(huì)執(zhí)行，不過這樣雖然達(dá)到了組件的復(fù)用保留了靜態(tài)資源，而且也不會(huì)進(jìn)行也避免了不必要的渲染，但是要如何知道這個(gè)組件發(fā)生了切換或值停用？Vue針對(duì)keep-alive的特性，添加了兩個(gè)鉤子函數(shù)activated 和 deactivated

// game.vue添加下面代碼
activated () {
    console.log('game activated');
},
deactivated () {
    console.log('game deactivated');
}
...
// news.vue添加下面代碼
activated () {
    console.log('new activated');
},
deactivated () {
    console.log('new deactivated');
}
...
// sport.vue添加下面代碼
activated () {
    console.log('sport activated');
},
deactivated () {
    console.log('sport deactivated');
}

這時(shí)我們點(diǎn)擊頁面元素，進(jìn)行組件切換時(shí)，發(fā)現(xiàn)控制臺(tái)，會(huì)按上一個(gè)組件的deactivated和切換后組件的activated的順序執(zhí)行，這樣我們?cè)谶M(jìn)行組件切換時(shí)依然可以通過這兩個(gè)鉤子函數(shù)，動(dòng)態(tài)控制組件的加載

include／exclude控制緩存組件

默認(rèn)Vue會(huì)對(duì)keep-alive包裹下的所有切換組件進(jìn)行緩存，但在某些情況下，我們可能只打算對(duì)部分組件進(jìn)行緩存，這時(shí)就要借助include和exclude進(jìn)行細(xì)化控制

// 字符形式：這么就表示緩存gameList,newsList兩個(gè)模塊，注意“,”后面不能有空格，要不Vue識(shí)別有誤，模塊名直接使用，不需添加引號(hào)
<keep-alive include="gameList,newsList">
...
// 數(shù)組形式：這么也表示緩存gameList和newsList兩個(gè)模塊，模塊名要用字符形式表示
<keep-alive :include="['gameList', 'newsList']">
...
// 正則表達(dá)式：模塊名直接使用無需添加引號(hào)
<keep-alive :include="/gameList|newsList/">

exclude使用方式和include一致，區(qū)別在于exclude表示除此之外，與include功能相反

組件的設(shè)計(jì)

官方文檔提示我們?cè)谠O(shè)計(jì)組件時(shí)，要考慮下面內(nèi)容：

• Prop：接收從組件外部傳遞數(shù)據(jù)；

• 事件： 從組件內(nèi)觸發(fā)組件外部的方法達(dá)到從組件內(nèi)部向外傳遞數(shù)據(jù)的能力；

• 插槽： 允許從組件外部將額外的內(nèi)容組合在組件中。

使用ref獲取子組件引用

ref是用來獲取元素或子組件的引用信息，針對(duì)元素ref獲取就是元素對(duì)應(yīng)的Dom對(duì)象，可以使用原聲js寫法獲取相關(guān)屬性，針對(duì)組件獲取的是一個(gè)VueComponent

// 在組件和p標(biāo)簽都添加ref屬性
<keep-alive :include="/gameList|newsList/">
    <component ref="listChild" :is="showTabView"></component>
</keep-alive>
<p class="info" ref="info">{{info}}</p>
...
// 在mounted方法中使用this.$refs查看ref的引用，如果你把這個(gè)引用放到created中是無法生效的，因?yàn)?refs只有在元素渲染完成才會(huì)被添加到實(shí)例對(duì)象上
// 如果用在普通標(biāo)簽上，獲取其引用可以使用原生js屬性
mounted () {
    console.log(this.$refs);
    console.log(this.$refs.info.className);
}

異步組件

異步組件要結(jié)合webpack來進(jìn)行使用，可以參看webpack中的介紹

遞歸組件

遞歸組件和遞歸調(diào)用類似，是組件反復(fù)套用組件本身，當(dāng)符合某個(gè)條件時(shí)不再引用

// 在header-world目錄下，建立list.vue，在其中輸入如下內(nèi)容
<template>
    <div class="list">
        <p>{{listInfo}}</p>
        <p v-if="closeList"><list :info="list" :flag="listFlag"></list></p>
    </div>
</template>
<script>
    export default {
        name: 'list',
        props: ['flag', 'info'],
        data () {
            return {
                list: '這時(shí)遞歸內(nèi)部調(diào)用的數(shù)據(jù)',
                listFlag: false
            }
        },
        computed: {
            closeList () {
                return this.flag;
            },
            listInfo () {
                return this.info;
            }
        }
    }
</script>
...
// index.vue中引入list.vue，并引用
<script>
    import list from './list.vue'; // 引入遞歸組件
...
    components:{
        list
    }
...
// 模板中調(diào)用這個(gè)組件，info，showFlag都是之前設(shè)定的值
<list :info="info" :flag="showFlag"></list>

這時(shí)頁面就會(huì)渲染為：

<div class="list">
    <p>Hello vue!</p> 
    <p><div class="list"><p>這時(shí)遞歸內(nèi)部調(diào)用的數(shù)據(jù)</p> <!----></div></p>
</div>

我們可以看到，我們?cè)诮M件內(nèi)部復(fù)用了組件本身，在這里有幾個(gè)點(diǎn)需要注意

• 組件內(nèi)部的name屬性需要添加，要不在組件內(nèi)使用list組件是編程出錯(cuò)的
• 組件遞歸的終止條件一定要明確，要不組件會(huì)陷入一種死循環(huán)

遞歸組件非常適合去開發(fā)那種不確定有幾層循環(huán)的組件，比如多級(jí)菜單，后續(xù)在實(shí)例開發(fā)部分會(huì)有案例

組件之間的循環(huán)引用

遞歸組件可以認(rèn)為成是相同組件之間的循環(huán)調(diào)用，當(dāng)是不同組件形成類似遞歸組件的調(diào)用，就會(huì)出現(xiàn)組件調(diào)用異常的情況

// 在項(xiàng)目目錄新建兩個(gè)文件moduleA.vue和moduleB.vue
// moduleA.vue內(nèi)容如下
<template>
    <div>
        <p>{{info}}</p>
        <ul>
            <li v-for="item in listData">
                <module-b v-if="item.child" :listData="item.child"></module-b>
                <p v-else>{{item.title}}</p>
            </li>
        </ul>

    </div>
</template>
<script>
    import moduleB from './moduleB.vue'; // 引入moduleB

    export default {
        data () {
            return {
                info: 'from moduleA'
            }
        },
        props: ['listData'],
        components: {
            moduleB
        }
    }
</script>
...
// moduleB.vue內(nèi)容如下
<template>
    <div>
        <p>{{info}}</p>
        <ul>
            <li v-for="item in listData">
                <module-a v-if="item.child" :listData="item.child"></module-a>
                <p v-else>{{item.title}}</p>
            </li>
        </ul>

    </div>
</template>
<script>
    import moduleA from './moduleA.vue';

    export default {
        data () {
            return {
                info: 'from moduleB'
            }
        },
        props: ['listData'],
        components: {
            moduleA
        }
    }
</script>
...
// index.vue引入moduleA.vue和moduleB.vue并添加相關(guān)數(shù)據(jù)
<module-a :listData="moduleList"></module-a>
...
<script>
    import moduleA from './moduleA.vue';
    ...
    data: {
        moduleList: [
            {title: '新聞',
           child: [
                {title: '本地新聞', 
                 child: [
                    {title: '本地新聞1', 
                        child: [{title:'本地新聞11'}, {title:'本地新聞12'}]}, {title: '本地新聞2'}]},
                 {title: '社會(huì)新聞'},
                 {title: '社會(huì)民生'}
               ]
            }, {title: '游戲新聞'}, {title: '體育新聞'}],
    }
    ...
    components: {
        moduleA
    }

這時(shí)控制臺(tái)會(huì)報(bào)錯(cuò)，提示你在moduleB.vue文件中module-a沒有注冊(cè)，我們回看整個(gè)調(diào)用邏輯會(huì)發(fā)現(xiàn)，moduleA組件中引用了moduleB組件，moduleB組件又引用了moduleA組件，并且根據(jù)我們?cè)斓臄?shù)據(jù)能看出，moduleA和moduleB也彼此產(chǎn)生了調(diào)用，這個(gè)時(shí)候兩個(gè)組件形成了類似遞歸組件的那種調(diào)用的情況，只不過區(qū)別在于遞歸組件調(diào)用自己，是一定存在，但是moduleA和moduleB就無法保證在彼此調(diào)用時(shí)一定存在，而且這個(gè)問題按官方的說法，只有在使用webpack等模塊管理工具才會(huì)有這問題，如果使用Vue.component進(jìn)行注冊(cè)，Vue會(huì)直接處理這個(gè)沖突，要解決此問題，就需要借助beforeCreate這個(gè)鉤子函數(shù)，我們?cè)趍oduleA(因?yàn)閙oduleA針對(duì)moduleB是入口組件)

// moduleA.vue中進(jìn)行相關(guān)修改，保證moduleB不會(huì)在moduleA之前引用
<script>
    export default {
        data () {
            return {
                info: 'from moduleA'
            }
        },
        props: ['listData'],
        beforeCreate () {
            this.$options.components.moduleB = require('./moduleB.vue').default;
        },
        components: {
        }
    }
</script>

經(jīng)過上面的改造，頁面就可以正常展示，以上就是Vue的基礎(chǔ)內(nèi)容，下一章討論Vue其他的一些混合特性，以及過渡和動(dòng)畫