深入理解 Vue 中的指针操作(一)

文章目录

    • ☘️引言
    • ☘️什么是指针
    • ☘️基本用法
      • 🍃 v-if和v-show指令
        • 🌿v-if
        • 🌿v-show
        • 🌿v-if *VS* v-show
      • 🍃v-bind绑定指令
      • 🍃v-on指令
        • 🌿事件修饰符
          • 🌱.stop
          • 🌱.prevent
          • 🌱.capture
          • 🌱.self:
          • 🌱.once
        • 🌿按键修饰符
          • 🌱.enter
          • 🌱.tab
          • 🌱.delete
          • 🌱.esc
          • 🌱.space
          • 🌱.up、.down、.left、.right
        • 🌿绑定自定义事件

☘️引言

Vue.js 是一款非常流行且功能强大的前端框架,它以其响应式的数据绑定和组件化的开发方式赢得了众多开发者的喜爱。而在 Vue.js 中,指针操作是一个非常重要的概念,它能够帮助我们更好地处理和操作数据。本篇博客将深入探讨 Vue 中的指针操作,分享一些实用的技巧和注意事项。

☘️什么是指针

在 Vue 中,指针操作是指对数据的引用进行操作的过程。它包括对数据的读取、修改和监听等操作。Vue 通过使用指针来追踪数据的改变,并在相关数据发生改变时,自动更新相关的视图。

☘️基本用法

🍃 v-if和v-show指令

在 Vue 中,v-if 和 v-show 是两个常用的指令,用于控制元素的显示和隐藏。下面我将详细介绍这两个指令的特点及应用场景。

🌿v-if

v-if 是 Vue 中的一个条件指令,用于根据条件决定元素是否渲染到 DOM 中。当 v-if 的值为真时,元素会被渲染到 DOM 中,反之则不会。
v-if 具有以下特点:

  • 📒v-if 会根据条件动态创建或销毁元素,因此可以在渲染时减少 DOM 节点数量,从而提高性能;
  • 📒v-if 的判断语句可以是任意的 JavaScript 表达式;
  • 📒当 v-if 的值发生改变时,元素会被重新渲染,已有的状态会被销毁并重新创建。
    以下是一个使用 v-if 的示例代码:
<template><div><p v-if="show">这是一个会显示的段落</p></div>
</template>
<script>
export default {data() {return {show: false}}
}
</script>
🌿v-show

v-show 也是一个条件指令,和 v-if 不同的是,v-show 仅仅是控制元素的显示和隐藏,而不会根据条件销毁或创建元素。
v-show 具有以下特点:

  • 📒v-show 不会重新渲染元素,而只是更改 CSS 的 display 属性控制元素的显示和隐藏;
  • 📒v-show 的判断语句仍然可以是任意的 JavaScript 表达式;
  • 📒当 v-show 的值发生改变时,Vue 会自动更新元素的可见性。
    以下是一个使用 v-show 的示例代码:
<template><div><p v-show="show">这是一个会隐藏的段落</p></div>
</template><script>
export default {data() {return {show: false}}
}
</script>
🌿v-if VS v-show

官网中针对v-ifv-show的区别给出解释:

v-if 是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

相比之下,v-show 就简单得多——不管初始条件是什么,元素总是会被渲染,并且只是简单地基于 CSS 进行切换。

一般来说,v-if 有更高的切换开销,而 v-show 有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用 v-show 较好;如果在运行时条件很少改变,则使用 v-if 较好。

🍃v-bind绑定指令

在 Vue 中,v-bind 是一条指令,用于动态地将数据绑定到 HTML 元素的属性上。通过 v-bind,可以在 HTML 元素上绑定 Vue 实例中的数据,使其可以动态地更新。

v-bind 的用法有两种形式:

  1. 缩写形式 【:】
    可以使用冒号 : 来缩写 v-bind。例如,:src=“imageURL” 是 v-bind:src=“imageURL” 的缩写形式。
    示例代码:
<template><img :src="imageURL" :alt="altText">
</template>
<script>
export default {data() {return {imageURL: 'path/to/image.jpg',altText: 'An image'}}
}
</script>
  1. 完整写法 - v-bind
    在指令中使用 v-bind 前缀。例如,v-bind:src=“imageURL” 可以将 Vue 实例中的 imageURL 属性绑定到元素的 src 属性上。
    示例代码:
