前言

首先我们知道vue中有很多内置指令,比如说 v-text,v-bind, v-if,v-for等等,但是怎样定义一个自定义的指令呢?

什么是自定义指令,我们知道 v-if 指令是用于条件性地渲染一块内容,那此时我想定义一个指令,让某个数变大10倍,我把这个指令叫叫做v-big,v-big=“n”, 当n等于1的时候页面显示10,当n等于2的时候页面显示20,我们怎么用指令做到呢?


注意: 自定义指令是要我们对普通 DOM 元素进行底层操作的。



1、简单的自定义指令示例(自定义指令是个函数)

需求:定义v-big指令,和v-text功能类似,但会把绑定的值放大10倍;

定义新指令,用 directives 配置项:

在这里插入图片描述

运行结果:

在这里插入图片描述


我们可以看出,当自定义指令是个函数时,接受两个参数,第一个参数是绑定当前指令的真实DOM元素,第二个参数是个对象,表示当前指令的详细信息。

2、较为复杂的自定义指令(自定义指令是个对象)

需求:定义一个 v-fbind 指令,和 v-bind 功能类似,但可以让其绑定的input框自动获取焦点。
(不要给input加 autofocus 属性,我们要自己实现)

踩坑注意

<input v-fbind:value="n" />

// 定义指令
directives: {
   fbind(el, obj) {
     el.value = obj.value;
     el.focus();
   },
 },

理论上我们上述写法是没有问题的,但是运行却发现input框却没有自动获取焦点,这是为什么呢?

因为fbind指令在两种情况下会被调用:

  1. 第一是在指令与元素成功绑定时(一上来);
  2. 第二是指令所在的模版被重新解析时;

vue做事分好几步,我们写的代码要经过vue的编译和解析,当指令与元素成功绑定时只是意味着两者在内存里面建立了关系,但此时input这个dom元素还没有被放入到页面中,这个时候调用 el.foucus() 当然是不奏效的。所以我们应该在vue把input元素放入页面以后再去调用focus函数才可以。

我们把fbind指令写成一个对象:

在这里插入图片描述
当指令是个对象时,里面有三个函数,分别在不同的时机会被自动调用执行,函数名字不可更改。
当指令写成函数时,相当于写了bind函数和update函数。



3、全局自定义指令

上面所说的都是在组件里定义自定义指令,当我们想全局使用时:

Vue.directive('fbind', {
    bind: function(el, obj) {
       ....
    },
})
Logo

前往低代码交流专区

更多推荐