一 简介
自定义指令：以V-开头的，扩展了HTML的语法，通过自定义指令可以操作DOM:
栗子一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue2.2.js"></script>
</head>
<body>
// 注册一个全局的自定义指令
<div id="app">
<div v-lang="color">{{num}}</div>
<p><button @click="add">add</button></p>
</div>
</body>
<script type="text/javascript">
Vue.directive('lang',function(el,binding){ //不用加V-
console.log(el)//el指向的是当前实例绑定的对象<div v-lang="color">{{num}}</div>
console.log(binding)//输出的是一个对象obj
el.style='color:'+binding.value//binding.value就是color颜色red。
})
var vm = new Vue({
el:"#app",
data:{
num:10,
color:'red'
},
methods:{
add:function(){
this.num++;
}
}
})
</script>
</html>
栗子二：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>
//局部注册例子 <div id="app"> <p v-color="red">我是自定义指令</p> </div> <script src='vue.js'></script> <script> new Vue({ el:'#app', data:{ red:'red' }, directives: { color: { // 指令的定义 inserted: function (el,binding) { el.style.color = binding.value } } } }) </script> </body> </html>
钩子函数的参数 (即 el、binding、vnode 和 oldVnode):
el: 指令所绑定的元素，可以用来直接操作DOM。
binding: 一个对象，包含指令的很多信息。
vnode: Vue编译生成的虚拟节点。
oldVnode:上一个虚拟节点。
二 钩子函数
举栗：
Vue.directive('lang',{ bind:function () { console.log("1111"); //被绑定 }, inserted:function (el,binding) { el.style="color:"+binding.value;//绑定到节点 }, update:function () { console.log("3333");//组件更新 }, componentUpdated:function () { console.log("44444");//组件更新完成 }, unbind: function() { console.log('5555');//解绑 } });
一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
-
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 -
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 -
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 -
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。 -
unbind：只调用一次，指令与元素解绑时调用。