快捷導(dǎo)航

詳解Vue中的filter與directive

更新時(shí)間：2021年05月10日 08:51:01 作者：用戶3548369956673

這篇文章主要介紹了Vue中的filter與directive的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

過(guò)濾器可被用于一些常見(jiàn)的文本格式化。過(guò)濾器可以用在兩個(gè)地方：雙花括號(hào)插值和 v-bind 表達(dá)式 (后者從 2.1.0+ 開(kāi)始支持)。過(guò)濾器應(yīng)該被添加在 JavaScript 表達(dá)式的尾部，由“管道”符號(hào)指示(官方文檔)

<!-- 在雙花括號(hào)中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

1、定義無(wú)參全局過(guò)濾器

Vue.filter('capitalize', function(msg) {// msg 為固定的參數(shù) 即是你需要過(guò)濾的數(shù)據(jù)
            if (!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase() + value.slice(1)
       })

2、定義有參全局過(guò)濾器

 <div id="app">
            <p>{{ msg | msgFormat('瘋狂','--')}}</p>
        </div>

        <script>
            // 定義一個(gè) Vue 全局的過(guò)濾器，名字叫做  msgFormat
            Vue.filter('msgFormat', function(msg, arg, arg2) {
                // 字符串的  replace 方法，第一個(gè)參數(shù)，除了可寫一個(gè) 字符串之外，還可以定義一個(gè)正則
                return msg.replace(/單純/g, arg+arg2)
            })
      </script>

3、局部過(guò)濾器

局部過(guò)濾器的有參和無(wú)參的定義和使用方法與全局的過(guò)濾器一樣。唯一的區(qū)別在于局部過(guò)濾器是定義在vue的實(shí)例中。其作用的區(qū)域也是vue實(shí)例控制的區(qū)域

 // 創(chuàng)建 Vue 實(shí)例，得到 ViewModel
            var vm = new Vue({
                el: '#app',
                data: {
                    msg: 'msg'
                },
                methods: {},
                //定義私用局部過(guò)濾器。只能在當(dāng)前 vue 對(duì)象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

vue自定義指令--directive

Vue中內(nèi)置了很多的指令，如v-model、v-show、v-html等，但是有時(shí)候這些指令并不能滿足我們，或者說(shuō)我們想為元素附加一些特別的功能，這時(shí)候，我們就需要用到vue中一個(gè)很強(qiáng)大的功能了—自定義指令。

在開(kāi)始之前，我們需要明確一點(diǎn)，自定義指令解決的問(wèn)題或者說(shuō)使用場(chǎng)景是對(duì)普通 DOM 元素進(jìn)行底層操作，所以我們不能盲目的胡亂的使用自定義指令。

全局指令

Vue.directive('focus', {
  // 當(dāng)被綁定的元素插入到 DOM 中時(shí)……
  inserted: function (el) {
    // 聚焦元素
    el.setAttribute('placeholder', '這是自定義指令加入的')
    el.focus()
  }
})

局部指令

directives: {
  focus: {
    // 指令的定義
    inserted: function (el) {
      el.focus()
    }
  }
}

使用

<input v-focus>

鉤子函數(shù)(均為可選)

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ā)生了改變，也可能沒(méi)有。但是你可以通過(guò)比較更新前后的值來(lái)忽略不必要的模板更新 (詳細(xì)的鉤子函數(shù)參數(shù)見(jiàn)下)。

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

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

使用及參數(shù)

按順序執(zhí)行

//自定義指令
Vue.directive('focus', {
  bind: function (el, binding, vnode) {
    console.log("1")
  },
  inserted: function (el, binding, vnode) {
    console.log("2");
  },
  update: function (el, binding, vnode, oldVnode) {
    console.log("3");
  },
  componentUpdated: function (el, binding, vnode, oldVnode) {
    console.log('4');
  },
  unbind: function (el, binding, vnode) {
    console.log('5');
  }
})

以上就是詳解Vue中的filter與directive的詳細(xì)內(nèi)容，更多關(guān)于Vue中的filter與directive的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: