Vue自定义指令directives（函数方式，对象方式）

仰望天空的小小蜗牛

已于 2022-01-25 09:35:33 修改

阅读量5.1k

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

于 2022-01-05 21:33:03 首次发布

本文链接：https://blog.csdn.net/weixin_46724415/article/details/122153813

版权

Vue.js 专栏收录该内容

19 篇文章 2 订阅

订阅专栏

自定义指令总结：

一、定义语法：
(1).局部指令：

new Vue({															
	directives:{指令名:配置对象}   或   		
})

new Vue({
   directives{指令名:回调函数}
})

(2).全局指令：

Vue.directive(指令名,配置对象) 或 Vue.directive(指令名,回调函数)

二、配置对象中常用的3个回调：

(1).bind：指令与元素成功绑定时调用。
(2).inserted：指令所在元素被插入页面时调用。
(3).update：指令所在模板结构被重新解析时调用。

三、备注：

1.指令定义时不加v-，但使用时要加v-；
2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

<span v-text="n"></span>

directives: {
	'big-number'(element,binding){
		element.innerText = binding.value * 10
	}
}

案例一：用函数的方式自定义指令

用函数的方式自定义指令属于简写形式

需求1

定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。

在这里插入图片描述

点击按钮“点我n+1”后

在这里插入图片描述
从三个方面理解自定义指令

big函数何时会被调用？

1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
big函数第一个参数element是指令绑定的元素，第二个参数binding是一个对象含有一些有关绑定的属性

案例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>自定义指令</title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 准备好一个容器-->
		<div id="root">
			<h2>{{name}}</h2>
			<h2>当前的n值是：<span v-text="n"></span></h2>
			<h2>放大10倍后的n值是：<span v-big="n"></span></h2>
			<button @click="n++">点我n+1</button>
			<hr/>
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		new Vue({
			el:'#root',
			data:{
				name:'张三',
				n:1
			},
			directives:{
				big(element,binding){
					console.log('big',this) // 注意此处的this是window
					element.innerText = binding.value * 10
				}
			}
		})
	</script>
</html>

在这里插入图片描述
指令里面的this是window

在这里插入图片描述

指令绑定的值

自定义指令展示的值不是靠返回值，而是靠big函数所收到的参数

在这里插入图片描述

表达式

现在的表达式是"n"

在这里插入图片描述

现在的表达式是"n+1+2"

在这里插入图片描述

回顾操作DOM

先回顾dom操作的方法

检验获取到的是不是真实dom的方法：
1.console.dir() 会输出dom里面所有的方法
2.xx instanceof HTMLElement 会输出true

在这里插入图片描述
效果是input.focus不会生效，效果如下

在这里插入图片描述

input.focus会生效，效果如下

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>Document</title>
		<style>
			.demo{
				background-color: orange;
			}
		</style>
	</head>
	<body>
		<button id="btn">点我创建一个输入框</button>
		
		<script type="text/javascript" >
			const btn = document.getElementById('btn')
			btn.onclick = ()=>{
				const input = document.createElement('input')

				input.className = 'demo'
				input.value = 99
				input.onclick = ()=>{alert(1)}
				
				document.body.appendChild(input)

				input.focus()
				// input.parentElement.style.backgroundColor = 'skyblue'
				console.log(input.parentElement)
			}
		</script>
	</body>
</html>

效果

得出结果：document.body.appendChild(input)必须在input.focus()前执行，所以必须要先创建input元素后才能执行focus方法，input.className，input.value和input.onclick的操作可以在创建input元素前操作

案例二：用对象的方式自定义指令

需求2：

定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

看看使用函数写法会怎样
在这里插入图片描述
会发现如果使用函数写法，input.focus()不会有效果，原理上面操作DOM的例子有说明。
而且是自定义指令的函数写法只有这两个时候执行1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。

效果如下

此时对象写法的inserted函数就能满足操作DOM的需求，因为inserted函数是指令所在元素被插入页面时调用
完整自定义指令的写法是对象写法

	<body>
		<div id="root">
			<input type="text" v-fbind:value="n">
		</div>
	</body>
	
	<script type="text/javascript">
		Vue.config.productionTip = false
		
		new Vue({
			el:'#root',
			data:{
				name:'李四',
				n: 1
			},
			directives:{
				fbind:{
					// 指令与元素成功绑定时（一上来）
					bind(element,binding){
						element.value = binding.value
					},
					// 指令所在元素被插入页面时
					inserted(element,binding){
						element.focus()
					},
					// 指令所在的模板被重新解析时
					update(element,binding){
						element.value = binding.value
					}
				}
			}
		})
	</script>

最终效果

定义全局指令

<script type="text/javascript">
		Vue.config.productionTip = false

		Vue.directive('fbind',{
			// 指令与元素成功绑定时（一上来）
			bind(element,binding){
				element.value = binding.value
			},
			// 指令所在元素被插入页面时
			inserted(element,binding){
				element.focus()
			},
			// 指令所在的模板被重新解析时
			update(element,binding){
				element.value = binding.value
			}
		}) 
		new Vue({
			el:'#root',
			data:{
				name:'李四',
				n: 1
			}
		})
	</script>