Vue系统学习之自定义指令、bower

最新推荐文章于 2024-03-17 09:44:27 发布

赵丰登

最新推荐文章于 2024-03-17 09:44:27 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue

本文链接：https://blog.youkuaiyun.com/zhaofengdeng/article/details/94186711

Vue 专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨Vue.js中自定义指令的使用方法与实践案例，包括指令的基本语法、bind与update钩子函数的作用，以及如何通过自定义指令实现元素的动态操作与交互，如颜色改变与拖动效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

bower与node npm

bower 与node npm 都是包管理器，都要required才能用
bower前端包管理器，npm里面的一种

自定义指令

自定义指令，可以在指令方法中对该标签做任何操作
使用场景：比如一些div可以随便移动，移动分点击，移动，松开，可以封装一个移动指令，设置了该指令可以完成一系列操作

简单说明

<div v-leo>吃见识到了焚枯食淡</div>

Vue.directive('leo',funciton(){
	this.el.style.color="red";
	this.el.onclick=function(){
		console.log("点击了");
	}
	document.onmousemove = function(e){
				var ev = e || event;
				this.style.left = ev.clientX - l + 'px';
				this.style.top = ev.clientY - t + 'px';

	}.bind(this)
})

正规说明

1.如果自定义的名字是abcDe，指令为v-abc-de,vue指令没有大写

2.有bind,update方法

3.支持参数

<div v-自定义的名字></div>
1=============
Vue.directive('自定义的名字',function(){
	
})
2=============
Vue.directive('自定义的名字',{
	bind(){
	初始化
	},
	update(){
	数据改变了 就走一遍update
	}
})
3=============

Vue.directive('自定义的名字',function(val){
	val来源于v-model的属性值
})