nuxt2：自定义指令 / v-xxx / directives / 理解 / 使用方法 / DEMO

news2024/9/20 5:50:46

一、理解自定义指令

在 vue 中提供了一些对于页面和数据更为方便的输出，这些操作就叫做指令，以 v-xxx 表示，比如 html 页面中的属性 <div v-xxx ></div>。自定义指令很大程度提高了开发效率，提高了工程化水平，一定要认真学习。

vue3：自定义指令

二、vue2 有哪些内置指令

序号指令解释
1v-for基于源数据多次渲染元素或模板块。
2v-on绑定事件监听器。
3v-bind动态的绑定一个或多个attribute，或一个组件prop到表达式。
4v-model在表单控件或者组件上创建双向数据绑定。
5v-slot提供具名插槽或需要接收prop的插槽。
6v-pre跳过这个元素和它的子元素的编译过程。
7v-cloak这个指令保持在元素上直到关联实例结束编译。
8v-once只渲染元素或组件一次，随后的渲染会将组件/元素以及下面的子元素当成静态页面不再渲染。
9v-text更新元素的textContent
10v-html更新元素的display属性
11v-if根据条件渲染元素
12v-else与v-if 或 v-else-if搭配使用
13v-else-if与 v-if 或 v-else 搭配使用，前一兄弟元素必须有 v-if 或 v-else-if。

三、vue2 指令修饰符

事件修饰符
序号修饰符解释
1.stop阻止事件冒泡，相当于调用 event.stopPropagation()
2.prevent阻止默认事件的触发，相当于调用 event.preventDefault()
3.capture使用事件捕获模式，从外部元素开始触发事件，然后再触发内部元素的事件
4.self只有当事件在绑定的元素本身触发时才触发事件，不会触发内部元素的事件
5.once指令只会触发一次，然后自动解绑。
6.passive指示监听器永远不会调用 event.preventDefault()，可以提高性能。
7.native监听组件根元素的原生事件，而不是组件内部的子元素上的事件。
v-model修饰符
序号修饰符解释
1.trim自动去除输入内容的首尾空格
2.number将输入的 value 值转为数字类型
3.lazy将 input 事件改为 change 事件，减少输入事件的频率
按键修饰符
序号修饰符解释
1.enter监听键盘回车事件
其他修饰符
序号修饰符解释
1.camel用于将绑定的特性名字转回驼峰命名
<svg :view-box.camel="viewBox"></svg>
上面的代码等价于
<svg viewBox="..."></svg>
2.sync.sync修饰符是一个特殊的修饰符，用于实现父子组件之间的双向数据绑定。

四、vue2自定义指令钩子

在 Vue 2 中，当你创建自定义指令时，你可以访问几个钩子函数，这些钩子函数允许你在不同的指令生命周期阶段执行代码。
序号钩子解释
1bind1、当指令第一次绑定到元素上时调用。此时，你可以执行一些初始化操作，比如设置初始值或添加事件监听器。
2、这个钩子函数接收三个参数：el（指令所绑定的元素）、binding（一个对象，包含指令的名称、值和其他属性）、vnode（Vue 编译生成的虚拟节点）。
2inserted1、当被绑定的元素插入到父节点中时调用。此时，元素已经存在于 DOM 中，你可以执行依赖于 DOM 的操作。
2、和 bind 钩子一样，它也接收 el、binding 和 vnode 三个参数。
3update1、当指令的绑定值发生变化时调用，并且元素 DOM 也已经更新。
2、接收的参数和 bind 和 inserted 一样。
4componentUpdated1、当组件的 VNode 及其子 VNode 更新后调用，即组件的 DOM 已经更新。
2、这个钩子对于在更新之后的操作非常有用，比如基于新的 DOM 状态重新计算位置或大小。
5unbind1、当指令与元素解绑时调用，此时可以执行一些清理工作，比如移除事件监听器或清理计时器。
2、同样接收 el、binding、vnode 这些参数，但 vnode 参数在大多数情况下是 undefined。

五、Nuxt2使用自定义指令方法

5.1、全局自定义指令（方法一）

5.1.1、创建目录directives

创建文件directives/highlight.js

// eslint-disable-next-line import/no-extraneous-dependencies
import Vue from 'vue'

Vue.directive('highlight', {
  // 当被绑定的元素插入到 DOM 中时
  inserted (el, binding) {
    // 获取指令的绑定值
    const color = binding.value || 'yellow';
    // 应用样式到元素
    el.style.backgroundColor = color;
  },
  // 当绑定值更新时
  update (el, binding) {
    // 更新元素的背景颜色
    el.style.backgroundColor = binding.value || 'yellow';
  }
})

