vue的自定义指令

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

ZHANG.......

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

阅读量896

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/zyf971020/article/details/127093397

版权

本文深入探讨了Vue自定义指令的用途，包括补充数据驱动无法覆盖的DOM操作和集成第三方插件。通过实例展示了如何实现图片加载占位和代码高亮的自定义指令。同时，详细介绍了Vue自定义指令的构成，包括指令名称、参数、修饰符和表达式，并阐述了全局和局部注册指令的方法及各个生命周期钩子函数的使用。

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

一、自定义指令的作用

自定义指令是用来操作DOM的，尽管vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和拓展，不仅仅可用于定义任何DOM操作，并且是可以复用的。

比如谷歌图片的加载做得非常优雅，在图片未完成加载前，用随机的背景色占位，背景图片加载完成后才直接渲染出来。用自定义指令可以非常方便的实现这个功能。

//Vue.directive(指令名，指令要做的操作)
Vue.directive("img",{
  inserted: function(el,binding){
    var color = Math.floor(Math.random()*1000);
    el.style.backgroundColor = "#" + color;
    var img = binding.value; //获取传给指令的值
    img.onload = function(){
      el.style.backgroundImage = 'url('+ binding.value +')';
    }
  }
})

自定义指令的第二用处是用于集成第三方插件。在前端开发领域，以前的通用框架是jQuery，jQuery以及基于jQuery的通用组件形成了一个庞大的生产系统。现在的通用框架是vue等，每个框架都需要基于自身构建新的组件库。自定义指令好就好在：原先的那些通用的组件，无论是纯js的也好，基于jQuery的也好，都可以直接拿来吸收，不需要改造或重构。比如写文档通常会用到的highlight.js，我们可以直接将其封装为一个自定义指令：

var hljs = require('highlight.js');
Vue.directive('highlight', function(el){
  hljs.highlightBlock(el);
})

二、vue自定义指令的构成

vue自定义指令包括4部分：指令名称、参数、修饰符、表达式

v-dire:arg.e = "expression"

指令名称：参数.修饰符 = “表达式”

三、自定义指令的注册

自定义指令有全局注册指令、局部注册指令。全局注册指令又分函数注册形式、对象注册形式。

全局注册指令，使用Vue的directive函数实现:

//函数注册示例：
Vue.directive('dire',function(el,bindings,vnode){
  console.log("自定义指令")
})

参数说明：
dire 指令名称
el 当前绑定的dom元素
bindings 指令解析后的结果，包括指令名称、参数、表达式等，bindings.value返回的是表达式
vnode 对应的虚拟dom


//对象注册形式示例：
Vue.directive('dire',{
  bind: function(el,bindings,vnode){
    console.log("bind--最先执行的钩子函数")
  }
  inserted: function(el,bindings,vnode){
    console.log("inserted--在bind后面执行")
  }
  update: function(el,bindings,vnode){
    console.log("update--绑定组件更新前触发执行")
  }
  componentUpdated: function(el,bindings,vnode){
    console.log("componentUpdated--绑定组件更新后触发执行")
  }
  unbind: function(el,bindings,vnode){
    console.log("componentUpdated--组件销毁前触发执行")
  }
})


//局部注册指令示例
var vm = new Vue({
  el: '#app',
  data: {
    x: 0
  },
  directives: {
    dire:{
      bind:function(el,bindings,vnode){

             console.log("bind--最先执行的钩子函数");

            },

      inserted:function(el,bindings,vnode){

                 console.log("inserted--在bind后面执行");

            },

      update:function(el,bindings,vnode){

               console.log("update--绑定组件更新前触发执行");

            },

      componentUpdated:function(el,bindings,vnode){

                         console.log("componentUpdated--绑定组件更新后触发执行");

            },

      unbind:function(el,bindings,vnode){

               console.log("componentUpdated--组件销毁前触发执行");

      }
    }
  }
})