詳解Vue中的filter與directive

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

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

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

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

3、局部過濾器

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

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

vue自定義指令--directive

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

在開始之前，我們需要明確一點，自定義指令解決的問題或者說使用場景是對普通 DOM 元素進行底層操作，所以我們不能盲目的胡亂的使用自定義指令。

全局指令

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

局部指令

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

使用

<input v-focus>

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

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

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

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

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

unbind：只調(diào)用一次，指令與元素解綁時調(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的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: