Vue 自定义指令

最新推荐文章于 2024-06-16 13:00:26 发布

郭宝

最新推荐文章于 2024-06-16 13:00:26 发布

阅读量276

点赞数

CC 4.0 BY-SA版权

分类专栏： Web前端

本文链接：https://blog.youkuaiyun.com/qq_35366269/article/details/94720389

Web前端专栏收录该内容

284 篇文章 ¥99.90 ¥299.90

订阅专栏

超级会员免费看

本文介绍了Vue中的自定义指令功能，包括如何注册局部指令和全局指令。在组件中定义`directives`选项可创建局部指令，而在`main.js`中定义则能实现全局注册。自定义指令还涉及到各种钩子函数的使用。

Vue 自定义指令

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。

局部指令：

如果想注册局部指令，那么只需在组件中定义一个directives的选项即可，如下代码：

<template>
      <div style="width: 300px;height: 300px;" v-img="img" ></div>
</template>

<script>
    export default {
        name: "Directives_69",
      directives:{
            /*
            * 该钩子函数是被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
            * el：指令所绑定的元素，可以用来直接操作 DOM 。
            * binding 一个对象，
            *     name：指令名，不包括 v- 前缀。
                  valu

了解本专栏