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

一、理解自定义指令

在 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 钩子一样,它也接收 elbinding 和 vnode 三个参数。
3update1、当指令的绑定值发生变化时调用,并且元素 DOM 也已经更新。
2、接收的参数和 bind 和 inserted 一样。
4componentUpdated1、当组件的 VNode 及其子 VNode 更新后调用,即组件的 DOM 已经更新。
2、这个钩子对于在更新之后的操作非常有用,比如基于新的 DOM 状态重新计算位置或大小。
5unbind1、当指令与元素解绑时调用,此时可以执行一些清理工作,比如移除事件监听器或清理计时器。
2、同样接收 elbindingvnode 这些参数,但 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.mzph.cn/news/842480.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

通过键值对访问字典

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 在Python中&#xff0c;如果想将字典的内容输出也比较简单&#xff0c;可以直接使用print()函数。例如&#xff0c;要想打印dictionary字典&#xff…

【ARMv8/v9 异常模型入门及渐进 10 -- WFI 与 WFE 使用详细介绍 1】

请阅读【ARMv8/v9 ARM64 System Exception】 文章目录 WFI 与 WFE等待事件&#xff08;WFE&#xff09;发送事件&#xff08;SEV&#xff09;本地发送事件&#xff08;SEVL&#xff09;WFE 唤醒事件 WFE 使用场景举例与代码实现wfe睡眠函数sev 事件唤醒函数全局监视器和自旋锁 …

【Text2SQL 论文】IncSQL:通过增量式生成 action 序列来得到 SQL

论文&#xff1a;IncSQL: Training Incremental Text-to-SQL Parsers with Non-Deterministic Oracles ⭐⭐⭐ ICLR 2019&#xff0c;arXiv:1809.05054, Microsoft Research 一、论文速读 本文提出了 IncSQL&#xff0c;一个使用 Non-Deterministic Oracles 思路的增量式 Text…

[[nodiscard]]--c++17

作用 用于标记某个函数或者类的成员函数的返回值需要处理。 被标记的函数和类的函数被调用&#xff0c;但是返回值没有接收的时候&#xff0c;编译器会warning. 标记函数 #include <iostream>[[nodiscard]] int square(int x) {return x * x; }int main() {// 注意&am…

C++青少年简明教程:switch语句

C青少年简明教程&#xff1a;switch语句 在C中&#xff0c;switch语句用于基于一个表达式的值来执行不同的代码块。这个表达式通常是一个整数类型&#xff08;如int&#xff0c;char&#xff0c;或枚举类型&#xff09;&#xff0c;并且case标签必须是整数常量表达式。 语法格…

香橙派Kunpeng Pro测评:他给的实在太多了

文章目录 一、开箱环节1、包装配置2、开发板包装3、开发板3.1、开发版正面3.2、开发板背面 二、硬件配置1、硬件配置清单 2、配置图解 三、开机~启动&#xff01;1、运行系统1.1、外设配置1.2、系统启动1.3、官方教程 2、openEuler系统概览 四、系统测试1、性能测试1.1、安装sy…

漫步者x1穷鬼耳机双耳断连

困扰了我两天&#xff0c;终于有时间解决这个问题了&#xff0c;查看了一堆都是别的型号。怎么没人用这个啥按键都没有的耳机QAQ&#xff0c;幸好给我找到了说明书&#xff0c;啊哈哈&#xff01; 说明书地址

堆结构知识点复习——玩转堆结构

前言:堆算是一种相对简单的数据结构&#xff0c; 本篇文章将详细的讲解堆中的知识点&#xff0c; 包括那些我们第一次学习堆的时候容易忽略的内容&#xff0c; 本篇文章会作为重点详细提到。 本篇内容适合已经学完C语言数组和函数部分的友友们观看。 目录 什么是堆 建堆算法…

电脑找不到opencl.dll原因分析及5种详细的解决方法

在计算机使用过程中&#xff0c;我们经常会遇到一些错误提示&#xff0c;其中之一就是“找不到opencl.dll”。这通常意味着计算机中缺少或损坏了与OpenCL&#xff08;开放计算语言&#xff09;相关的动态链接库文件。OpenCL允许应用程序利用图形处理器&#xff08;GPU&#xff…

【问题记录】QT“类型强制转换“:无法从“ATL::CString“转换为“LPCWSTR“

