vue自定义指令

vue自定义指令——Vue.directive、bind()函数、参数binding对象的用法

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。Vue2.0 中，代码复用和抽象的主要形式是组件。

在使用自定义指令时，需要加上 v- 前缀。

自定义指令（官网）——https://cn.vuejs.org/v2/guide/custom-directive.html

自定义指令（菜鸟教程）——https://www.runoob.com/vue2/vue-custom-directive.html

directive 用法源码（注册自定义指令）——https://www.jianshu.com/p/9db

1、基本介绍

1.1、注册全局自定义指令

全局共享的自定义指令需要通过“Vue.directive()”进行声明，示例代码如下：

官网版

// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { 
    // focus 自定义指令名称 // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { 
    // 聚焦元素 el.focus() } }) 

详细版

Vue.directive('focus', { 
    // focus 自定义指令名称 bind: function(el) { 
    //表示当指令绑定到元素身上时会执行bind函数，只执行一次 //el代表被绑定指令的哪个元素，且函数中的第一个参数都为el.el是一个原生的js对象，里面有些元素的dom方法 // 绑定到元素身上时，数据尚在内存中，无法在页面中显示，所以el.focus()没有效果，而console.log('你好呀')可以显示 el.focus() console.log('你好呀') }, inserted: function(el) { 
    //表示元素插入dom中的时候回执行inserted函数，只触发一次 el.focus() }, updated: function() { 
    //当vNode更新的时候回执行updated函数，可以会触发多次 } }) 

1.2、注册局部自定义指令

官网版

// 注册一个局部自定义指令 directives: { 
    focus: { 
    // 指令的定义 inserted: function (el) { 
    el.focus() } } } 

示例

• 在声明自定义指令时，可以通过形参中的第二个参数binding，来接收指令的参数值。
• bind 函数只调用 1 次：当指令第一次绑定到元素时调用，当 DOM 更新时 bind 函数不会被触发。
• update 函数会在每次 DOM 更新时被调用。

directives: { 
    //定义私有指令 // 定义名为 color 的指令，指向一个配置对象 'color': { 
    // 当指令第一次被绑定到元素上的时候，会立即触发 bind 函数 // 形参中的 el 表示当前指令所绑定到的那个 DOM 对象  bind: function(el, binding) { 
    el.style.color = binding.value }, // 在 DOM 更新的时候，会触发 update 函数 update(el, binding) { 
    console.log('触发了 v-color 的 update 函数') el.style.color = binding.value } } } 

如果 bind和update 函数中的逻辑完全相同，则对象格式的自定义指令可以简写成函数格式：

directives: { 
    color(el, binding) { 
    el.style.color = binding.value } } 

1.3、调用方式

• 在使用自定义指令时，需要加上 v- 前缀。
• 在 template 结构中使用自定义指令时，可以通过等号（=）的方式，为当前指令动态绑定参数值。

示例代码如下：

<input type="text" v-focus v-color="'blue'"> 等价于 <h1 v-color="color">App 根组件</h1> <script> data() { return { color: 'blue' } } </script> 

2、钩子函数

作用——当使用自定义指令时触发的回调函数

2.1、函数种类

注意

一般初始化元素属性用bind，使用js的方法，应该用inserted和updated

2.2、函数参数

自定义指令参数

基本结构

// 自定义指令函数 基本写法 Vue.directive('自定义指令名称', { 
    bind(el, binding, vnode, oldVnode) { 
    console.log("此处为逻辑代码") } }) 

3、完整示例

第一步：定义自定义指令文件

src/components/common/demo.js

import Vue from 'vue'; // 注册一个全局自定义指令 `v-focus` 自定义指令函数——基本写法 Vue.directive('focus', { 
    // focus 自定义指令名称 bind(el, binding, vnode, oldVnode) { 
    // vnode, oldVnode——定义了，可以不使用 console.log("此处为逻辑代码") } }) 

第二步：在main.js中进行引入

src/main.js

// 全局使用 自定义指令 import '@/components/common/dialogDrag.js'; 

第三步：在页面中进行使用

index.vue

<input type="text" v-focus> 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10879.html