vue directive 注册局部指令

最新推荐文章于 2024-06-12 13:02:56 发布

＊且听风吟

最新推荐文章于 2024-06-12 13:02:56 发布

阅读量1.1k

点赞数 1

分类专栏： # Vue 2.x 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/HH18700418030/article/details/128940153

版权

本文详细介绍了如何在Vue组件中注册和使用局部指令，包括自定义钩子函数的两种写法——函数形式和对象形式。通过实例展示了自定义指令的应用，强调了使用时的注意事项，如避免使用保留关键字命名，理解指令生命周期等。

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

注册局部指令

vue directive 在注册局部指令时，是通过在组件 options 选项中设置 directives 属性。如下：

directives: {
   
  focus: {
   
    // 指令的定义
    inserted: function (el) {
   
      el.focus()
    }
  }
}

在模板中的任何元素上都可以使用新的 v-focus property，如下：

<input v-focus>

自定义钩子函数

自定义钩子函数有两种写法：函数形式（简写）和对象形式（完整形式）。

示例：

<template>
  <div class="content">
    <div id="hook-arguments-example" v-demo:foo.a.b="message"></div>
  </div>
</template>

<script>
export default {
   
  name: 'Content',
  data () {
   
    return {
   
      message: 'hello!'
    }
  },
  directives: {
   
    demo: {
   
      bind: function (el, binding, vnode)