5.1.2、nuxt.config.js配置

nuxt.config.js文件中找到plugins

plugins: [
    {
        { src: '../m-front-common/pc/directives/highlight', mode: 'client' },
    }
]

5.1.3、页面使用

<template>
  <div>
    <p v-highlight="'red'">这段文字的背景色会被设置为红色。</p>
  </div>
</template>
<script>
</script>
<style lang="less" scoped>
</style>

 验证成功

5.2、全局自定义指令（方法二）

5.2.1、创建目录directives

5.2.2、创建文件directives/highlight.js

export default {
  name: 'highlight',
  install(Vue) {
    Vue.directive('highlight', {
      bind (el, binding) {
        // 获取指令的绑定值
        const color = binding.value || 'yellow';
        // 应用样式到元素
        el.style.backgroundColor = color;
      },
      // 当绑定值更新时
      unbind (el, binding) {
        // 更新元素的背景颜色
        el.style.backgroundColor = binding.value || 'yellow';
      }
    })
  }
}

5.2.3、创建文件directives/index.js

// eslint-disable-next-line import/no-extraneous-dependencies
import Vue from 'vue'
import highlight from './highlight'

Vue.use(highlight)

5.2.4、nuxt.config.js配置

nuxt.config.js文件中找到plugins

plugins: [
    {
        { src: '../m-front-common/pc/directives/index'},
    }
]

5.2.5、页面使用

<template>
  <div>
    <p v-highlight="'red'">这段文字的背景色会被设置为红色。</p>
  </div>
</template>
<script>
</script>
<style lang="less" scoped>
</style>

 

5.3、局部自定义指令 / 页面自定义指令（方法三）

<template>
  <div>
    <div v-color="'red'">文字颜色</div>
  </div>
</template>
<script>
export default {
  directives: {
    'color': {
      bind: (el, binding) => {
        el.style.color = binding.value || 'blue';
      }
    }
  }
}
</script>
<style lang="less" scoped>
</style>

验证成功 

六、Nuxt2使用自定义指令DEMO

6.1、v-focus

export default {
  name: 'focus',
  install(Vue) {
    Vue.directive('focus', {
      inserted (el) {
        el.focus()
      }
    })
  }
}

6.2、v-color

export default {
  name: 'color',
  install(Vue) {
    Vue.directive('color', {
      bind (el, binding) {
        // 获取指令的绑定值
        const color = binding.value || 'yellow';
        // 应用样式到元素
        el.style.color = color;
      },
      unbind (el, binding) {
        el.style.color = binding.value || 'yellow';
      }
    })
  }
}

6.3、v-copy

import { Message } from 'element-ui'

export default {
  name: 'copy',
  install(Vue) {
    Vue.directive('copy', {
      inserted(el) {
        el.addEventListener('click', () => {
          const textarea = document.createElement('textarea');
          el.style.cursor = 'pointer';
          textarea.value = el.innerText;
          document.body.appendChild(textarea);
          textarea.select();
          document.execCommand('copy');
          document.body.removeChild(textarea);
          Message.success("复制成功")
        })
      }
    })
  }
}

6.4、highlight

export default {
  name: 'highlight',
  install(Vue) {
    Vue.directive('highlight', {
      bind (el, binding) {
        // 获取指令的绑定值
        const color = binding.value || 'yellow';
        // 应用样式到元素
        el.style.backgroundColor = color;
      },
      // 当绑定值更新时
      unbind (el, binding) {
        // 更新元素的背景颜色
        el.style.backgroundColor = binding.value || 'yellow';
      }
    })
  }
}

七、欢迎交流指正

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1703399.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【读书】读书笔记——理科生的视角：底层逻辑+数学之美

【读书】读书笔记——理科生的视角：底层逻辑+数学之美

1&#xff0c;底层逻辑1&#xff08;看清这个世界的底牌&#xff09; 刘润 著 0&#xff09;什么是底层逻辑&#xff1f; 底层逻辑是&#xff1a;事物之间共同点、变化背后不变的东西事&#xff1b;看清事物的本质&#xff0c;才能在复杂变化中从根本上解决问题。 1&#x…
阅读更多...
基于51单片机的智能灯光控制系统

基于51单片机的智能灯光控制系统