<template><img v-bind:src="imageURL" v-bind:alt="altText">
</template>
<script>
export default {data() {return {imageURL: 'path/to/image.jpg',altText: 'An image'}}
}
</script>

v-bind 可以绑定到 HTML 元素的任何属性。常见的使用场景包括:

  • 🖍️绑定 src 属性:
  • 🖍️绑定 class 属性:
  • 🖍️绑定 style 属性:
  • 🖍️绑定表单元素的属性:

🍃v-on指令

在 Vue.js 中,v-on 指令用于绑定事件处理函数。它可以监听 DOM 事件,如 click、keydown 等等,也可以监听自定义事件。

v-on 的使用方式有两种:

  1. 缩写形式 - @
    在指令中使用 @ 缩写前缀。例如,@click=“handler” 可以使用 v-on:click=“handler” 作为缩写形式。
    示例代码:
<template><button @click="handleClick">Click me</button>
</template>
<script>
export default {methods: {handleClick() {console.log('Button clicked')}}
}
</script>
  1. 完整写法 - v-on
    在指令中使用 v-on 前缀。例如,v-on:click=“handler” 可以使用 @click=“handler” 作为缩写形式。
    示例代码:
<template><button v-on:click="handleClick">Click me</button>
</template>
<script>
export default {methods: {handleClick() {console.log('Button clicked')}}
}
</script>
🌿事件修饰符

在 Vue.js 中,事件修饰符可以用于修改事件的行为。Vue.js 提供了一些事件修饰符,用于处理常见的事件情况。以下是一些常用的事件修饰符:

🌱.stop

➡阻止事件冒泡,相当于调用 event.stopPropagation() 方法。

<button @click.stop="handleClick">点击</button>
🌱.prevent

➡阻止事件的默认行为,相当于调用 event.preventDefault() 方法。

<form @submit.prevent="handleSubmit"><button type="submit">提交</button>
</form>
🌱.capture

➡使用捕获模式监听事件,即在父组件触发事件之前先触发子组件的事件。

<div @click.capture="handleClick">父组件</div>
🌱.self:

➡只在目标元素自身触发事件时才调用事件处理程序,不包括子元素触发的事件。

<div @click.self="handleClick">父元素</div>
🌱.once

➡事件只触发一次,即只调用一次事件处理程序。

<button @click.once="handleClick">点击一次</button>
🌿按键修饰符

在 Vue.js 中,你可以使用按键修饰符来处理键盘事件(如按下键盘按键)时的行为。按键修饰符使用特定的键别名来指定所需的按键。以下是一些常用的按键修饰符:

🌱.enter

➡处理回车键 (keyCode 为 13)。

<input v-on:keyup.enter="submitForm">
🌱.tab

➡处理 Tab 键 (keyCode 为 9)。

<input v-on:keyup.tab="focusNextInput">
🌱.delete

➡处理删除键 (keyCode 为 46)。

<input v-on:keyup.delete="deleteItem">
🌱.esc

➡处理 Esc 键 (keyCode 为 27)。

<input v-on:keyup.esc="cancelAction">
🌱.space

➡处理空格键 (keyCode 为 32)。

<button v-on:keyup.space="playSound">播放声音</button>
🌱.up、.down、.left、.right

➡处理上、下、左、右箭头键 (keyCode 分别为 38、40、37、39)。

<input v-on:keyup.up="selectPreviousOption">
<input v-on:keyup.down="selectNextOption">

请注意,按键修饰符只能应用于键盘事件(如 v-on:keyup、v-on:keydown、v-on:keypress 等),而不是鼠标事件或其他事件。

🌿绑定自定义事件

v-on 除了绑定原生 DOM 事件之外,还可以监听子组件触发的自定义事件。

示例代码:

在子组件内部,使用 $emit 方法来触发自定义事件,并传递需要的数据作为参数:

