Vue学习第六周，自定义指令与Render函数

自定义指令

基本用法

//全局注册
Vue.directive('指令名', {
	//指令属性
})

//局部注册
var app = new Vue({
	el: '#app',
	directives:{
		'指令名':{
			//指令属性
		}
	}
});

自定义指令的属性有5个钩子函数组成，每个函数都是可选的。

• bind 指令第一次绑定到元素时调用，定义初始化动作
• inserted 被绑定元素插入到父节点时调用
• update 被绑定元素更新时调用，不论绑定值是否改变
• componentUpdated 被绑定元素所在模板完成一个更新周期时调用
• unbind 只调用一次，指令与元素解除绑定时调用

<input type="text" v-test>

Vue.directive('test', {
	bind:function(el){
		el.focus();
	}
})

每个钩子函数都有多个可选参数

• el 绑定的dom元素
• binding 对象，拥有以下属性
• name 指令名称，不包含v-前缀
• value 指令的绑定值。如果自定义标签的写法是 v-test = “1+1”，那么value就为2
• oldValue 指令绑定的前一个值，只在update或者* componentUpdated钩子函数中可以使用
• expression 绑定值的字符串形式，v-test = “1+1"这个表达式的字符串就是"1+1”
• arg 传给指令的参数 v-test=myData，arg的值就是myData
• modifiers 包含修饰符的对象。v-test=myData.value那么modifiers的值就是{myData:true,value:true}
• vnode Vue编译生成的虚拟节点
• oldVnode 上一个虚拟节点只在update或componentUpdated钩子函数中可以使用

Render函数

Vue2与Vue1最大的区别是Vue2使用虚拟节点更新DOM，提示渲染性能。
Vue中的虚拟节点是一个js对象

var vNode = {
	tag:'div',//当前节点标签类型
	attributes:{
		id:'main'
	},
	children:{
		//子节点
	}
}

Render函数通过createElement参数创建virtualDom，从而简化组件的写法。适用于组件中有大量代码是重复的场景，使用Render函数在其中通过书写js方法生成virtualDom。

render:function(createElement){
	return createElement(
	'h' +this.level,//搭配level生成h标签
	[
		createElement(	//创建子节点
			'a',//生成a标签
			{
				domProps:{
					href:'#' + this.title//定义属性，href超链接到title对应的网址
				}
			},
			this.$slots.default
		)
	])
}

createElement的用法

参数
createElement有三个参数，第一个参数为html标签或者组件或者函数，这个参数是必选参数。第二个参数可选，对应属性中的数据对象。第三个参数也是可选参数，对应子节点，子节点也是用createElement方法构建。

createElement(
	'div',	//String | Object | Function
	{},		//Object
	[		//String|Array
		createElement('h1')
	]
)

第二个参数的可以定义属性类型：

class:{	//类名 参考v-bind:class
	className:true
},
style:{	//样式，参考v-bind:style
	color:'red'
},
attr:{	//html属性
	id:'test'
},
props:{	//组件的props
	myData: 'message'
},
domProps:{//Dom属性
	innerHtml:'baz'
},
on:{//自定义事件监听器，但是不支持修饰器，需要手动配置
	click: this.clickHandler
},
nativeOn:{//监听原生事件
	click: this.nativeClickHandler
},
directives:[//自定义指令
	{
		name:'myDIrective',
		value:2,
		expression:' 1+1',
		arg:'foo',
		modifiers:{
			bar:true
		}
	}
],
scopedSlots:{	//作用域{ name:props => VNode|Array<VNode>}
default: props => h('span',props.text)
},
slot:'name-of-slot',	//子组件定义的slot名称
//下面是其他特殊顶层属性
key:'myKey',
ref:'myRef'

Render的写法比较复杂且可读性差，一般都用template来实现，只有特殊的场景才使用Render函数。

在组件树中，VNode如果是组件或者含有组件的slot，那么VNode必须唯一。