Vue 自定义指令 directive

Posted 哈娄

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 自定义指令 directive相关的知识,希望对你有一定的参考价值。

指令的钩子函数

  • bind:只调用一次,指令在第一次绑定到元素时调用。这里可以进行一次性的初始化设置
  • inserted:被绑定元素插入父节点时调用(仅保证父节点存在,但不一定已被插入文档中)
  • update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
  • componentUpdated: 组件在组件的VNode和子组件的VNode全部更新后调用
  • unbind:只调用一次,指令与元素解绑时调用

钩子函数的参数

  • el: 指令所绑定的元素,可以用来直接操作 DOM,就是放置指令的那个元素。

  • binding: 一个对象,里面包含了几个属性,这里不多展开说明,官方文档上都有很详细的描述。

  • vnode:Vue 编译生成的虚拟节点。

  • oldVnode:上一个虚拟节点,仅在 update 和 componentUpdated 钩子中可用。

代码

需求:按钮点击,实现不同的跳转方式

1.新建 directive.js

// 全局注册自定义指令
import Vue from "vue";
Vue.directive('hrefLink', 
    inserted(el, binding, vNode) 
        // 通过binding.value获取参数
        const url = binding.value.url || ''
        const openType = binding.value.openType || 1
        // 节点绑定点击事件,进行处理业务
        el.onclick = function() 
          if (openType == 1) 
            window.location.href = url
           else if (openType == 2) 
            window.open(url)
           else 
            return
          
        
      
)

2.在main.js中引入

import '**/directives.js'; 

3.组件内使用

<div v-hrefLink=" url: `xx/xx`, openType: 2 ">点击跳转喽</div>

以上是关于Vue 自定义指令 directive的主要内容,如果未能解决你的问题,请参考以下文章

vue自定义指令

Vue2.0 - 自定义指令 vue-directive

vue.js实现内部自定义指令和全局自定义指令------directive

vue--钩子函数1

探索vue自定义指令的玄妙

探索vue自定义指令的玄妙