【Vue框架】Vue的6大类指令

已于 2022-06-05 10:51:25 修改
阅读量656 收藏 5
点赞数 2
文章标签： vue.js 前端 javascript 指令 前端技术
于 2022-06-04 23:25:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44109827/article/details/125123962
版权

1. Vue中的指令

  • 指令：模板语法，用于辅助开发者渲染页面的基本结构。
  • Vue中的指令按照不同的用途，可以分为如下6大类：
  1. 内容渲染指令
  2. 属性绑定指令
  3. 事件绑定指令
  4. 双向绑定指令
  5. 条件渲染指令
  6. 列表渲染指令
1.1 内容渲染指令（v-text、{{}}、v-html）

在这里插入图片描述
代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p v-text="username"></p>
        <p>性别：{{gender}}</p>
        <div v-html="info"></div>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                username: '张三',
                gender: '男',
                info: '<h4>正在努力学习vue框架</h4></h4>'
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

1.2 属性绑定指令（：/ v-bind）
  • 注意：插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中。
  • 在vue中，可以使用v-bind指令，为元素的属性动态绑定值，简写为英文的：（冒号）。
  • 在使用v-bind属性绑定期间，如果板顶内容需要进行动态拼接，则字符串外边应该包括单引号。
    代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <input type="text" :placeholder="tips"><br>
        <img :src="photo" alt="" style="width: 40px;">
        <div :title="'box' + index">这是一个div</div>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                tips:'请输入用户名',
                photo: 'https://cn.vuejs.org/images/logo.svg',
                index: 1,
            }
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

1.3 事件绑定指令（@ / v-on）
  • 可以简写为@；
  • 事件绑定的处理函数，写在methods里；
  • 函数可以传参，写在函数后面的小括号里；
    代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p>count的值为：{{count}}</p>
        <button v-on:click="add(1)">+1</button>
        <button @click="sub">-1</button>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                count: 0,
            },
            methods: {
                add(n) {
                    console.log(vm);
                    this.count+=n;
                },
                sub() {
                    this.count--;
                }
            }

        })
    </script>
</body>
</html>

效果：
在这里插入图片描述

1.3.1 事件绑定中的$event
  • vue 提供了内置变量，名字叫做$event，它就是原生DOM的事件对象。
    代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p>count的值为：{{count}}</p>
        <button v-on:click="add(1, $event)">+1</button>
        <button @click="sub">-1</button>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                count: 0,
            },
            methods: {
                add(n, e) {
                    console.log(e);
                    this.count+=n;

                    // 判断 count 的值
                    if(this.count % 2 === 0) {
                        // 偶数
                        e.target.style.backgroundColor = 'pink';
                    } else {
                        // 奇数
                        e.target.style.backgroundColor = '';
                    }
                },
                sub() {
                    this.count--;
                }
            }

        })
    </script>
</body>
</html>

结果：
奇数时，button为原色；偶数时，button为粉色。
在这里插入图片描述

1.3.1 事件修饰符

在这里插入图片描述
代码举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <a href="https://www.baidu.com/" @click.prevent="show">跳转到百度首页</a>

        <div style="background-color: pink; width:500px; height: 200px; line-height:200px; padding: 150px;" @click="divHandler">
            <button @click.stop="btnHandler">按钮</button>
        </div>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                count: 0,
            },
            methods: {
                show() {
                    console.log('阻止了a的默认跳转事件！');
                },
                btnHandler() {
                    console.log('btnHandler');
                },
                divHandler() {
                    console.log('divHandler');
                }
            }

        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

1.3.3 按键修饰符

在这里插入图片描述
代码：

  • 下面这段代码实现的是，在input中输入内容，按下esc清空内容，按下回车，打印内容。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <input type="text" @keyup.esc="clearInput" @keyup.enter="submitInput">
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                count: 0,
            },
            methods: {
                clearInput(e) {
                    console.log('触发了clearInput方法');
                    e.target.value = '';
                },
                submitInput() {
                    console.log('触发了submitInput方法');
                }
            }

        })
    </script>
