Vue指令——自定义指令及应用

最新推荐文章于 2024-07-05 15:51:38 发布

catfishlyf

最新推荐文章于 2024-07-05 15:51:38 发布

阅读量657

点赞数

分类专栏：语法基础文章标签： vue

本文链接：https://blog.csdn.net/catfishlyf/article/details/108731175

版权

本文详细介绍了Vue自定义指令的定义与使用，包括如何定义、何时使用各种钩子函数，如`bind`和`inserted`，并讨论了在不同场景下选择哪个钩子的考量因素。同时，讲解了自定义指令的私有化和引入方式，最后探讨了自定义指令在按钮权限控制等实际应用场景。

摘要由CSDN通过智能技术生成

一、官方案例引入

背景：当页面加载时，该元素将获得焦点。

<input type="text" v-focus>

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

【全局指令】
Vue.directive(指令名称，函数对象)
                 ↓
名称本身不需要"v-"修饰，只有调用的时候才需要加"v-"

二、如何定义自定义指令

1. 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

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