Vue.js实战第八章笔记

8.1基本用法
注册一个v-focus的指令
注册组件：
①全局注册

Vue.directive('focus',{
//选项
})

②局部注册

var app = new Vue({
	el:'#app'，
		directives:{
		focus:{
			//指令选项
		}
	}
})

写法与组件基本类似，只有方法名有component改为directive。上例只是注册了自定义指令v-focus，还没有实现具体功能，下面具体介绍自定义指令的各个选项。

· bind：只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。
· inserted：被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于document中）。
· update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新。
· componentUpdated：被绑定元素所在模板完成一次更新周期时调用。
· unbind：只调用一次，指令与元素解绑时调用。

<div id="app">
	<input type="text" v-focus>
</div>
<script>
	Vue.directive('focus',{
		inserted:function(el){//希望在元素插入父节点时调用，用Inserted
			el.foucs()
		}
})
var app = new Vue({
	el:'#app'，
})
</script>

每个钩子函数都有几个参数可用，它们的含义如下：
el：指令所绑定的元素，可以用来直接操作DOM；
binding：一个对象，包含以下属性：
（1）name:指令名，v-前缀；
（2）value:指令的绑定值；
（3）oldValue:指令绑定的前一个值，仅在update和componentUpdated钩子中可用，无论值是否改变都可用；
（4）expression:绑定值的字符串形式。 arg：传给指令的参数；
（5）modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar，修饰符对象modifiers的值是{foo:true,bar:true};
vnode:Vue编译生成的虚拟节点；
oldVnode:上一个虚拟节点仅在update和componentUpdated钩子中可用。
结合以上参数，如下实例：

<div id="app">
    <div v-test:msg.a.b="message"></div>
</div>
<script>
    Vue.directive('test',{
        bind:function (el,binding,vnode) {
            var keys = [];
            for(var i in vnode){
                keys.push(i);
            }
            el.innerHTML = 
                'name:' + binding.name + '<br>' + 
                'value:' + binding.value + '<br>' + 
                'expression:' + binding.expression + '<br>' + 
                'argument:' + binding.arg + '<br>' + 
                'modifiers:' + JSON.stringify(binding.modifiers) + '<br>' + 
                'vndode keys:' + keys.join(',')
        }
    });
    var app = new Vue({
        el: '#app',
        data:{
            message: 'some text'
        }
    })
</script>

渲染结果：

name:test
value:some text
expression:message
argument:msg
modifiers:{"a":true,"b":true}
vnode keys:tag,data,children,text,elm,ns,context,functionalContext,key,componentOptions,componentInstance,parent,raw,isStatic,isRootInsert,isComment,isCloned,isOnce

在大多数使用场景，我们会在bind钩子里绑定一些事件，比如在document上用