概念
指令只是一种可以附加到DOM元素的微命令(tiny commands)。它们通常以 “v-” 作为前缀，以方便 Vue 知道你在使用一种特殊的标记，从而确保语法的一致性。 如果你需要对 HTML 元素的低级别 ( low-level ) 访问来控制一些行为，它们通常很有用
钩子函数
bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用unbind 只调用一次，指令与元素解绑时调用
<body
>
<div id
="app">
<input type
="text" v
-test
>
</div
>
<script src
="vue.js"></script
>
<script
>
Vue
.directive('test', {
bind
: function(el
, binding
) {
console
.log('bind')
},
inserted
: function(el
, binding
) {
console
.log('inserted')
},
update
: function(el
, binding
) {
console
.log('update')
},
componentUpdated
: function(el
, binding
) {
console
.log('componentUpdated')
},
unbind
: function(el
, binding
) {
console
.log('unbind')
}
})
new Vue({
el
: '#app'
})
</script
>
</body
>
参数
1. el 指令所绑定的元素，可以用来直接操作 DOM
2. binding 一个对象，包含以下属性：
name： 指令名，不包括 v- 前缀
value： 指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2
oldValue： 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用
expression： 字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”
arg： 传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”
modifiers： 一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }
3. vnode Vue 编译生成的虚拟节点
4. oldVnode 上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用
注意
除了 el 之外，其它参数都应该是只读的，切勿进行修改。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行建议在给指令的命名时采用小驼峰式的命名方式，比如changeBackgroundColor，在使用的时候采用烤串式写法 v-change-background-color
<body
>
<div id
="app">
<div
class="txt" v
-test
:aaa
.trim
="100+2"></div
>
</div
>
<script src
="vue.js"></script
>
<script
>
Vue
.directive('test', {
inserted
: function(el
, binding
) {
el
.innerText
= binding
.value
console
.log(el
)
console
.log(binding
.name
)
console
.log(binding
.value
)
console
.log(binding
.expression
)
console
.log(binding
.arg
)
console
.log(binding
.modifiers
)
}
})
new Vue({
el
: '#app'
})
</script
>
</body
>
局部自定义指令
<body
>
<div id
="app">
<div
class="box">
<input type
="text" v
-focus
>
</div
>
</div
>
<script src
="vue.js"></script
>
<script
>
new Vue({
el
: '#app',
data
: {},
directives
: {
focus
: {
inserted
: function(el
, binding
) {
el
.focus()
}
}
}
})
</script
>
</body
>
全局自定义指令
<body
>
<div id
="app">
<div
class="box">
<input type
="text" v
-focus
>
</div
>
</div
>
<script src
="vue.js"></script
>
<script
>
Vue
.directive('focus', {
inserted
: function (el
, binding
) {
el
.focus()
}
})
new Vue({
el
: '#app'
})
</script
>
</body
>
函数简写
值为对象字面量
<body
>
<div id
="app">
<div
class="txt" v
-textcolor
="{color: 'red'}">我的颜色是自定义指令更改的
</div
>
</div
>
<script src
="vue.js"></script
>
<script
>
Vue
.directive('textcolor', function(el
, binding
) {
el
.style
.color
= binding
.value
.color
})
new Vue({
el
: '#app'
})
</script
>
</body
>
值为表达式
<body
>
<div id
="app">
<div
class="txt" v
-expresstion
="100+2"></div
>
<div
class="txt" v
-isshow
="false">我是隐藏的盒子
</div
>
<div
class="txt" v
-addtext
="text"></div
>
</div
>
<script src
="vue.js"></script
>
<script
>
Vue
.directive('expresstion', function(el
, binding
) {
el
.innerText
= binding
.value
})
Vue
.directive('isshow', function(el
, binding
) {
el
.style
.display
= binding
.value
? 'block':'none'
})
Vue
.directive('addtext', function(el
, binding
) {
el
.innerText
= binding
.value
})
new Vue({
el
: '#app',
data
: {
text
: '哈哈，我是指令添加的'
}
})
</script
>
</body
>
小例子
<body
>
<div id
="app">
<!-- 背景颜色 红色 字体颜色 黄色 v
-color
:fcolor
="fColor" -->
<input type
="text" v
-color
:bgcolor
="bgColor" v
-color
:fcolor
="fColor">
</div
>
<script src
="vue.js"></script
>
<script
>
Vue
.directive('color', {
inserted(el
, binding
) {
if (binding
.arg
=== 'bgcolor') {
el
.style
.background
= binding
.value
}
if ( binding
.arg
=== 'fcolor') {
el
.style
.color
= binding
.value
}
}
})
new Vue({
el
: '#app',
data
: {
bgColor
: 'red',
fColor
: 'yellow'
}
})
</script
>
</body
>
