Vue學習之過濾器和自定義指令小結(三)

2022-02-11 12:10:30 字數 2226 閱讀 5464

過濾器:

過濾是乙個資料經過了這個過濾之後出來另一樣東西,可以是從中取得你想要的,或者給那個資料新增點什麼裝飾。過濾器就是過濾用的工具。渲染資料用的!!!

我們需要知道的是:

1、vue中的過濾器不能替代vue中的methodscomputed或者watch

2、過濾器不改變真正的data,而只是改變渲染的結果,並返回過濾後的版本。 

一、品牌專案的新增功能的思路(雙向資料繫結):

二、過濾器:

1、過濾器呼叫時候的格式:

} 2、過濾器的定義語法:

vue.filter('過濾器的名稱』, function(){})

//過濾器中的function , 第乙個引數,已經被規定死了,永遠都是 過濾器 管道符| 前面 傳遞過來的資料

3、定義私有過濾器有兩個條件:過濾器的名稱 和  處理函式

//定義乙個vue全域性的過濾器,名字叫 msgformat

vue.filter(

"msgformat",

function

(msg, arg, arg2) );

vue.filter(

"test",

function

(msg) );

varvm

=new

vue(

});script

>

body

>

html

>

三、自定義指令:

//使用 vue.directive() 定義的指令 v-focus

// 其中:引數1: 指令的名稱,注意,在定義的時候,指令的名稱前面,不需要加v-字首

//但是,在呼叫的時候,必須在指令名稱前,加上v-字首來進行呼叫

vue.directive("focus", ,

inserted: function(el) ,

updated: function(el)

樣式,只要通過指令繫結給了元素,不管這個元素有沒有被插入到頁面中去,這個元素肯定有了乙個內聯的樣式,將來元素肯定會顯示到頁面中,這時候,瀏覽器的渲染引擎必然會解析樣式,應用給這個元素。

詳情見菜鳥教程有關鉤子函式介紹

鉤子函式的引數有:

vnode: vue 編譯生成的虛擬節點。

oldvnode: 上乙個虛擬節點,僅在updatecomponentupdated鉤子中可用。

//獲取焦點的字型顏色變成指定的顏色!

vue.directive("color",

});

vue中自定義指令和自定義過濾器

vue中除了核心功能內建的指令外,也允許註冊自定義指令。有的情況下,對普通dom元素進行底層操作,這時候就會用到自定義指令。自定義指令又分為全域性的自定義指令和區域性自定義指令。全域性自定義指令是通過vue.directive 第乙個引數是指令的名稱 vue.directive focus 區域性自...

自定義指令和過濾器

自定義指令 vue中提供了豐富的內建指令,如v if,v bind,v on 除此之外我們還可以通過全域性的自定義指令vue.directive 或者區域性的自定義指令directives 來定義指令 通過自定義指令,我們可以對dom進行更多的底層操作,這樣不僅可以在某些場景下為我們提供快速解決問題...

vue自定義過濾器

1.什麼是過濾器 過濾器就是乙個資料經過了這個過濾器之後出來另一樣東西。2.過濾器分為 全域性過濾器和區域性過濾器 global filter是過濾器名稱 函式第乙個引數是需要過濾的資料.函式第二個引數是給過濾器傳遞的值.vue.filter global filter val,args retur...