一、自定義指令的建立和使用
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 過濾器高階用法 在使用過濾器的時候,還可以指定引數,來告訴過...