Vue自定义指令

最新推荐文章于 2024-04-29 08:34:21 发布

原创最新推荐文章于 2024-04-29 08:34:21 发布 · 250 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue笔记

Vue 专栏收录该内容

3 篇文章

订阅专栏

本文围绕Vue自定义指令展开，介绍了自定义全局指令，强调调用时以v-开头。阐述了bind、inserted、updated等钩子函数及其执行时机，还说明了钩子函数的参数。此外，提及了自定义私有指令和指令函数的简写形式。

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

自定义全局指令

注意：在Vue中，所有的指令在调用的时候，都以 v- 开头

自定义全局指令，Vue.directive("指令的名称", 对象）
和定义过滤器一样：全局的是不用加s的，私有的是要加s的

第一个参数是 指令的名称，注意，在定义的时候 指令的名称前面 不需要加 v- 前缀
但是，在调用的时候，必须在 指令的名称前面加上 v- 前缀进行调用

第二个参数是一个对象，这个对象身上有一些与指令相关的函数（钩子函数），这些函数在特定的阶段 执行相关的操作
比较重要的三个钩子函数：bind，inserted，updated

钩子函数

bind：每当指令绑定到元素上的时候，会立即执行bind函数，只执行一次
inserted：inserted函数在元素插入到DOM中的时候调用，只执行一次
updated：当VNode更新的时候会调用updated函数，可能执行多次

钩子函数的参数

所有的钩子函数都一样，函数的第一个参数固定是el，表示被绑定了指令的这个元素，这个el参数是一个原生的JS对象
第二个参数是binding对象，binding对象比较重要的三个属性是：name（指令的名字，不带v-前缀），value（指令计算后的结果），expression（字符串形式的指令表达式）

自定义私有指令

new Vue({
    el: '#app',
    data: {},
    methods: {},
    filter: {},
    directives: {
        //自定义一个私有指令， 指令由  指令的名字 和 一个对象组成（对象的属性是一些钩子函数）
        fontweight: {
            bind: function (el, binding) {
                el.style.fontWeight = binding.value;
            }
        }
    }
});

指令函数的简写形式

由于多数情况下我们可能都只是在bind和updated钩子函数上写重复的代码，并不关心其他的钩子函数，所以可以使用简写形式

//指令函数的简写形式
// ===========>本来应该是： 指令名字：对象（然后在对象里面写钩子函数）；
// ===========>简写是：指令名字： 函数 (表示的是在bind和updated钩子函数中写了相同的代码，不关心其他的钩子函数)
fontsize: function (el, binding) {
    el.style.fontSize = parseInt(binding.value) + "px"; 
}