</body>
</html>
1.4 双向数据绑定指令（v-model）
  • v-model和v-bind的区别，前者是双向数据绑定，后者是单向数据绑定（响应data中的数据变化，动态渲染视图）；
  • v-model可以用在input、textarea、select中。
    代码举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p>用户的名字是：{{username}}</p>
        <!-- 双向数据绑定 -->
        <input type="text" v-model="username">
        <hr>
        <!-- 单项数据绑定 -->
        <input :value="username"></input>
        <hr>

        <!-- 下拉选择框 -->
        <select v-model="city">
            <option value="">请选择城市</option>
            <option value="1">北京</option>
            <option value="2">上海</option>
            <option value="3">吉林</option>
        </select>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
        // 创建 Vue 的实例对象
        const vm = new Vue({
            // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
            el : '#app',
            // data 对象就是要渲染到页面上的数据
            data: {
                username: '张三1',
                city: 1,
            },
        })
    </script>
</body>
</html>

结果：
在这里插入图片描述

1.4.1 v-model的修饰符

在这里插入图片描述
代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
      <input type="text" v-model.number="n1" />+
      <input type="text" v-model.number="n2" />=
      <span>{{n1 + n2}}</span>
      <hr>
      <!-- 去除字符串前后空格 -->
      <input type="text" v-model.trim="username">
      <button @click="showName()">获取用户名</button>
      <hr>
      <input type="text" v-model.lazy="username">
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
      // 创建 Vue 的实例对象
      const vm = new Vue({
        // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
        el: "#app",
        // data 对象就是要渲染到页面上的数据
        data: {
          username: "张三1",
          city: 1,
          n1: 1,
          n2: 3,
        },
        methods: {
            showName() {
                console.log(`用户名为：'${this.username}'`);
            }
        }
      });
    </script>
  </body>
</html>

结果：
在这里插入图片描述

1.5 条件渲染指令（v-if、v-show）

在这里插入图片描述

  1. v-model的原理是：动态为元素添加或者移除 display:none；样式，来实现元素的显示和隐藏；
    • 如果要频繁地切换元素的显示状态，用v-show性能更好；
  2. v-if的原理是：每次动态创建或者移除元素，实现元素的显示与隐藏；
    • 如果刚进入页面，某个元素默认不需要被展示，而且后期这个元素很可能也不需要被展示出来，此时v-if性能更好。
  3. 在实际开发中，绝大多数情况，不用考虑性能问题，直接使用v-if。

代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <p v-if="flag">这是v-if控制的</p>
        <p v-show="flag">这是v-show控制的</p>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
      // 创建 Vue 的实例对象
      const vm = new Vue({
        // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
        el: "#app",
        // data 对象就是要渲染到页面上的数据
        data: {
            flag: true,
        },
      });
    </script>
  </body>
</html>
1.5.1 v-if经常与v-else-if、v-else搭配使用
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
        <div v-if="type === 'A'">优秀</div>
        <div v-else-if="type === 'B'">良好</div>
        <div v-else-if="type === 'C'">及格</div>
        <div v-else="type === 'D'">差</div>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
      // 创建 Vue 的实例对象
      const vm = new Vue({
        // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
        el: "#app",
        // data 对象就是要渲染到页面上的数据
        data: {
            type: 'B',
        },
      });
    </script>
  </body>
</html>

上面这段代码实现的功能：根据type的值，决定显示优秀、良好、及格、差。

1.6 循环渲染指令（v-for）

在这里插入图片描述
代码举例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 希望 Vue 能够控制下面这个 div， 帮我们把数据填充到 div 内部 -->
    <div id="app">
      <table>
        <thead>
            <th>索引</th>
            <th>Id</th>
            <th>名字</th>
        </thead>
        <tbody>
            <tr v-for="(item,index) in list" :title="item.name + index">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
      </table>
    </div>

    <!-- 1. 导入 Vue 的库文件，在 window 全局就有了 Vue 这个构造函数 -->
    <script src="/lib/vue.js"></script>
    <!-- 2. 创建 Vue 实例对象 -->
    <script>
      // 创建 Vue 的实例对象
      const vm = new Vue({
        // el 属性: 固定写法，表示当前 vm 实例要控制页面上的哪个区域，接受的值是一个选择器
        el: "#app",
        // data 对象就是要渲染到页面上的数据
        data: {
          list: [
            { id: 1, name: "刘能" },
            { id: 2, name: "赵四" },
            { id: 3, name: "谢广坤" },
          ],
        },
      });
    </script>
  </body>
