Vue3中的自定义指令

Posted 2021-11-06 飞鹰3995

有了前面组件、mixin的基础之后，再来了解今天小编要说的内容，就相对容易一些，今天小编和大家一起学习Vue3中的自定义指令，我们先来看看什么是Vue中的指令。

除了核心功能默认内置的指令 (例如 v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令

这是一段来自Vue3官网的一段话，用来解释什么是自定义指令，自定义指令产生的原因和实际应用
实际开发中，我们可能有这样的需求：页面中加载一个文本框，为了优化用户体验，需要在页面加载完成之后，自动获取焦点，在没有自定义指令的时候，我们会通过原生DOM这样处理这个问题

const app = Vue.createApp({
    mounted(){
        this.$refs.input.focus()
    },
    template:`<div>
            <input ref="input" />
        </div>`
})

const vm = app.mount("#root")

下面我们看看在全局注册一个自定义指令是一种什么样的体验

const app = Vue.createApp({
    template:`<div>
            <input v-focus />
        </div>`
})

app.directive(\'focus\',{
    mounted(el){
        el.focus()
    }
})
const vm = app.mount("#root")

同样，我们也可以注册一个局部的自定义指令

const directives = {
    focus: {
        mounted(el) {
            el.focus()
        }
    }
}
const app = Vue.createApp({
    directives:directives,
    template: `<div>
            <input v-focus />
        </div>`
})

const vm = app.mount("#root")

这样，我们最开始的需求是满足了，但是有的时候，我们也想像Vue其他的指令一样，在指令后面添加指定的指，然后根据这个值相应对应的样式或者其他属性。比如我们定义一个v-pos属性，然后元素的距离上边距的距离刚好是这个数字，这个时候，我们可以写成这样

const directives = {
    focus: {
        mounted(el) {
            el.focus()
        }
    }
}
const app = Vue.createApp({
    data(){
    return {
            top:400
        }
    },
    template: `<div v-pos="top" class="header">
            <input />
            <button @click="top += 20">修改高度</button>
        </div>`
})

app.directive(\'pos\',{
    mounted(el, binding){
        el.style.top = binding.value + \'px\'
    },
    updated(el, binding){
        el.style.top = binding.value + \'px\'
    }
})

const vm = app.mount("#root")

解决了一个问题，但是我们并不满足，我们希望根据自定义指令后面的属性不同，调整元素的样式，也就是希望在自定义指令后跟的是left，我们希望就是距离左边的距离，同样，后面跟的是right，就是距离右侧的距离，我们就可以这样

const directives = {
    focus: {
        mounted(el) {
            el.focus()
        }
    }
}
const app = Vue.createApp({
    data(){
        return {
            distance:400
        }
    },
    template: `<div v-pos:left="distance" class="header">
            <input />
        </div>`
})

app.directive(\'pos\',(el, binding) => {
    console.log(binding, \'binding\') // {arg: "abc",value:400}
    el.style[binding.arg] = binding.value + \'px\'
})

const vm = app.mount("#root")

大家还可以扫描二维码，关注我的微信公众号，蜗牛全栈。

 

详解Vue中的自定义指令

除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令。在Vue里，代码复用的主要形式和抽象是组件。然而，有的情况下，仍然需要对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。本文将详细介绍Vue自定义指令

指令注册
以一个input元素自动获得焦点为例，当页面加载时，使用autofocus可以让元素将获得焦点 。但是autofocus在移动版Safari上不工作。现在注册一个使元素自动获取焦点的指令站长交易

指令注册类似于组件注册，包括全局指令和局部指令两种

【全局指令】

使用Vue.diretive()来全局注册指令

【局部指令】

也可以注册局部指令，组件或Vue构造函数中接受一个 directives 的选项

然后可以在模板中任何元素上使用新的 v-focus 属性

钩子函数
指令定义函数提供了几个钩子函数（可选）

【bind】

只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作

【inserted】

被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）

【update】

所在组件的 VNode 更新时调用，但是可能发生在其孩子的 VNode 更新之前。指令的值可能发生了改变也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新

【componentUpdated】

所在组件的 VNode 及其孩子的 VNode 全部更新时调用

【unbind】

只调用一次， 指令与元素解绑时调用

钩子函数参数
钩子函数被赋予了以下参数

【el】

指令所绑定的元素，可以用来直接操作 DOM

【binding】

一个对象，包含以下属性：

【vnode】

Vue 编译生成的虚拟节点

【oldVnode】

上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用

[注意]除了 el 之外，其它参数都是只读的，尽量不要修改他们。如果需要在钩子之间共享数据，建议通过元素的 dataset 来进行

下面是一个使用了这些参数的自定义钩子样例

【函数简写】

大多数情况下，可能想在bind和update钩子上做重复动作，并且不想关心其它的钩子函数。可以这样写：

【对象字面量】

如果指令需要多个值，可以传入一个JS对象字面量。指令函数能够接受所有合法类型的JS表达式