1. 過濾器

一般用于將后端傳給前端的數(shù)據(jù)中滿足用戶條件的內(nèi)容進行過濾的功能
我們可以手動實現(xiàn)自己的過濾器，也可以使用 Vue 提供的局部跟全局過濾器
實現(xiàn)的時候我們需要將要過濾的條件作為參數(shù)傳入過濾函數(shù)中，過濾函數(shù)中用迭代器將每個元素與傳入的關(guān)鍵詞進行匹配
如果匹配成功就將其傳入我們定義的一個臨時變量，最后將這一臨時變量返回即可
也就是說我們的 v-for 接受的不再是一個數(shù)組，而是一個函數(shù)，這個函數(shù)會接受一個參數(shù)
在函數(shù)內(nèi)部我們再將我們要展示的數(shù)組進行處理即可

html

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

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

javascript

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

我們也可以使用 ES6 里面的 includes 方法來代替 indexOf

2. Vue 中的過濾器

Vue 給我們提供了一些全局過濾器跟私有過濾器，用于將一些數(shù)據(jù)進行格式化或者進行過濾
過濾器可以用于兩個地方，一個是插值表達式：{{}} 第二個是 v-bind：:xxx
下面是一段對v-bind使用過濾器的例子
```
v-bind:href="info.id|getTitleHref"
```
過濾器應(yīng)該被用在 JavaScript 表達式的尾部，用管道符:|來與被過濾的對象隔開
這一思想與 Linux 內(nèi)部的用法如出一轍
過濾器說到底也是一個函數(shù)，在調(diào)用時候的格式就要遵循管道符的用法，也就是在展示被展示的變量之前會先調(diào)用過濾器對內(nèi)容進行過濾
在過濾完成之后將過濾后的內(nèi)容展示出來
過濾器有全局過濾器，私有過濾器之分
全局過濾器用Vue.filter('過濾器名稱',function(){})來定義，也就是第一個參數(shù)傳入過濾器的名稱，第二個參數(shù)是一個用于處理被傳入的數(shù)據(jù)的回調(diào)函數(shù)
過濾器第二個參數(shù)接受的第一個參數(shù)就是要通過過濾器的數(shù)據(jù),處理完每個數(shù)據(jù)之后再返回出去即可

全局過濾器

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

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

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

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

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

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

<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;
});

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

3. 定義私有過濾器

私有過濾器屬于 Vue 實例中所在的實例
使用 filters 屬性在 Vue 實例中定義自己的私有過濾器
定義方式與 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. 自定義按鍵修飾符

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

html

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

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

5. 自定義全局指令

指令有很多優(yōu)點，我們可以直接用到元素上面
但是我們到目前為止接觸到的全是 Vue 中默認的指令，實際上我們可以定義自己的全局或者局部指令
指令其實是有生命周期的，因此我們可以使用指令的生命周期給其定義一些特殊的行為
指令的生命周期有：
bind：只調(diào)用一次，在元素被第一次調(diào)用的時候進行調(diào)用，可以用于初始化設(shè)置，也就是在內(nèi)存中就執(zhí)行了，一般將一些樣式相關(guān)的處理函數(shù)綁定到這個生命周期上面
inserted：被綁定的元素插入父節(jié)點時調(diào)用，一般將一些 javascript 行為相關(guān)的操作綁定的到這個鉤子函數(shù)上面
update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新
componentUpdated：指令所在組件的 VNode 及其子 VNode 全部更新后調(diào)用。
unbind：只調(diào)用一次，指令與元素解綁時調(diào)用。
這些中一般常用的生命周期就是 bind 跟 inserted 這兩個生命周期
當我們定義一些自定義指令的時候若只用到了這兩個生命周期的話我們可以進行簡寫
指令也有一些默認參數(shù)，分別為：el,binding,vnode,oldnode
el：指向被綁定的元素，可以用來直接操作 dom
binding：一個對象，其中包括：
-- name：指令名，不包括 v- 前綴。
-- value：指令的綁定值，例如：v-my-directive="1 + 1" 中，綁定值為 2。
-- oldValue：指令綁定的前一個值，僅在 update 和 componentUpdated 鉤子中可用。無論值是否改變都可用。
-- expression：字符串形式的指令表達式。例如 v-my-directive="1 + 1" 中，表達式為 "1 + 1"。
-- arg：傳給指令的參數(shù)，可選。例如 v-my-directive:foo 中，參數(shù)為 "foo"。
-- modifiers：一個包含修飾符的對象。例如：v-my-directive.foo.bar 中，修飾符對象為 { foo: true, bar: true }。
其中 value 跟 expression 兩個參數(shù)較為重要
vnode：Vue 編譯生成的虛擬節(jié)點。移步 VNode API 來了解更多詳情。
oldVnode：上一個虛擬節(jié)點，僅在 update 和 componentUpdated 鉤子中可用

html

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

javascript

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

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

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

    }
})

自定義局部指令

自定義局部指令可以被用于一個實例身上
下面直接給出例子

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 () {

            }
        }
    }

簡寫指令的方式定義

當我們不關(guān)心指令的生命周期的時候我們可以通過以下這種方式來簡寫指令

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

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

6. 組件的生命周期

從Vue實例被掛載到dom樹到銷毀這個dom樹的過程中其實伴隨著很多鉤子函數(shù)
通過對其鉤子函數(shù)加一些特定的處理方法，我們可以更系統(tǒng)地控制我們實例的生命周期
Vue中的生命周期有以下幾個,我們直接給出官網(wǎng)中給出的生命周期函數(shù)的圖片做演示

lifecycle.png

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2.過濾器、按鍵修飾符、自定義指令、生命周期

2.過濾器、按鍵修飾符、自定義指令、生命周期

1. 過濾器

html

javascript

2. Vue 中的過濾器

全局過濾器

3. 定義私有過濾器

html

4. 自定義按鍵修飾符

html

5. 自定義全局指令

html

javascript

自定義局部指令

html

簡寫指令的方式定義

6. 組件的生命周期

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

2.過濾器、按鍵修飾符、自定義指令、生命周期

1. 過濾器

html

javascript

2. Vue 中的過濾器

全局過濾器

3. 定義私有過濾器

html

4. 自定義按鍵修飾符

html

5. 自定義全局指令

html

javascript

自定義局部指令

html

簡寫指令的方式定義

6. 組件的生命周期

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2.過濾器、按鍵修飾符、自定義指令、生命周期