<template><button @click="handleClick">Click me</button>
</template>
<script>
export default {methods: {handleClick() {// 触发自定义事件,并传递数据this.$emit('custom-event', 'Custom event payload')}}
}
</script>

在父组件中,可以使用 v-on 或 @ 来监听子组件触发的自定义事件,并执行相应的处理逻辑:

<template><child-component @custom-event="handleCustomEvent"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue'export default {components: {ChildComponent},methods: {handleCustomEvent(payload) {console.log('Custom event triggered:', payload)// 执行自定义事件的处理逻辑}}
}
</script>

在上述示例中,当子组件内的按钮被点击时,会触发自定义事件 custom-event,并将 ‘Custom event payload’ 作为数据传递给父组件的 handleCustomEvent 方法。父组件中的方法会接收到传递的数据并处理。

未完。。。。。。。。。


🏫博客主页:魔王-T

🥝大鹏一日同风起 扶摇直上九万里

❤️感谢大家点赞👍收藏⭐评论✍️


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

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

相关文章

三、Zookeeper数据模型

目录 1、Znode兼具文件和目录两种特点 2、Znode具有原子性操作

kicad源代码研究:参照Candence实现工程管理

创建工程&#xff1a; 创建工程和打开工程触发事件&#xff1a; KICAD_MANAGER_ACTIONS::newProjectKICAD_MANAGER_ACTIONS::openProjectnewProject和OpenProject事件响应具体实现&#xff0c;在KICAD_MANAGER_CONTROL类中实现&#xff1a; Go( &KICAD_MANAGER_CONTROL::…

前端小记--3.接上篇,级联组件el-cascader回显问题

在使用el-cascader这个级联组件时&#xff0c;组件的值是数组形式&#xff0c;且选中节点时&#xff0c;所返回的值中是包含选中节点的所有父节点的。 比如&#xff0c;我们选中的是“值班点1号-东门”&#xff0c;但组件实际的值是[‘值班点1号’,‘值班点1号-东门’]&#x…

[PyTorch][chapter 4][李宏毅深度学习][Gradient Descent]

前言&#xff1a; 目录: 1: 梯度下降原理 2: 常见问题 3&#xff1a; 梯度更新方案 4&#xff1a; 梯度下降限制 一 梯度下降原理 机器学习的目标找到最优的参数,使得Loss 最小 为什么顺着梯度方向loss 就能下降了。主要原理是泰勒公式。 假设损失函数为 忽略二阶导数, 当 …

分享几个电视颜色测试图形卡

介绍 本文分享几个常见的电视颜色测试图形卡和一段matlab程序&#xff0c;完成JPG转FPGA烧写文件&#xff0c;便于把彩色图片预装载到FPGA内。 电视颜色测试图形卡 一种专业检测电视显示效果的工具。它通常由一张卡片和一些色块组成&#xff0c;可以根据标准色彩空间和颜色渐…

语义分割网络FCN

语义分割是一种像素级的分类&#xff0c;输出是与输入图像大小相同的分割图&#xff0c;输出图像的每个像素对应输入图像每个像素的类别&#xff0c;每一个像素点的灰度值都是代表当前像素点属于该类的概率。 语义分割任务需要解决的是如何把定位和分类这两个问题一起解决&…

ubuntu使用ffmpeg录屏(播放黑屏问题解决)

linux发行版下要使用ffmpeg录屏, 只需要apt安装一下ffmpeg sudo apt install ffmpeg 然后使用常见录屏参数进行录屏即可 ffmpeg -video_size 1920x1080 -f x11grab -draw_mouse 1 -i :0.00,0 -r 30.0 -profile:v high444 -level 5.1 -pix_fmt yuv420p -preset:v ultr…

代码随想录算法训练营第四十三天 _ 动态规划_416.分割等和子集、1049.最后一块石头的重量II。

学习目标&#xff1a; 动态规划五部曲&#xff1a; ① 确定dp[i]的含义 ② 求递推公式 ③ dp数组如何初始化 ④ 确定遍历顺序 ⑤ 打印递归数组 ---- 调试 引用自代码随想录&#xff01; 60天训练营打卡计划&#xff01; 学习内容&#xff1a; 416.分割等和子集 该题目可以等…

聊聊tomcat的keepAlive参数

序 本文主要研究一下tomcat的keepAlive参数 maxKeepAliveRequests org/apache/tomcat/util/net/AbstractEndpoint.java /*** Max keep alive requests*/private int maxKeepAliveRequests100; // as in Apache HTTPD serverpublic int getMaxKeepAliveRequests() {// Disabl…

嘉里大荣物流与极智嘉再度携手,合作助力物流服务高效升级

近日&#xff0c;全球仓储机器人引领者极智嘉(Geek)与3PL知名企业嘉里大荣物流联合宣布&#xff0c;双方再度携手&#xff0c;6周内共建全新自动化订单履行中心&#xff0c;赋能国际时尚运动品牌New Balance加速B2B和B2C订单交付&#xff0c;为其客户提供更高效便捷的物流服务。…

江科大STM32学习笔记(上)

STM32F103xx 前言外设篇GPIO输出GPIO位结构GPIO模式外设的GPIO配置查看实战1&#xff1a; 如何进行基本的GPIO输入输出 OLED显示屏及调试Keil的调试模式演示 EXTI外部中断NVIC基本结构EXTI结构代码实战2&#xff1a;如何使用中断和对射式红外传感器&#xff06;旋转编码器 TIM&…

【flink番外篇】1、flink的23种常用算子介绍及详细示例(1)- map、flatmap和filter

Flink 系列文章 1、Flink 专栏等系列综合文章链接 文章目录 Flink 系列文章一、Flink的23种算子说明及示例1、maven依赖2、java bean3、map4、flatmap5、Filter 本文主要介绍Flink 的3种常用的operator&#xff08;map、flatmap和filter&#xff09;及以具体可运行示例进行说明…

Mysql的索引详解

1.索引的分类 1.按照功能来分&#xff0c;可以分为主键索引、唯一索引、普通索引、全文索引 2.按照索引字段个数来分&#xff0c;可以分为单列索引、联合索引 3.按照物理实现方式来分&#xff0c;可以聚簇索引、非聚簇索引 2.适合添加索引的场景 1.具有唯一性约束的字段。 2…

医药行业:轻松学会超低温冰箱技能

超低温冰箱在医疗、科研和生物领域中扮演着至关重要的角色&#xff0c;用于存储和保护对温度极为敏感的样品和药品。 然而&#xff0c;由于这些冰箱内的温度波动可能导致样品的损坏&#xff0c;因此对超低温冰箱的监控变得至关重要。 客户案例 医疗研究机构 上海某医疗研究机…

YOLOv7独家原创改进:创新自研CPMS注意力,多尺度通道注意力具+多尺度深度可分离卷积空间注意力,全面升级CBAM

💡💡💡本文自研创新改进:自研CPMS, 多尺度通道注意力具+多尺度深度可分离卷积空间注意力,全面升级CBAM 1)作为注意力CPMS使用; 推荐指数:五星 CPMS | 亲测在多个数据集能够实现涨点,对标CBAM。 收录 YOLOv7原创自研 https://blog.csdn.net/m0_63774211/ca…

