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

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

<!-- 在雙花括號(hào)中 -->{{ 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> // 定義一個(gè) Vue 全局的過濾器，名字叫做 msgFormat Vue.filter(’msgFormat’, function(msg, arg, arg2) {// 字符串的 replace 方法，第一個(gè)參數(shù)，除了可寫一個(gè) 字符串之外，還可以定義一個(gè)正則return msg.replace(/單純/g, arg+arg2) }) </script>

3、局部過濾器

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

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

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

在開始之前，我們需要明確一點(diǎn)，自定義指令解決的問題或者說使用場(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>

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

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

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

按順序執(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)注好吧啦網(wǎng)其它相關(guān)文章！