Vue自定义指令

最新推荐文章于 2024-06-16 13:00:26 发布

hst_gogogo

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量250

点赞数

分类专栏： vue 文章标签： vue 自定义指令

本文链接：https://blog.csdn.net/hst_gogogo/article/details/94457908

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

首先需要注意的是不管是自定义局部属性还是全局属性，中间的字母都不要大写（首字母可以），否则会报错

具体内容如有需要请看另一篇文章：https://blog.csdn.net/hst_gogogo/article/details/94456377

一、自定义全局指令

自定义全局指令需在Vue.directive()中注册，需要接受两个参数，分别为'指令名称'以及钩子函数（4个：bind、inserted、update、unbind，链接作用域与DOM，用于创建可以操作DOM的指令），具体用法见如下代码及注释：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#zz{
				width: 200px;
				height: 200px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		
		<div id="box">
			<!--第二步：使用指令，方式一：这里的blue是实参，obj.arg的值即为blue-->
			<p v-color:blue>蓝色文字</p>
			<p v-color:yellow>黄色文字</p>
			<p v-color:pink>粉色文字</p>
			<p v-color:lime>绿色文字</p>
			<p v-color:orange>橙色文字</p>
			<!--Property or method "purple" is not defined on the instance but referenced during render-->
			<!--方式二：purple看作一个变量，没有定义，需要在data中定义，然后obj.value的值为purple-->
			<p v-color='purple'>紫色文字</p>
			
			<button @click="showOrHide()">点击显示或隐藏正方形</button>
			<!--<div id="zz" v-if="{{ifExists}}"></div>-->
			<div id="zz" v-if='ifExists'></div>
			
		</div>
		
		<script src="../0701LessCouse/js/vue.js"></script>
		<script>
//			第一步：定义指令: Vue.directive('指令名',{钩子函数(4个,均可选)})
			Vue.directive('color',{
				bind:function(el,obj){
					//指令绑定到标签上
					console.log('绑定成功。。。')
				},
				inserted(el,obj){
					//标签插入到页面中，在此处书写自己的代码
					// el当前标签 ，，obj.arg参数，可以取其他名字
					console.log(el,obj);
					if(obj.arg){
						el.style.color = obj.arg;						
					}else{
						el.style.color = obj.value;	
					}
				},
				update(el,obj){
					//	数据更新
					console.log('数据更新喽。。。')
				},
				unbind(el,obj){
                   
					console.log('解除绑定啦~~~')
				}
				
			});
			
			//	要实例化Vue对象
			new Vue({
				el:'#box',
				data:{
					purple:'purple',
					ifExists:true
				},
				methods:{
					showOrHide(){
//						this.ifExists = !this.ifExists;
						this.ifExists = false;
					}
				}
			})
			
			
		</script>
	</body>
</html>

全局的自定义指令可以在多个过载了Vue实例的DOM对象中使用。

二、自定义局部指定

自定义局部指令定义在directives中，用法和全局指令一样，只不过只能在通过el:'#app'获取的挂载元素内部使用：如下例中的自定义指令就只能在id为box这个div内部的元素中使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			div{
				width: 200px;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<p v-color:red>红色文字</p>
			<p v-color:pink>粉色文字</p>
			<p v-color:lime>绿色文字</p>
			<div v-Obgcolors:pink></div>
		</div>
		
		<script src="../0701LessCouse/js/vue.js"></script>
		<script type="text/javascript">
			new Vue({
				el:'#box',
				directives:{
					color:{
						inserted(el,obj){
							el.style.color = obj.arg;
						}
					},
					Obgcolors:{
						inserted(el,obj){
							console.log(el,obj);
							if(obj.arg){
								el.style.background = obj.arg;
							}else{								
								el.style.background = obj.value;
							}
						}
					}
					
				}

			})
		</script>
	</body>
</html>

hst_gogogo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue自定义指令

首先需要注意的是不管是自定义局部属性还是全局属性，中间的字母都不要大写（首字母可以），否则会报错具体内容如有需要请看另一篇文章：https://blog.csdn.net/hst_gogogo/article/details/94456377一、自定义全局指令自定义全局指令需在Vue.directive()中注册，需要接受两个参数，分别为'指令名称'以及钩子函数（4个：bind、i...
复制链接

扫一扫

专栏目录