vue自定義指令的建立和使用

2022-03-16 10:40:28 字數 2549 閱讀 5641

一、自定義指令的建立和使用

vue自帶的指令很多,v-for/v-if/v-else/v-else-if/v-model/v-bind/v-on/v-show/v-html/v-text...

但是這些指令都是比較偏向於工具化,有些時候在實現具體的業務邏輯的時候,發現不夠用,如何來自定義指令.

1、自定義指令

①建立new vue(,

update:function(){},

unbind:function(){}}}

})在自定義指令時,在指令對應的配置物件中有3個處理函式指令對應的操作

bind

指令在繫結到元素要執行的操作

update

如果在呼叫指令時候,傳了引數,當引數變化時候,就會執行update所指定的方法

unbind

解綁要執行的操作

②使用自定義指令

directives:,

update:function(){},

unbind:function(){}}}

使用:v-hello

注意事項:

建議在給指令的命名採用小駝峰式的命名方式,比如changebackgroundcolor,在使用的時候,採用烤串式寫法 v-change-background-color

(方法:引數,返回值)

bind方法以及update方法 都是有引數的,

乙個是el,對應的是呼叫指令的元素

乙個bindings,是乙個物件:name/rawname/value/oldvalue...

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

script

src="js/vue.js"

>

script

>

<

title

>

title

>

head

>

<

body

>

<

div

id="container"

>

<

p>}

p>

<

button

@click

="handleclick"

>clickme

button

>

<

h1

v-if

="count < 6"

v-change

="count"

>it is a custom directive

h1>

div>

<

script

>

//directive

newvue(,

methods:

},directives:,

update:

function

(el,bindings)

},unbind:

function

() }}})

script

>

body

>

html

>

doctype html

>

<

html

>

<

head

lang

="en"

>

<

meta

charset

="utf-8"

>

<

script

src="js/vue.js"

>

script

>

<

title

>

title

>

head

>

<

body

>

<

div

id="container"

>

<

p>}

p>

<

h1 v-change-background-color

="mybgcolor"

>

it is a header1

h1>

div>

<

script

>

newvue(,

directives:}}

})script

>

body

>

html

>

背景色這樣也是可以的,但是寫死了,不好

vue自定義指令的建立和使用

1 bind 只呼叫一次,指令第一次繫結到元素時呼叫,用這個鉤子函式可以定義乙個繫結時執行一次的初始化動作。2 inserted 被繫結元素插入父節點時呼叫 父節點存在即可呼叫,不必存在於document中 3 update 被繫結於元素所在的模板更新時呼叫,而無論繫結值是否變化。通過比較更新前後的...

vue 自定義指令的使用

在vue開發專案中,指令的使用場景也是比較多的,那麼該如何定義使用呢?找到 src directive 下新建 gender 目錄,下面新建 index.js 和 gender.js gender 使用方法 1 gender.install install export default gender...

vue自定義過濾器的建立和使用

過濾器的作用 實現資料的篩選 過濾 格式化。vue1.版本是有內建的過濾器,但是在vue2.所有的版本都已經沒有自帶的過濾器了。1 過濾器建立 過濾器的本質 是乙個有引數 有返回值的方法 new vue 2 過濾器使用 語法 舉個例子 3 過濾器高階用法 在使用過濾器的時候,還可以指定引數,來告訴過...