1. 過(guò)濾器

• 一般用于將后端傳給前端的數(shù)據(jù)中滿足用戶條件的內(nèi)容進(jìn)行過(guò)濾的功能
• 我們可以手動(dòng)實(shí)現(xiàn)自己的過(guò)濾器角溃，也可以使用 Vue 提供的局部跟全局過(guò)濾器
• 實(shí)現(xiàn)的時(shí)候我們需要將要過(guò)濾的條件作為參數(shù)傳入過(guò)濾函數(shù)中，過(guò)濾函數(shù)中用迭代器將每個(gè)元素與傳入的關(guān)鍵詞進(jìn)行匹配
• 如果匹配成功就將其傳入我們定義的一個(gè)臨時(shí)變量篮撑，最后將這一臨時(shí)變量返回即可
• 也就是說(shuō)我們的 v-for 接受的不再是一個(gè)數(shù)組减细，而是一個(gè)函數(shù)，這個(gè)函數(shù)會(huì)接受一個(gè)參數(shù)
• 在函數(shù)內(nèi)部我們?cè)賹⑽覀円故镜臄?shù)組進(jìn)行處理即可

html

<input type="text" name="" v-model:value="keyWords" />
<div v-for="item in search(keyWords)">
  <li>{{item}}</li>
</div>

• 其中 input 標(biāo)簽是用來(lái)接受并修改我們的條件關(guān)鍵詞的
• search 函數(shù)是用于返回滿足條件的數(shù)組的

javascript

//根據(jù)關(guān)鍵詞進(jìn)行數(shù)據(jù)的展示
search: function (keyWords) {
    //用于返回滿足條件的數(shù)組
    let newList = []
    this.itemList.forEach(element => {
        //判斷關(guān)鍵詞是否在對(duì)象中name屬性中出現(xiàn)
        if (element.name.indexOf(keyWords) != -1) {
            newList.push(element)
        }
    });
            //給用戶返回滿足條件的對(duì)象組成的數(shù)組
            return newList
        }

• 我們也可以使用 ES6 里面的 includes 方法來(lái)代替 indexOf

2. Vue 中的過(guò)濾器

• Vue 給我們提供了一些全局過(guò)濾器跟私有過(guò)濾器赢笨，用于將一些數(shù)據(jù)進(jìn)行格式化或者進(jìn)行過(guò)濾

• 過(guò)濾器可以用于兩個(gè)地方未蝌，一個(gè)是插值表達(dá)式：{{}} 第二個(gè)是 v-bind：:xxx

• 下面是一段對(duì)v-bind使用過(guò)濾器的例子

• v-bind:href="info.id|getTitleHref"
  

• 過(guò)濾器應(yīng)該被用在 JavaScript 表達(dá)式的尾部，用管道符:|來(lái)與被過(guò)濾的對(duì)象隔開(kāi)

• 這一思想與 Linux 內(nèi)部的用法如出一轍

• 過(guò)濾器說(shuō)到底也是一個(gè)函數(shù)茧妒，在調(diào)用時(shí)候的格式就要遵循管道符的用法萧吠，也就是在展示被展示的變量之前會(huì)先調(diào)用過(guò)濾器對(duì)內(nèi)容進(jìn)行過(guò)濾

• 在過(guò)濾完成之后將過(guò)濾后的內(nèi)容展示出來(lái)

• 過(guò)濾器有全局過(guò)濾器，私有過(guò)濾器之分

• 全局過(guò)濾器用Vue.filter('過(guò)濾器名稱(chēng)',function(){})來(lái)定義桐筏，也就是第一個(gè)參數(shù)傳入過(guò)濾器的名稱(chēng)纸型，第二個(gè)參數(shù)是一個(gè)用于處理被傳入的數(shù)據(jù)的回調(diào)函數(shù)

• 過(guò)濾器第二個(gè)參數(shù)接受的第一個(gè)參數(shù)就是要通過(guò)過(guò)濾器的數(shù)據(jù),處理完每個(gè)數(shù)據(jù)之后再返回出去即可

全局過(guò)濾器

<div v-for="item in itemList">
  <p>{{item.number | dollarFilter}}</p>
</div>

Vue.filter("dollarFilter", function(data) {
  return data + "$";
});

