Vue.directive自定义指令的使用详解

Vue 2018-12-31

很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法.

自定义指令基本就是用来操作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 () {
url:'src/assets/logo.png'
}

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整理-->

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。

vue2 vue2.0 vue自定义指令自定义指令

Vuex- Action的 { commit }的写法

https://segmentfault.com/a/1190000022018995 https://www....

ES6模块之export和import详解

ES6 （ECMAScript 6）中的模块是一个包含 JavaScript 代码的...

Vue知识点汇总（含Vue3）

from https://mp.weixin.qq.com/s/-rc1lYYlsfx-wR4mQmIIQQ V...