vue自定义指令

1. 自定义指令限制字符长度

方法一

<div id="app">
	<input type="text" v-model="msg" v-limit="msg"/>
</div>
<script>
	// 第一次绑定和数据更新时都会调用
	Vue.directive("limit",function(el,bindings,vnode) {
		/*
		console.log(el);  // 指令作用的元素 <input type="text">
		console.log(bindings); // 包含所有指令相关信息的一个对象
		console.log(vnode); // 虚拟dom,是一个js对象，代表这个元素
		*/
		// bindings.expression 代表对象的值
		let ctx = vnode.context; // 作用的实例
		ctx[bindings.expression] = el.value.slice(0,5);  // 截取从下标为0开始到下标为5结束不包括5的字符
	});
	let vm = new Vue({
		el: "#app",
		data: {
			msg: "123"
		}
	});
</script>

方法一优化限制字符长度

<div id="app">
	<input type="text" v-model="msg" v-limit.3="msg"/>
</div>
<script>
	// 第一次绑定和数据更新时都会调用
	Vue.directive("limit",function(el,bindings,vnode) {
		let [,len] = bindings.rawName.split("."); // 获取v-limit.3的3
		let ctx = vnode.context; // 作用的实例
		ctx[bindings.expression] = el.value.slice(0,len);  // 截取从下标为0开始到下标为5结束不包括5的字符
	});
	let vm = new Vue({
		el: "#app",
		data: {
			msg: "123"
		}
	});
</script>

方法二

<div id="app">
	<input type="text" v-model="msg" v-limit="msg"/>
</div>
<script>
	// 
	Vue.directive("limit",｛
		// 指令第一次作用到元素时调用
		bind(el,bindings,vnode) {
			let ctx = vnode.context; // 作用的实例
			ctx[bindings.expression] = el.value.slice(0,5);  // 截取从下标为0开始到下标为5结束不包括5
		},
		// 数据发生改变时调用
		update(el,bindings,vnode) {
			let ctx = vnode.context; // 作用的实例
			ctx[bindings.expression] = el.value.slice(0,5);  // 截取从下标为0开始到下标为5结束不包括5
		}
	});
	let vm = new Vue({
		el: "#app",
		data: {
			msg: "123"
		}
	});
</script>

2. 自定义指令实现双向数据绑定

<div id="app">
	<input type="text" v-limit.3="msg"/>
</div>
<script>
	// 第一次绑定和数据更新时都会调用
	Vue.directive("limit",function(el,bindings,vnode) {
		let [,len] = bindings.rawName.split("."); // 获取v-limit.3的3
		let ctx = vnode.context; // 作用的实例
		// 输入时触发
		el.addEventListener("input", (e)=>{  // 注册input事件
			let val = e.target.value.slice(0,len); // 截取字符串
			ctx[bindings.expression] = val; // 将新值赋给msg
			el.value = val; // 同步修改视图
		});
		el.value = ctx[bindings.expression]..slice(0,len); 
	});
	let vm = new Vue({
		el: "#app",
		data: {
			msg: "123456"
		}
	});
</script>

3. 自定义自动获取焦点

<div id="app">
	<input type="text" v-model="msg" v-limit="msg" v-focus/>
</div>
<script>
	// 自动获取焦点
	Vue.directive("foucus",{
		/* 方法一：
		bind(el) {  //获取不到dom的状态
			// 延迟执行，渲染后再执行
			Vue.nextTick(()=>{
				el.focus();
			});
		}
		*/
		// 方法二：dom渲染完后执行
		inserted(el) {
			el.focus();
		}
	});
	Vue.directive("limit",｛
		// 指令第一次作用到元素时调用
		bind(el,bindings,vnode) {
			let ctx = vnode.context; // 作用的实例
			ctx[bindings.expression] = el.value.slice(0,5);  // 截取从下标为0开始到下标为5结束不包括5
		},
		// 数据发生改变时调用
		update(el,bindings,vnode) {
			let ctx = vnode.context; // 作用的实例
			ctx[bindings.expression] = el.value.slice(0,5);  // 截取从下标为0开始到下标为5结束不包括5
		}
	});
	let vm = new Vue({
		el: "#app",
		data: {
			msg: "123"
		}
	});
</script>