• 這樣一操作之后我們輸出的內(nèi)容后面都會(huì)加上一個(gè)$符號(hào)
• 過(guò)濾器還可以接受參數(shù)，也就是說(shuō)我們第一個(gè)參數(shù)會(huì)是我們要處理的數(shù)據(jù)九昧，之后的參數(shù)就可以用來(lái)接受調(diào)用的地方給我們傳回的參數(shù)绊袋，我們只需要在過(guò)濾器內(nèi)部定義這些行為就可以了，在調(diào)用的時(shí)候也需要將內(nèi)容傳過(guò)去
• 同樣铸鹰，我們也可以傳入更多的參數(shù)癌别，只要我們后期處理就可以了，下面只會(huì)給出兩個(gè)參數(shù)的情況

<div v-for="item in itemList">
  <p>{{item.number | dollarFilter('$$$') }}</p>
</div>

Vue.filter("dollarFilter", function(data, arg) {
  return data + arg;
});

• 過(guò)濾器也可以被多次調(diào)用
• 也可以在一個(gè)內(nèi)容身上使用多個(gè)過(guò)濾器

<div id="app">
  <input type="text" name="" v-model:value="keyWords" />
  <div v-for="item in search(keyWords)">
    <li>{{item}}</li>
  </div>
  <div v-for="item in itemList">
    <p>{{item.number | dollarFilter('$$$$') | otherFilter}}</p>
  </div>
  <p>{{ itemList[1].number | dollarFilter('xxxx') }}</p>
</div>

Vue.filter("otherFilter", function(data) {
  return data + "-----------";
});

Vue.filter("dollarFilter", function(data, arg) {
  return data + arg;
});

• 出來(lái)的結(jié)果就是在$$$$ 后面加了一堆-----

3. 定義私有過(guò)濾器

• 私有過(guò)濾器屬于 Vue 實(shí)例中所在的實(shí)例
• 使用 filters 屬性在 Vue 實(shí)例中定義自己的私有過(guò)濾器
• 定義方式與 methods 中的方法的定義方式相同

html

<div v-for="item in itemList">
  <li>{{ item.number | xxx }}</li>
</div>

filters: {
        xxx: function (data) {
            if (data % 2 === 0) {
                return data
            } else {
                return 'this is not double'
            }
        }
    }

4. 自定義按鍵修飾符

• 有些時(shí)候我們需要滿足當(dāng)按下某些按鍵的時(shí)候觸發(fā)某個(gè)方法
• 這時(shí)候我們就需要用到按鍵修飾符了
• 也就是作用在鍵盤(pán)事件上面的各種修飾符
• 按鍵修飾符的用法是在綁定按鍵事件監(jiān)聽(tīng)的時(shí)候用點(diǎn)修飾符在被綁定的事件上面進(jìn)行修飾
• Vue 中默認(rèn)定義的一些按鍵修飾符有：.enter .tab .space .up .left .right .down ....
• 有些我們想要綁定的按鍵修飾符可能沒(méi)有在這些里面出現(xiàn)蹋笼，這時(shí)候我們可以先在網(wǎng)上找到每個(gè)鍵盤(pán)的鍵盤(pán)碼
• 并且在Vue.config.keyCodes.f1 = 112里面定義自己的鍵盤(pán)碼展姐，之后的鍵盤(pán)修飾符就可以使用自己定義的鍵盤(pán)碼

html

<div>{{ inputText }}</div>
<input type="text" name="" id="" @keyup.enter="setText" />

setText: function (el) {
            this.inputText = el.target.value
        }

5. 自定義全局指令