一.硬件方案 智能灯光控制系统由单片机最小系统、人体感应模块、关照强度模块、灯光控制模块、电源模块和灯泡组成。本文以STC89C52单片机为核心&#xff0c;通过利用光照度和红外人体感应相结合主动与被动的探测方法&#xff0c;现了室内无人或者关照充足时灯光自动光灯&…
阅读更多...
PyCharm面板ctrl+鼠标滚轮放大缩小代码

PyCharm面板ctrl+鼠标滚轮放大缩小代码

1.【File】➡【Settings】 2.点击【Keymap】&#xff0c;在右边搜索框中搜incre&#xff0c;双击出现的【Increase Font Size】 3.在弹出的提示框中选择【Add Mouse Shortcut】 4.弹出下面的提示框后&#xff0c;键盘按住【ctrl】&#xff0c;并且上滑鼠标滚轮。然后点击【O…
阅读更多...
第十七讲：结构体

第十七讲：结构体

第十七讲&#xff1a;结构体 1.初始结构体1.1结构体声明1.2结构体变量的创建和初始化1.2.1结构体变量的创建1.2.2结构体变量的初始化1.2.2.1普通初始化1.2.2.2结构体数组1.2.2.3结构体指针 1.3typedef定义结构体1.4结构体的自引用1.5结构体的特殊声明 2.结构体内存对齐2.1对齐规…
阅读更多...
【C++初阶】—— 类和对象 (上）

【C++初阶】—— 类和对象 (上）

&#x1f4dd;个人主页&#x1f339;&#xff1a;EterNity_TiMe_ ⏩收录专栏⏪&#xff1a;C “ 登神长阶 ” &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 类和对象 1. 初步认识C2. 类的引入3. 类的定义声明和定义全部放在类体中声明和定义分开存放 4.…
阅读更多...
用队列实现栈 用栈实现队列 设计循环队列

用队列实现栈 用栈实现队列 设计循环队列

用队列实现栈 思路 栈的特点&#xff1a;后进先出 队列的特点&#xff1a;先进先出 使用两个队列实现栈&#xff1a; 我们可以使用两个队列&#xff0c;一个队列为&#xff1a;空队列&#xff0c;一个队列为&#xff1a;非空队列 当我们要出队列时&#xff1a; 将 size - …
阅读更多...
束测后台实操文档1-PVE、PBS

束测后台实操文档1-PVE、PBS

合肥先进光源束测系统后台基础架构初步设计报告 合肥先进光源束测系统后台搭建进展2024.4.29 关于后台基础架构&#xff0c;写了上面两篇文档&#xff0c;只是框架的印象&#xff0c;没涉及到具体的实操&#xff0c;后面针对具体的搭建慢慢的完善操作的细节&#xff0c;从今年…
阅读更多...
灌装线在线粒子浮游菌监测系统安装调试

灌装线在线粒子浮游菌监测系统安装调试

近日&#xff0c;北京中邦兴业成功完成了某企业灌装线多个点位的洁净环境在线粒子浮游菌监测系统的施工并完成了前期的调试工作。 【项目现场】 北京中邦兴业技术工程师根据客户现场实际情况&#xff0c;进行了粒子、浮游菌的点位布置&#xff0c;此系统能够实时监测生产线上的…
阅读更多...
Docker安装MySQL的详细教程

Docker安装MySQL的详细教程

1. 拉取MySQL镜像 拉取MySQL镜像。您可以指定版本号&#xff0c;例如5.7或8.0&#xff0c;如果不指定&#xff0c;默认会拉取最新稳定版。 docker pull mysql:5.7或者&#xff0c;使用最新版本&#xff1a; docker pull mysql:latest2. 运行MySQL容器 拉取镜像完成后&#…
阅读更多...
本特利135813-01在PLC系统中的应用与功能分析

本特利135813-01在PLC系统中的应用与功能分析

本特利135813-01在PLC系统中的应用与功能分析 一、引言 在工业自动化和机械设备监测领域&#xff0c;高精度、高可靠性的传感器对于确保设备的稳定运行和故障预防具有至关重要的作用。本特利&#xff08;Bently Nevada&#xff09;作为振动监测领域的佼佼者&#xff0c;其1358…
阅读更多...
Pytorch深度学习实践笔记10（b站刘二大人）

Pytorch深度学习实践笔记10（b站刘二大人）

&#x1f3ac;个人简介&#xff1a;一个全栈工程师的升级之路&#xff01; &#x1f4cb;个人专栏&#xff1a;pytorch深度学习 &#x1f380;CSDN主页 发狂的小花 &#x1f304;人生秘诀&#xff1a;学习的本质就是极致重复! 《PyTorch深度学习实践》完结合集_哔哩哔哩_bilibi…
阅读更多...
基于SVm和随机森林算法模型的中国黄金价格预测分析与研究

基于SVm和随机森林算法模型的中国黄金价格预测分析与研究

摘要 本研究基于回归模型&#xff0c;运用支持向量机&#xff08;SVM&#xff09;、决策树和随机森林算法&#xff0c;对中国黄金价格进行预测分析。通过历史黄金价格数据的分析和特征工程&#xff0c;建立了相应的预测模型&#xff0c;并利用SVM、决策树和随机森林算法进行训…
阅读更多...
装机必备——WinRAR安装教程

装机必备——WinRAR安装教程

装机必备——WinRAR安装教程 软件下载 软件名称&#xff1a;WinRAR 软件语言&#xff1a;简体中文 软件大小&#xff1a;3.38M 系统要求&#xff1a;Windows7或更高&#xff0c; 32/64位操作系统 硬件要求&#xff1a;CPU2GHz &#xff0c;RAM4G或更高 下载通道①迅雷云盘丨下…
阅读更多...
2024甘肃省三支一扶报名流程详细图解

2024甘肃省三支一扶报名流程详细图解

预计报名时间&#xff1a;2024年5月27日9:00至5月31日18&#xff1a;00 2024甘肃省三支一扶报名流程 登录甘肃人力人力资源考试中心&#xff0c;选择网上报名 进入账户登录&#xff0c;首次登录同学请先注册账号。 注册账号&#xff0c;认真填写&#xff0c;仔细核对信息。…
阅读更多...
AJ-Report一次排错处理

AJ-Report一次排错处理

山重水复疑无路&#xff0c;柳暗花明又一村...... 新项目需要选型开源的AJ-Report&#xff0c;计划再次基础上进行二开。 官网地址&#xff1a; AJ-Report: AJ-Report是一个完全开源&#xff0c;拖拽编辑的可视化设计工具。三步快速完成大屏&#xff1a;配置数据源---->写…
阅读更多...
矩阵对角化在机器学习中的奥秘与应用

矩阵对角化在机器学习中的奥秘与应用

在机器学习的广阔领域中&#xff0c;矩阵对角化作为一种重要的数学工具&#xff0c;扮演着不可或缺的角色。从基础的线性代数理论到复杂的机器学习算法&#xff0c;矩阵对角化都在其中发挥着重要的作用。 矩阵对角化的概念与原理 矩阵对角化是矩阵理论中的一个基本概念&#x…
阅读更多...
红队攻防渗透技术实战流程：红队目标上线之webshell工具魔改

红队攻防渗透技术实战流程：红队目标上线之webshell工具魔改

红队攻防免杀实战 1. 红队目标上线-Webshell免杀-源码魔改1.2 Webshell-代码混淆&流量绕过&工具原理1.2 通过对冰蝎的数据包分析：1.2魔改冰蝎-JAR反编译打包构建1.2魔改冰蝎-防识别-打乱特征指纹1.2魔改冰蝎-防查杀-新增加密协议1. 红队目标上线-Webshell免杀-源码魔改…
阅读更多...
[8] CUDA之向量点乘和矩阵乘法

[8] CUDA之向量点乘和矩阵乘法

CUDA之向量点乘和矩阵乘法 计算类似矩阵乘法的数学运算 1. 向量点乘 两个向量点乘运算定义如下&#xff1a; #真正的向量可能很长&#xff0c;两个向量里边可能有多个元素 (X1,Y1,Z1) * (Y1,Y2,Y3) X1Y1 X2Y2 X3Y3这种原始输入是两个数组而输出却缩减为一个(单一值)的运…
阅读更多...
mysql高级篇学习（数据表的设计方法，索引优化）

mysql高级篇学习（数据表的设计方法，索引优化）

使用docker 安装 mysql 安装 docker # yum 包更新到最新 yum update# 卸载旧的 docker yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine # 安装 gcc 环境 yum -y install…
阅读更多...
【程序员如何送外卖】

【程序员如何送外卖】

嘿&#xff0c;咱程序员要在美团送外卖&#xff0c;那还真有一番说道呢。 先说说优势哈&#xff0c;咱程序员那逻辑思维可不是盖的&#xff0c;规划送餐路线什么的&#xff0c;简直小菜一碟。就像敲代码找最优解一样&#xff0c;能迅速算出怎么送最省时间最有效率。而且咱平时…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023