vue创建一个自定义指令

最新推荐文章于 2025-01-12 19:26:08 发布

YmwWow

最新推荐文章于 2025-01-12 19:26:08 发布

阅读量1.1k

点赞数 1

分类专栏： Vue.js

本文链接：https://blog.youkuaiyun.com/YmwWow/article/details/89365232

版权

Vue.js 专栏收录该内容

4 篇文章

订阅专栏

1、全局API的意思就是在构造器外边的接口，就是自定义一个新的功能。

什么是构造器呢？vue.js是一个构造函数，因此在这里称之为构造器，每一个new Vue都是他的实例

2、Vue.directive自定义指令定义新的功能

像那些v-on、v-bind、v-if/else那些都是vue的内部指令。这里介绍的是自定义的指令。

我们定义一个指令，让他的功能是改变颜色,代码如下。这里介绍一下他们

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue的全局API</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	
	<div id="app">
		<div v-newone="color" class = "numclass">{{num}}</div>
		
	</div>

	<script>
		Vue.directive("newone",function(el,binding){
			console.log(el);
			console.log(binding);
			el.style = "color:"+binding.value;
		});

		var app = new Vue({
			el:'#app',
			data:{
				num:10,
				color:'green'
			},
			
		})
	</script>
</body>
</html>

Vue.directive("newone",function(el,binding){
	console.log(el);
	console.log(binding);
	el.style = "color:"+binding.value;
});

这一些代码的意思就是，新建一个新的指令"newone",注意这里是不需要加“v-”的，使用这个指令时就要加上“v-”,这里有两个参数，第一个“el”就是使用该指令的元素，这里表示的就是 “class = "numclass" ”的div；第二个参数我们打印出来的结果如下

说明这个参数的意思是他这个指令的对象，包括name,rawname,vlaue等，我们通过在div中使用这个指令并赋值一个变量color，如下，这样就成功使用了自己自定义的指令

<div v-newone="color" class = "numclass">{{num}}</div>

<script>
	Vue.directive("newone",function(el,binding){
		console.log(el);
		console.log(binding);
		el.style = "color:"+binding.value;
	});

	var app = new Vue({
		el:'#app',
		data:{
			num:10,
			color:'green'
		},
		methods:{
			add:function(){
			    this.num++;
			},
		}
	})
</script>