• 指令有很多優(yōu)點(diǎn)，我們可以直接用到元素上面
• 但是我們到目前為止接觸到的全是 Vue 中默認(rèn)的指令剖毯，實(shí)際上我們可以定義自己的全局或者局部指令
• 指令其實(shí)是有生命周期的圾笨，因此我們可以使用指令的生命周期給其定義一些特殊的行為
• 指令的生命周期有：
• bind：只調(diào)用一次，在元素被第一次調(diào)用的時(shí)候進(jìn)行調(diào)用逊谋，可以用于初始化設(shè)置擂达，也就是在內(nèi)存中就執(zhí)行了，一般將一些樣式相關(guān)的處理函數(shù)綁定到這個(gè)生命周期上面
• inserted：被綁定的元素插入父節(jié)點(diǎn)時(shí)調(diào)用胶滋，一般將一些 javascript 行為相關(guān)的操作綁定的到這個(gè)鉤子函數(shù)上面
• update：所在組件的 VNode 更新時(shí)調(diào)用板鬓，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變究恤，也可能沒(méi)有俭令。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新
• componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
• unbind：只調(diào)用一次部宿，指令與元素解綁時(shí)調(diào)用抄腔。
• 這些中一般常用的生命周期就是 bind 跟 inserted 這兩個(gè)生命周期
• 當(dāng)我們定義一些自定義指令的時(shí)候若只用到了這兩個(gè)生命周期的話我們可以進(jìn)行簡(jiǎn)寫(xiě)
• 指令也有一些默認(rèn)參數(shù)，分別為：el,binding,vnode,oldnode
• el：指向被綁定的元素，可以用來(lái)直接操作 dom
• binding：一個(gè)對(duì)象赫蛇，其中包括：
  -- name：指令名绵患，不包括 v- 前綴。
  -- value：指令的綁定值棍掐，例如：v-my-directive="1 + 1" 中藏雏，綁定值為 2拷况。
  -- oldValue：指令綁定的前一個(gè)值作煌，僅在 update 和 componentUpdated 鉤子中可用。無(wú)論值是否改變都可用赚瘦。
  -- expression：字符串形式的指令表達(dá)式粟誓。例如 v-my-directive="1 + 1" 中，表達(dá)式為 "1 + 1"起意。
  -- arg：傳給指令的參數(shù)鹰服，可選。例如 v-my-directive:foo 中揽咕，參數(shù)為 "foo"悲酷。
  -- modifiers：一個(gè)包含修飾符的對(duì)象。例如：v-my-directive.foo.bar 中亲善，修飾符對(duì)象為 { foo: true, bar: true }设易。
• 其中 value 跟 expression 兩個(gè)參數(shù)較為重要
• vnode：Vue 編譯生成的虛擬節(jié)點(diǎn)。移步 VNode API 來(lái)了解更多詳情蛹头。
• oldVnode：上一個(gè)虛擬節(jié)點(diǎn)顿肺，僅在 update 和 componentUpdated 鉤子中可用

html

<input type="text" name="" id="" v-focus="'red'">

javascript

//全局指令的定義
Vue.directive('focus', {
    //Vue實(shí)例初始化的時(shí)候的鉤子函數(shù),這一段的作用是可以將輸入的內(nèi)容變成顏色為紅色的內(nèi)容
    bind: function (el, binding) {
        el.style.color = binding.value
    },
    //Vue實(shí)例在被裝載到dom樹(shù)之后要觸發(fā)的鉤子函數(shù)
    inserted: function (el) {
        el.focus()
    },
    //之后的一次些鉤子函數(shù)都不是常用的鉤子函數(shù)
    //有數(shù)據(jù)更新的時(shí)候觸發(fā)的鉤子函數(shù)
    update: function () {

    },
    //組件被更新，也就是組件中數(shù)據(jù)更新的時(shí)候觸發(fā)的鉤子函數(shù)
    componentUpdated: function () {

    },
    //解除綁定的時(shí)候觸發(fā)的鉤子函數(shù)
    unbind: function () {

    }
})

自定義局部指令

• 自定義局部指令可以被用于一個(gè)實(shí)例身上
• 下面直接給出例子

html

<p v-font-size="90">yerts</p>

 directives: {
        fontSize: {
            //這一段代碼可以將被使用的元素中字體大小調(diào)節(jié)為輸入的大小
            bind: function (el, binding) {
                el.style.fontSize = binding.value.toString() + 'px'
            },
            inserted: function () {

            },
            update: function () {

            },
            componentUpdated: function () {

            },
            unbind: function () {

            }
        }
    }

簡(jiǎn)寫(xiě)指令的方式定義

• 當(dāng)我們不關(guān)心指令的生命周期的時(shí)候我們可以通過(guò)以下這種方式來(lái)簡(jiǎn)寫(xiě)指令

fontWeight: function (el, binding) {
            el.style.fontWeight = Number(binding.value)
        }

<p v-font-size="90" v-font-weight="900">yerts</p>

6. 組件的生命周期

• 從Vue實(shí)例被掛載到dom樹(shù)到銷(xiāo)毀這個(gè)dom樹(shù)的過(guò)程中其實(shí)伴隨著很多鉤子函數(shù)
• 通過(guò)對(duì)其鉤子函數(shù)加一些特定的處理方法渣蜗，我們可以更系統(tǒng)地控制我們實(shí)例的生命周期

• Vue中的生命周期有以下幾個(gè),我們直接給出官網(wǎng)中給出的生命周期函數(shù)的圖片做演示

  
  
  lifecycle.png