vue-自定义指令

vue-自定义指令

1.简单记录一下 vue-自定义指令的使用方法

// html 部分
<div id="app">
	<h3>vue directive</h3>
	<div>
		<p>
			<input  type="text"  v-focus v-model="info"   />
		</p>
		<p v-myText="info">
			
		</p>
	</div>
</div>



//  js 部分
new Vue({
	el:'#app',
	data:{
		info:""
	},
	//局部自定义指令，写入组件对应的组件内部
	// 使用方法：  v-key     eg: v-focus    key表示 directives 对象的 key
	directives:{
		// 每个自定义指令都有以下几个钩子函数
		// bind,inserted,update,componentUpdated,unbind
		test:{
			// 每个钩子函数都接收4个参数， 
			//el=>指令绑定的元素，
			//binding=> 属性参数对象（包含元素绑定属性值，以及传入指令的参数等信息）,
			// vnode =>Vue 编译生成的虚拟节点,
			// oldVnode=>上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
			bind(el,binding){
				console.log('只会执行一次，当指令绑定到元素上时调用，一般用于初始化');
			},
			inserted(el,binding){
				console.log('指令绑定的元素，插入到父节点时调用，仅保证父节点存在，不一定插入到文档中');
			},
			update(el,binding){
				console.log('绑定的组件vnode 更新时调用（数据），可能在 子 vonde 更新之前调用');
			},
			componentUpdated(el,binding){
				console.log('绑定的组件所有 vnode(数据)更新完成之后执行，包括子vnode');
			},
			unbind(el,binding){
				console.log('只会调用一次，当指令与元素解绑时调用');
			}
		},
		focus:{ // 文本自动获取焦点
			bind(el,binding){
				el.foucus();
			}
		},
		myText:{ // 自定义模拟 v-text 指令
			update(el,binding){//在数据更新时，将绑定的内容更新至 DOM中
				el.innerHTML = binding.value;
			}
		}
	}
});

• binding 参数对象中含有如下属性：
  (1).name：指令名，不包括 v- 前缀。
  (2).value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
  (3).oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
  (4).expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。
  (5).arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 “foo”。
  (6).modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。