外包干了4年,技术退步太明显了。。。。。

先说一下自己的情况&#xff0c;本科生生&#xff0c;18年通过校招进入武汉某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年国庆&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测…

Docker容器(一)概述

一、虚拟化概述 1.1引⼊虚拟化技术的必要性 服务器只有5%的时间是在⼯作的&#xff1b;在其它时间服务器都处于“休眠”状态. 虚拟化前 每台主机⼀个操作系统; 软硬件紧密结合; 在同⼀个主机上运⾏多个应⽤程序通常会遭遇冲突; 系统的资源利⽤率低; 硬件成本⾼昂⽽且不够灵活…

金蝶云星空单据体明细权限和表单插件操作事件的先后顺序

文章目录 金蝶云星空单据体明细权限和表单插件操作事件的先后顺序顺序说明结论 金蝶云星空单据体明细权限和表单插件操作事件的先后顺序 顺序说明 先分录菜单单击事件EntryBarItemClick 再验权 后表单操作执行事件BeforeDoOperation 结论 如果是需要鉴权通过才允许操作的逻辑…

SELinux refpolicy详解(10)

接前一篇文章:SELinux refpolicy详解(9) 三、refpolicy内容详解 上一回(上几回)讲解完了refpolicy源码根目录下的build.conf文件。本回继续讲解源码根目录下的其它文件。第三个来讲解在README文件中提到的INSTALL文件。 3. INSTALL 文件路径:refpolicy源码根目录/INST…

万界星空科技仓库管理wms系统

企业在管理库存时&#xff0c;尤其是生产制造企业&#xff0c;使用传统方式比如纸笔、Excel 管理库存&#xff0c;由于工具和信息化存在局限&#xff0c;导致在管理库存时出现如下问题&#xff1a; 1、通过纸笔记录出入库申请&#xff0c;人为手动计算易出错&#xff0c;数据易…