一&#xff0c;问题现象 环境&#xff1a;VS2019QT 报错提示&#xff1a;“类型强制转换”&#xff1a;无法从"ATL::CString"转换为"LPCWSTR" 二&#xff0c;解决方法 打开项目属性&#xff0c;设置字符集&#xff0c;如下所示&#xff1a;

BFS解决最短路问题(详解)

目录 BFS简介 && 框架&#xff1a; 一.二叉树的最小深度 二&#xff1a;迷宫中里入口最近的出口&#xff1a; 三.最小基因变化: 四&#xff1a;单词接龙&#xff1a; ​五&#xff1a;为高尔夫比赛砍树&#xff1a; BFS简介 && 框架&#xff1a; 说到BFS…

动态规划-卡特兰数

不同的二叉搜索树&#xff08;96&#xff09; 题目描述: 状态表示: 建立一维数组dp&#xff0c;使用dp[i]来表示i个节点时有的二叉搜索树种类。 状态转移方程: 因为dp[i]表示有i个节点&#xff0c;我们设置一个循环&#xff0c;循环下标为j&#xff0c;此时j代表第几个节点为…

STM32Cube系列教程10:STM32CubeIDE工程创建+串口DMA+IDLE+printf重定向+软中断处理串口数据+非阻塞延时任务

文章目录 工程配置配置时钟配置Debug接口配置串口外设配置时钟树生成代码 配置串口重定向printf配置串口&#xff0c;开启IDLE&#xff0c;开启软中断 配置非阻塞延时任务调度函数编写任务调度函数延时任务创建 编译&#xff0c;下载与测试编译下载测试 前两天收到了ST社区的NU…

5.27周报

这两周邻近毕业故没有很多时间来学习课余内容&#xff0c;另外最近身体有些不舒服【偏头痛】&#xff0c;所以学的内容不多&#xff0c;包括SVM向量机和ResNet【不包括代码复现】 1.SVM支持向量机的大概内容 1、目的&#xff1a; 主要内容是如何找到分类的那条线【超平面】—…

我的世界开服保姆级教程

前言 Minecraft开服教程 如果你要和朋友联机时&#xff0c;可以选择的方法有这样几种&#xff1a; 局域网联机&#xff1a;优点&#xff1a;简单方便&#xff0c;在MC客户端里自带。缺点&#xff1a;必须在同一局域网内。 有些工具会带有联机功能&#xff1a;优点&#xff1a;一…

【GateWay】自定义RoutePredicateFactory

需求&#xff1a;对于本次请求的cookie中&#xff0c;如果userType不是vip的身份&#xff0c;不予访问 思路&#xff1a;因为要按照cookie参数进行判断&#xff0c;所以根据官方自带的CookieRoutePredicateFactory进行改造 创建自己的断言类&#xff0c;命名必须符合 xxxRout…

整理前端新出的操作工具好用又好玩(Custom Formatter,Oxlint,Nuxt DevTools,component-party)

1.使用Custom Formatter 使vue3中的reactive object 在Chrome在console中更易理解的方式展现 启用步骤&#xff1a; 1.打开控制台&#xff0c;然后打开console设置 2.前往proferences中的Console&#xff0c;勾选Enable custom formatters选项 3.刷新页面 2.使用css Overv…

FreeRtos进阶——关于任务的深入探究

创建任务函数 在我们创建任务中&#xff0c;会有几个比较神奇的参数&#xff0c;例如函数名称&#xff0c;以及栈大小。在我们创建任务时&#xff0c;也相应的要为每一个任务创建栈。这里面的栈除了用于任务数组开辟的空间外&#xff0c;还可以用于保存现场&#xff0c;例如有S…

手把手从0到1教你做STM32+FreeRTOS智能家居--第11篇之步进电机

一、硬件设计 步进电机介绍 本项目用到的是常见的也是控制起来最简单的步进电机&#xff1a;五线四项的步进电机28BYJ-48。 单片机IO口输出电流太小无法直接驱动电机运行&#xff0c;在这里我们需要另外加一个电机驱动板。可以选择ULN2003电机驱动板。 步进电机的控制原理 …

jmeter发送webserver请求和上传请求

有时候在项目中会遇到webserver接口和上传接口的请求&#xff0c;大致参考如下 一、发送webserver请求 先获取登录接口的token&#xff0c;再使用cookie管理器进行关联获取商品(webserver接口)&#xff0c;注意参数一般是写在消息体数据中&#xff0c;消息体有点像HTML格式 执…