Vue简单示例——自定义指令

最新推荐文章于 2025-04-14 10:21:35 发布

Error_exception_worn

最新推荐文章于 2025-04-14 10:21:35 发布

阅读量563

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/hssjsh/article/details/127530700

自定义指令是用来操作DOM对象的，在Vue中并不是所有的情况都可以使用修改数据的方式实现，所以自定义指令就是用来补全这一部分的不足

全局自定义指令：

自定义指令使用一个新的节点作为创建指令的入口：direction

其中有两个比较常用的方法：bind方法和update方法

bind方法表示当自定义指令第一个被挂在成功的时候就执行的方法，这个方法只会被执行一次

update方法表示当DOM发生改变的时候，自定义指令也会随之发生改变，这个方法在动态的修改自定义指令的值的时候将会动态的修改指令的内容

内部有两个参数：el和binding，el参数放在第一个位置，表示自定义指令绑定的DOM对象，用来调用修改DOM的属性值的，第二个参数binding表示参数，当我们给自定义组件传递一些参数的时候，就会将参数以对象的形式存放在binding内，这两个形参的名字是可以自己定义的，但是我们一般就会写成这两个单词。

// 定义一个全局自定义指令
			Vue.directive('red',{
				// bind方法表示当指令第一次被绑定在DOM上的时候，也就是组件第一次被使用的时候
				bind(el,binding){
					el.style.color=binding.value
				},
				// updata方法表示当DOM元素更新的时候指令的内容也随之更新，如果没有这个方法，则点击更改颜色的方法并不会出现相应的效果
				update(el,binding){
					el.style.color=binding.value
				}
			})

使用全局自定义指令：

<div id="app">
			<!-- 全局自定义指令的使用部分 -->
			<p v-red = color>你好世界</p>
		</div>

注意点：

在创建全局自定义指令的时候，指令的名字是不加v-的，只有在使用的时候才加上v-

定义局部自定义指令：

定义局部自定义指令的方法和全局自定义指令的方法是一样的，只是一个放在了Vue实例外部，一个在内部。

定义一个名为“color”的局部自定义指令：

// 创建一个Vue实例
			new Vue({
				el:'#app',
				// 定义一个局部自定义指令
				directives:{
					// 这个color表示自定义局部指令的名字
					color:{
						// bind方法和全局自定义指令的含义是一样的
						bind(el,binding){
							// 第一个el表示指令挂载的对象，也就是你在什么标签上使用的自定义指令
							// 第二个binding表示给指令传递的参数，其实binding内部存放是一系列关于指令的属性值，而value属性才是传入的具体的值
							el.style.color=binding.expression
							// 在不确定形参的内部具体含义的情况下可以打印在控制台进行查看
							console.log(binding)
						}
					}
				},
			})
		</script>

使用自定义局部指令：

<!-- 局部自定义指令的使用部分 -->
			<p v-color = "red">局部自定义指令的运用</p>

注意点：

在使用局部自定义指令的时候，要注意这个时候的花括号内部只需要写指令的逻辑处理语句即可

简单案例：使用自定义指令给p标签一个颜色，并通过动态绑定自定义指令的值的方式动态的修改标签的颜色

代码实现：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试自定义指令</title>
		<script src="vue.js""></script>
	</head>
	<body>
		<div id="app">
			<p v-red = color>你好世界</p>
			<!-- 点击改变颜色的自定义指令部分 -->
			<button @click="changecolor">改变颜色</button>
		</div>
		
		<script>
			// 定义一个全局自定义指令
			Vue.directive('red',{
				// bind方法表示当指令第一次被绑定在DOM上的时候，也就是组件第一次被使用的时候
				bind(el,binding){
					el.style.color=binding.value
				},
				// updata方法表示当DOM元素更新的时候指令的内容也随之更新，如果没有这个方法，则点击更改颜色的方法并不会出现相应的效果
				update(el,binding){
					el.style.color=binding.value
				}
			})
			// 创建一个Vue实例
			new Vue({
				el:'#app',
				data(){
					return {
						// 这个变量就是传递给全局自定义指令的变量，改变自定义组件的颜色也是通过方法修改这个值确定的
						color:'red'
					}
				},
				methods:{
					// 这个方法的作用是修改自定义组件的值，具体表现就是修改了字体的颜色
					changecolor(){
						this.color = "blue"
						// 一个关于this的小技巧，如果实在不知道这个this表示的是谁，就打印出来看一下内部包含的数据
						console.log(this)
					}
				}
			})
		</script>
	</body>
</html>