亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解Vue中的filter與directive

 更新時間：2021年05月10日 08:51:01   作者：用戶3548369956673  
這篇文章主要介紹了Vue中的filter與directive的相關資料，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下

vue中的過濾器分為兩種：局部過濾器和全局過濾器

過濾器可被用于一些常見的文本格式化。過濾器可以用在兩個地方：雙花括號插值和 v-bind 表達式 (后者從 2.1.0+ 開始支持)。過濾器應該被添加在 JavaScript 表達式的尾部，由“管道”符號指示(官方文檔)

<!-- 在雙花括號中 -->
{{ message | capitalize }}

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

1、定義無參全局過濾器

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

2、定義有參全局過濾器

 <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: {},
                //定義私用局部過濾器。只能在當前 vue 對象中使用
                filters: {
                    dataFormat(msg) {
                        return msg+'xxxxx';
                    }
                }
            });

vue自定義指令--directive

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

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

全局指令

Vue.directive('focus', {
  // 當被綁定的元素插入到 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)用。在這里可以進行一次性的初始化設置。

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

update：所在組件的 VNode 更新時調(diào)用，但是可能發(fā)生在其子 VNode 更新之前。指令的值可能發(fā)生了改變，也可能沒有。但是你可以通過比較更新前后的值來忽略不必要的模板更新 (詳細的鉤子函數(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的詳細內(nèi)容，更多關于Vue中的filter與directive的資料請關注腳本之家其它相關文章！

相關文章

最新評論