</html>

结果：
在这里插入图片描述

1.6.1 绑定:key属性
  • 官方建议，只要用到v-for指令，那么一定要绑定一个:key属性，而且尽量把id作为key的值。
  • 官方对key的值类型，要求是字符串或数字类型。
    在这里插入图片描述
    key的注意事项
    在这里插入图片描述

参考：黑马Vue视频

想做一只快乐的修狗
关注
  • 2
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
基于vue-command的web终端
trjune的博客
05-28 3327
使用vue-command开发web终端，不知道能不能完成，在此记录遇到的坑。 基本没有什么资料，找到的都是英文，如果有朋友们遇到好的资料，请留言分享，万分感谢。 1、安装 直接按照官网给出的命令安装vue-command npm i vue-command --save 2、简单示例 安装完成后在vue新建页面，引入vue-command和对应的css <template> <vue-command :commands="commands" /> </t
vue基础指令——六大类指令
m0_61631823的博客
01-12 1073
vue的基础语法中有六大类指令，分别为：内容渲染指令、属性绑定指令、事件绑定指令、双向绑定指令、条件渲染指令、列表渲染指令 1.内容渲染指令：常用的有三个 v-text:直接跟在元素后面，例如<p v-text="username"></p>,username是指参数，需要在vue实例中data中定义。这个指令有一个缺点，如果p标签中有内容，但在vue实例中又定义了，就会将原来的内容覆盖 {{ }}: 插值表达式，在实际开发中运用最多，它是一个内容占位符，不会覆盖原有拥有的内容
vuecommand一个完全工作的Vuejs终端模拟器
08-11
vue-command：一个完全工作的Vue.js终端模拟器
vue.js适配各个终端_完整的Vue.js终端模拟器
cuk5239的博客
07-27 1126
vue.js适配各个终端 Vue命令 (vue-command) A fully working Vue.js terminal emulator. 完全正常工作的Vue.js终端模拟器。 View demo 查看演示 Download Source 下载源 特征 (Features) yargs-parseryargs-parser解析参数 ↑/↑ / ↓)↓ ) White/Dark ...
VUE移动端项目中，页面限制用户缩放
hudabao888666的博客
02-16 1753
VUE移动端项目中，页面限制用户缩放
封装Vue复制指令集,copyComm
03-04
封装Vue复制指令
VUE框架面试题.docx
11-05
“VUE框架面试题.docx”是一份针对Vue.js框架的面试题汇总，包含了Vue.js的基础知识、组件、指令、过滤器、路由、状态管理等方面的问题。这份文档旨在帮助开发者了解和掌握Vue.js的常见知识点，提高答题准确率和速度...
前端vue框架 高频面试题
08-11
近年来，Vue.js作为一种轻量级的JavaScript框架迅速崛起，并在前端开发领域取得了广泛应用和认可。由于其简洁易学、高效灵活的特性，越来越多的企业开始采用Vue.js来构建他们的Web应用程序。 针对Vue.js的面试准备...
vue 指令限制指定格式的数字
03-23
vue 指令限制指定格式的数字
ppt课件-第3章 Vue指令.zip
03-22
课件参考，欢迎下载
vue2和vu3屏幕显示适配 屏幕等比例缩放？
weixin_67827613的博客
08-03 2536
这个zoom属性在vue2项目没有问题可以正常使用，但是在vue3+ts中使用会报不存在这个属性，所以就要换一种方式使用。zoom这个属性很关键：用于设置或检索对象的缩放比例。
【VUE】常见移动端适配方案
SZnAl的博客
12-30 6617
使用插件 postcss-px-to-viewport[3] 进行相关配置，就可以帮助我们将。参考：通过插件postcss-pxtorem轻松实现px到rem转换，完成移动端适配[2]在项目中，如果设计师要求某一场景不做适配，需为固定的宽高或大小，这时我们就需要利用。方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素。：初始缩放比例，即当浏览器第一次加载页面时的缩放比例。方案是阿里早期开源的一个移动端适配解决方案，引用。的大小，以此来达到适配不同屏幕尺寸的目的。
vue组件的分类
weixin_44260504的博客
04-26 2770
vue组件的分类 一般来说，Vue.js 组件主要分成三类： 由 vue-router 产生的每个页面，它本质上也是一个组件（.vue），主要承载当前页面的 HTML 结构，会包含数据获取、数据整理、数据可视化等常规业务。整个文件相对较大，但一般不会有 props 选项和 自定义事件，因为它作为路由的渲染，不会被复用，因此也不会对外提供接口。 在项目开发中，我们写的大部分代码都是这类的组件（页...
Vue学习日记7
NLP工程化
08-14 678
1.自动适应手机屏幕宽度的方法 解析： <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" /> [1]width：可视区域的宽度，值可为数字或关键词device-width。其中，w...
vue: 在页面模板中使用{{js变量}}
最新发布
头条:俊哥前端工程师，真正的大师永远怀揣着一颗学徒的心。
11-20 739
{{}}表达式会返回一个数据值, 肯定没有分号, 它不是完整的js的解析指令, 需要与其它语法组成一条完整的语句。
vue的指令
hlonelier的博客
06-07 175
指令（Directives）是vue为开发者提供的，用于。按照不同的用途可以分为以下6大类内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令。
Vue基础指令
qq_45021462的博客
11-02 157
自上而下
VUE语法入门
qq_43240299的博客
04-21 103
模板语法 插值 语法：{{单个表达式}} 双大括号中的表达式会被解释为普通文本，无法解析html。无法作用于attribute。仅支持js单个表达式解析。 指令 v-bind：attribute 可把dom元素的属性绑定至某一个变量 <a v-bind:href="url">...</a> v-on：eventname 用于监听某一事件 <a v-...
3.vue语法
T_testView的博客
01-08 712
在一个使用vue框架的页面应用程序中，至少要创建一个Vue实例，语法为 new Vue(),vue实例充当了MVVM模式中的ViewModel。创建vue实例时，需要传入一个选项对象，该对象可以包含数据、方法、组件生命周期钩子等。 1.第一个实例 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--引入Vue的包（可以官方下载）--> <script s.
Vue.js前端框架：自定义指令
05-24
Vue.js的自定义指令可以让我们在模板中直接使用自定义的指令，从而实现一些特殊的功能或交互效果。自定义指令是Vue.js提供的一种扩展机制，它允许我们在编写Vue.js应用程序时自定义DOM元素的行为。 自定义指令主要由两部分组成：指令定义和指令钩子函数。 指令定义是一个包含指令名称、绑定值、修饰符等属性的对象，用来描述指令的属性和行为。指令钩子函数是指在绑定元素插入到DOM中、更新DOM时、解绑元素等特定时刻执行的函数，用来实现指令的具体功能。 下面是一个简单的自定义指令示例，用来实现点击外部区域隐藏弹窗的功能： ```javascript Vue.directive('click-outside', { bind: function(el, binding, vnode) { el.clickOutsideEvent = function(event) { if (!(el == event.target || el.contains(event.target))) { vnode.context[binding.expression](event); } }; document.body.addEventListener('click', el.clickOutsideEvent); }, unbind: function(el) { document.body.removeEventListener('click', el.clickOutsideEvent); } }); ``` 在上面的例子中，我们通过`Vue.directive`方法注册了一个名为`click-outside`的自定义指令，该指令的功能是在点击指定元素外的区域时隐藏元素。 在指令的`bind`钩子函数中，我们绑定了一个事件监听器，用来监听`document.body`的点击事件。在事件处理函数中，我们判断点击的目标是否是指定元素或指定元素的子元素，如果不是，则调用指令绑定的方法，执行隐藏元素的操作。 在指令的`unbind`钩子函数中，我们移除了绑定的事件监听器，以避免内存泄漏。 使用自定义指令时，我们可以在模板中通过`v-指令名`的方式来调用指令，如下所示： ```html <div v-click-outside="hidePopup"></div> ``` 在上面的例子中，我们将`click-outside`指令绑定到一个`<div>`元素上，并指定了一个名为`hidePopup`的方法，用来隐藏弹窗。当用户点击该元素外的区域时，指令会自动触发绑定的方法，从而实现弹窗的隐藏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

想做一只快乐的修狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值