分类：
- 全局指令---Vue.directive({ })
- 局部指令---direvtives:{ }
钩子函数：
- bind:只调用一次，指令第一次绑定到元素时调用,用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
- inserted:被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
- update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化，通过比较更新前后的绑定值，可以忽略不必要的模板更新。
- componentUpdated：被绑定元素所在模板完成一次更新周期时调用
- unbind:只调用一次，指令与元素解绑时调用
钩子函数参数：
- el:指令所绑定的元素，可以用来直接操作DOM
-
binding:一个对象，包含以下属性：
- name:指令名，不包括v-前缀
- value:指令的绑定值，例如：“v-my-directive=”1+2“,value的值是3
- oldValue:指令绑定的前一个值，仅在update和componentUpdate钩子中可用，无论值是否改变都可用
- expression:绑定值的表达式或变量名，例如：“v-my-directive=”1+2“，expression的值是"1+2"
- arg:传给指令的参数，例如：v-my-directive：foo,arg的值是"foo"
- modifiers:一个包含修饰符的对象，例如：v-my-directive.foo.bar,修饰符对象modifiers的值是{foo:true,bar:true}
- vnode:Vue编译生成的虚拟节点
- oldVnode:上一个虚拟节点，仅在update和componentUpdated钩子中可用
image.png
全局指令
- Vue.directive---全局指令
- inserted---被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>页面载入时,input元素自动获取焦点</p>
<input v-focus/>
</div>
<script>
Vue.directive('focus',{
//当绑定元素插入到DOM中
inserted:function(el){
// 输出input这个元素
console.log(el)
//聚焦元素
el.focus()
}
})
//创建根实例
new Vue({
el:'#app'
})
</script>
</body>
</html>
//输出的input元素
image.png
//页面加载时input自动获取焦点
image.png
局部指令
- directives---在根实例中注册局部指令
- 局部指令只限于该页面使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>页面载入时,input元素自动获取焦点</p>
<input v-focus/>
</div>
<script>
//创建根实例
new Vue({
el:'#app',
directives:{
// 注册一个局部的自定义指令v-focus
focus:{
//指令的定义
inserted:function(el){
el.focus()
}
}
}
})
</script>
</body>
</html>
钩子函数
不需要使用其他的钩子函数，我们可以简称函数，
//简写
Vue.diective('runboo',function(el,binding){
//设置指令的背景颜色
el.style.backgroundColor = binding.value.color
})
指令函数可接受所有合法的javaScript表达式，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<div v-runoob="{color:'red',text:'菜鸟教程'}"></div>
</div>
<script>
new Vue({
el:'#app',
directives:{
runoob:{
bind(el,binding){
//简写方式设置文本和颜色
el.innerHTML = binding.value.text,
el.style.color = binding.value.color
}
}
}
})
</script>
</body>
</html>
//效果
image.png
