Vue自定义指令:通过Vue.directive实现集成第三方插

来源:http://www.chinese-glasses.com 作者:Web前端 人气:133 发布时间:2020-04-07
摘要:directives: { gopage: { bind: (el, binding, vnode) = { // el 获取对应的作用元素的dom // vnode vue编译生成的虚拟节点 vnode.context 就是Vue对象也就是我们使用的this el.onclick = () = { vode.context.$router.path({
directives: { gopage: { bind: (el, binding, vnode) = { // el 获取对应的作用元素的dom // vnode vue编译生成的虚拟节点 vnode.context 就是Vue对象也就是我们使用的this el.onclick = () = { vode.context.$router.path({ name: 'page' }) // 跳转到对应的页面 } } }}

时间: 2017-12-25阅读: 3736标签: 拖拽什么时候需要Vue自定义指令?

实例: 使用自定义指令跳转页面

precode v-highligh/code/pre

inserted函数: 被绑定元素呗插入父节点是调用(仅保证父节点存在,但不一定已被插入文档中)bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

注意:除了el之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。

在项目中最好是将该指令单独写在一个文件中,在使用的地方直接引用。

如何注册自定义指令?

divv-focus/div

html:

时间: 2019-10-12阅读: 138标签: 自定义

script src=""/scriptscript Vue.directive('img',function(el,binding){//函数简写,在 bind 和 update时触发相同行为,而不关心其它的钩子。 var color=Math.floor(Math.random()*1000000);//设置随机颜色 el.style.backgroundColor='#'+color; var img=new Image(); img.src=binding.value;// --binding.value指的是指令后的参数 img.onload=function(){ el.style.backgroundColor='';el.src=binding.value; }});var vm = new Vue({el: '#box',data: {urlimg: '/20171225/5a40612fcc533.jpg'}});/script
Vue.directive('focus', { inserted: function () { el.focus() }})

自定义指令的另一个好处是用于集成第三方js插件,这样插件就可以直接拿来使用,而不需要改造或重构。这里已highlight.js为例,我们可以直接将其封装为一个自定义指令,这样highlight.js就变成了Vue的一个新功能。

全局的自定义指令

js:

在dom 中使用v-focus 使用这个自定义指令

html:

局部的自定义指令

export default{ directives:{ '指令名称':'指令配置' }, }
directives: { focus: { inserted: function (el) { el.focus() } }}

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

1.全局注册,需要注意的是全局注册自定义指令需在实例化Vue之前:

10bet,js:

scriptvar hljs=require("highligh.js")Vue.directive('highligh',function(el){hljs.highlightBlock(el);}, });/script

当我们需要对Dom元素进行底层操作的时候,这时候我们就需要使用vue的自定义指令。

vue自定义指令例子:1.实现拖拽功能

name:指令名,不包括 v- 前缀。 value:指令的绑定值,例如:v-my-directive="1 + 1" 中,绑定值为 2。oldValue:指令绑定的前一个值,仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression:字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中,表达式为 "1 + 1"。 arg:传给指令的参数,可选。例如 v-my-directive:foo 中,参数为 "foo"。modifiers:一个包含修饰符的对象。例如:v-my-directive.foo.bar 中,修饰符对象为 { foo: true, bar: true }。 vnode:Vue 编译生成的虚拟节点。移步 VNode API 来了解更多详情。oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

script src=""/scriptscript/* vue-自定义指令-拖拽 */Vue.directive('drag',{inserted:function(el) { //钩子函数-//当被绑定的元素插入到 DOM 中时……let elem = el; //el触发的DOM元素elem.onmousedown = function(e) {let l = e.clientX - elem.offsetLeft;let t = e.clientY - elem.offsetTop;document.onmousemove = function(e) {elem.style.left = e.clientX - l + 'px';elem.style.top = e.clientY - t + 'px';};elem.onmouseup = function() {document.onmousemove = null;elem.onmouseup = null;}}},});var vm = new Vue({el: '#box',data: {name: 'drag'}});/script

本文由10bet发布于Web前端,转载请注明出处:Vue自定义指令:通过Vue.directive实现集成第三方插

关键词:

上一篇:React 入门

下一篇:Canvas API的介绍

频道精选

最火资讯