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 為固定的參數 即是你需要過濾的數據 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 方法，第一個參數，除了可寫一個 字符串之外，還可以定義一個正則return msg.replace(/單純/g, arg+arg2) }) </script>

3、局部過濾器

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

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

Vue中內置了很多的指令，如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>

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

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

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

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

unbind：只調用一次，指令與元素解綁時調用。

按順序執行

//自定義指令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的詳細內容，更多關于Vue中的filter與directive的資料請關注好吧啦網其它相關文章！