自定義指令和過濾器

2021-10-14 15:31:28 字數 1009 閱讀 4847

自定義指令

vue中提供了豐富的內建指令,如v-if,v-bind,v-on…,除此之外我們還可以通過全域性的自定義指令vue.directive({})或者區域性的自定義指令directives:{}來定義指令

通過自定義指令,我們可以對dom進行更多的底層操作,這樣不僅可以在某些場景下為我們提供快速解決問題的思路,而且讓我們對vue的底層有了進一步的了解

鉤子函式:

1.bind: 此鉤子函式只會被呼叫一次,可以定義乙個在繫結時執行一次的初始化動作

2.inserted: 當被繫結的元素插入到父元素中是低調用(此處的父元素不侷限於document中)

3.update: 不論被繫結的值是否發生了變化,在末班更新時都會被呼叫,

4.componentupdated:被繫結的元素在模板完成一次更新週期時呼叫,

5.unbind: 只呼叫一次,元素解綁時呼叫

引數

1.el: 指令所繫結的dom元素,可以直接用來操作dom

​ 2.binding: 乙個物件,包含以下屬性

​ name: 指令的名稱

​ value: 指令繫結的值

​ oldvalue: 指令繫結前乙個值

​ expression: 繫結值的字串形式

​ arg: 傳給指令的引數

​ modifiers: 這是乙個包含修飾符的物件

過濾器過濾器是實現變數的格式化輸出 。過濾器分為區域性過濾器還有全域性過濾器

全域性過濾器 是在多個例項中可以使用的過濾器

區域性過濾器 只是在當前的元件或者例項中使用

裡面都有兩個引數第乙個是過濾器的名字,第二個是過濾器函式。過濾器函式以值作為引數,返回轉換後的值,他可以接收任意數量的引數

呼叫過濾器可以用雙花括號插值和v-bind表示式

過濾器可以串聯 但是後面的肯定是以前面的為基礎,他們都用管道符鏈結

他可以使用在我們專案中的搜尋,日期轉換,購物車中的**之類

自定義過濾器和全域性過濾器

過濾器中必須有返回值 一般使用花括號 插值,管道符前是要過濾的元素,管道符之後是過濾方法 p 過濾方法中有乙個引數,這個引數就是傳進來的要過濾的元素 過濾器 filters 使用過濾器時出現死迴圈 因為在將原陣列排序後賦值給原陣列,引用空間沒有變化,過濾一直在執行 解決辦法 使用擴充套件符將陣列賦值...

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

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

自定義過濾器

這裡的過濾器的作用主要是在業務邏輯裡面判斷,傳遞的引數是否有誤,然後在實現類裡面去判斷具體的業務資料,執行流程和servlet的過濾器相類似,但是執行時機和作用大不相同,servlet的執行時機是在請求資源,在達到control之前去執行,通過執行鏈,我們的這個過濾器是在control裡,如下.先定...