Vue.directive自定义指令的使用详解
发布时间：2020-12-17 03:02:23 所属栏目：百科 来源：网络整理
导读：很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: 我可以拖拽 JS: 触发的DOM元
|
很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽HTML: 我可以拖拽
JS: 触发的DOM元素
oDiv.onmousedown=function(e){
let l=e.clientX-oDiv.offsetLeft;
let t=e.clientY-oDiv.offsetTop;
document.onmousemove=function(e){
oDiv.style.left=e.clientX-l+'px';
oDiv.style.top=e.clientY-t+'px';
};
oDiv.onmouseup=function(){
document.onmousemove=null;
oDiv.onmouseup=null;
}
}
})
自定义指令还可以引入第三方插件,之前都是用JQuery来构建项目. 自定义指令的好处就是不管之前是用什么写的JQuery还好或是原生js也好都可以直接拿来封装成自定义指令,不需要重写 例如这个拖拽: Drag.js: Vue: HTML: 我可以拖拽
2. 图片加载图片在加载过程中,未加载完成时,使用一个随机的颜色占位,图片加载完后直接显示,可以使用自定义指令来完成 HTML: //参数不可以直接填写url地址
data () { Vue: var img=new Image();
img.src=binding.value;// -->binding.value指的是指令后的参数
img.onload=function(){
el.style.backgroundColor='';
el.src=binding.value;
}
}) 可以使用lodash.js工具库 vue更多的API整理--> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |