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:只调用一次,指令与元素解绑时调用。

每个钩子函数都有几个参数可用,它们的含义如下:
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钩子中可用。
结合以上参数,如下实例:

渲染结果:

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上用

你可能感兴趣的:(Vue.js实战)