自定義指令

自定義指令

vue中提供了豐富的內建指令，如v-if,v-bind,v-on…,當這些內建指令不能滿足我們需求時，我們還可以通過全域性的自定義指令vue.directive({})或者區域性的自定義指令directives:{}來定義指令，

他們都有兩個引數，第乙個是指令的名字，第二個是鉤子函式

鉤子函式：

1.bind: 只會被呼叫一次，指令第一次繫結到元素時呼叫

2.inserted: 當被繫結的元素插入到父元素中時呼叫（此處的父元素不侷限於document中）

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

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

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

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

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

​ name: 指令的名稱

​ value： 指令繫結的值

​ oldvalue: 指令繫結前乙個值

​ expression: 繫結值的字串形式

​ arg： 傳給指令的引數

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

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

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

vue.

filter
(「過濾器的名字」，function
(value
))

filters:

}

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

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

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

自定義指令

像v if，v show等，是vue已經內建的指令，我們也可以使用directive來自定義指令 其中的blue要被引號所包裹，不然會被識別為變數來進行查詢全域性自定義指令 vue.directive focus vue.directive color var vm new vue 簡寫形式，代表我...

自定義指令

自定義指令有兩種方法 complieprovider.directive 指令名 function return restrict acem replace true,transclude true,template content return restrict acem replace true...

自定義指令

directives.js 存放 自定義標籤 strict require scope link 接收兩個引數 第乙個引數表示自定義指令的名稱 在頁面中使用 分隔單詞，在自定義指令中通過駝峰式命名 第二個引數表示自定義指令處理函式 返回值是乙個物件，用來描述我們自定義指令的 描述自定義指令的物件有一...