Vue之事件绑定（初识Vue事件）

目录

一、Vue事件绑定-介绍

1.概念

2.特点

3.好处

4.功能

5.应用

二、Vue事件绑定-使用

1.v-on

2.绑定事件的基本使用

3.绑定事件参数传递

4.绑定事件的修饰符

三、实例

1.增加计数器

2.删除列表项

四、总结

一、Vue事件绑定-介绍

Vue 的事件绑定是指通过 Vue 提供的 v-on 指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。

1.概念

事件绑定是指将 DOM 事件与 Vue 实例中的方法或表达式进行关联，使得当特定事件被触发时，可以执行指定的操作。

2.特点

  • 简洁易用：通过 v-on 指令可以轻松地实现事件绑定，语法简洁清晰。
  • 强大灵活：支持监听各种 DOM 事件，如点击、鼠标移入、键盘输入等，同时也支持自定义事件。
  • 数据响应：事件绑定可以直接调用 Vue 实例中的方法，从而实现对数据的响应式更新。
  • 支持事件修饰符：Vue 提供了一些事件修饰符，如 .stop、.prevent、.capture、.self 等，用于在事件处理中进行额外的控制。

3.好处

  • 提高开发效率：通过事件绑定，开发者可以快速实现对用户交互行为的响应，从而提高开发效率。
  • 代码可维护性：将事件处理逻辑集中在 Vue 实例中，使得代码结构更清晰，易于维护和管理。
  • 实现交互功能：事件绑定是实现用户交互功能的关键，可以实现诸如按钮点击、表单提交、页面跳转等功能。

4.功能

  • 监听 DOM 事件：通过 v-on 指令监听 DOM 事件，如点击、鼠标移入、键盘输入等。
  • 执行方法或表达式：当事件被触发时，执行指定的方法或 JavaScript 表达式。
  • 支持事件修饰符：Vue 提供了一些事件修饰符，用于在事件处理中进行额外的控制，如阻止默认行为、停止事件冒泡等。

5.应用

  • 监听按钮点击事件，执行相应的操作，如提交表单、打开弹窗等。
  • 监听表单输入事件，实现实时搜索功能或表单验证。
  • 监听键盘事件，实现键盘快捷键操作。
  • 监听鼠标移入移出事件，实现菜单展开收起等功能。
  • 监听自定义事件，实现组件之间的通信与协作。

二、Vue事件绑定-使用

1.v-on

在Vue中，可以使用 v-on 指令来绑定事件监听器，从而在触发特定事件时执行相应的方法。

基本语法是：

<element v-on:事件名="method"></element>

其中 事件名 是要监听的事件名称，例如 click、mouseover、input 等，而 method 是在触发事件时要执行的方法名，这个方法需要在 Vue 实例中定义。

例如，监听点击事件并执行 handleClick 方法：

<button v-on:click="handleClick">点击我</button>

在 Vue 实例中，需要定义 handleClick 方法：

new Vue({el: '#app',methods: {handleClick() {alert('按钮被点击了！');}}
});

除了直接绑定方法，也可以在 v-on 指令中直接使用 JavaScript 表达式：

<button v-on:click="counter += 1">增加计数器</button>

这里 counter += 1 是一个 JavaScript 表达式，会在按钮点击时执行。

另外，也可以简写 v-on:事件名 为 @事件名，例如：

<button @click="handleClick">点击我</button>

这样就更加简洁。

总之，v-on 指令用于监听 DOM 事件，触发时执行指定的方法或 JavaScript 表达式。

2.绑定事件的基本使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box {width: 100px;height: 100px;background-color: orange;margin-top: 50px;}</style>
</head><body><div id="app"><!--完整写法--><div class="box" v-on:click="divClick"></div><!--语法糖写法--><div class="box" @click="divClick"></div><!--绑定的方法位置，也可以写成一个表达式（不常用）--><h2>{{counter}}</h2><button @click="increment">+1</button><button @click="counter++">+1</button><!--绑定其他方法--><!-- <div class="box" @mousemove="divMousemove"></div> --><div class="box"  @click="divClick" @mousemove="divMousemove"></div><!-- <div class="box" v-on = "{click:divClick,mousemove:divMousemove}"></div> --><!-- <div class="box" @= "{click:divClick,mousemove:divMousemove}"></div> --></div><script src="../lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {counter: 0}},methods: {divClick() {console.log("divClick");},increment() {this.counter++},decrement() {this.counter--},divMousemove(){console.log("divMousemove");}}})app.mount("#app")</script>
</body></html>

3.绑定事件参数传递

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><!--传递event对象--><button @click="btnClick">按钮1</button><!--只有自己的参数 --><button @click="btn2Click('why',age)">按钮2</button><!--自己的参数和event对象--><!--在模板中想要明确的获取event对象；$event--><button @click="btn3Click('why',age,$event)">按钮3</button></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue",age: 18}},methods: {//1.默认参数:event对象// 总结：如果在绑定事件的时候，没有传递任何的参数，那么event对象会被默认传递进来btnClick(event) {console.log("brnClick:", event);},//2.传递参数btn2Click(name, age) {console.log("btn2Click:", name, age);},//2.明确参数+event对象btn3Click(name, age, event) {console.log("btn2Click:", name, age, event);}}})app.mount("#app")</script>
</body></html>

4.绑定事件的修饰符

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.box{width: 100px;height: 100px;background-color: orange;}</style>
</head><body><div id="app"><div class="box" @click = "divClick"><button @click.stop = "btnClick">按钮</button></div></div><script src="./lib/vue.js"></script><script>const app = Vue.createApp({//data: option apidata: function () {return {message: "Hello Vue"}},methods:{btnClick(event){console.log("btnClick");},divClick(){console.log("divClick");}}})app.mount("#app")</script>
</body></html>

三、实例

1.增加计数器

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 事件绑定实例</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app"><!-- 点击按钮触发事件 --><button @click="increaseCounter">增加计数器</button><!-- 显示计数器的值 --><p>计数器的值为: {{ counter }}</p></div><!-- Vue 实例 --><script>new Vue({el: '#app',data: {counter: 0 // 初始化计数器值为 0},methods: {// 点击按钮时执行的方法，用于增加计数器的值increaseCounter() {this.counter++; // 计数器加 1}}});</script>
</body>
</html>

在这个例子中，我们创建了一个 Vue 实例，并在 data 中定义了一个名为 counter 的数据属性，初始值为 0。然后，我们使用 methods 定义了一个方法 increaseCounter()，当按钮被点击时，这个方法会被调用，将计数器的值加 1。在 HTML 中，我们使用 @click 缩写形式来监听按钮的点击事件，并调用 increaseCounter() 方法。最后，我们使用双花括号语法 {{ counter }} 来显示计数器的值。

2.删除列表项

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vue 事件绑定实例</title><!-- 引入 Vue.js --><script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body><div id="app"><ul><!-- 遍历列表数据，每个列表项都有一个删除按钮 --><li v-for="(item, index) in items" :key="index"><!-- 显示列表项内容 -->{{ item }}<!-- 删除按钮，点击时触发 deleteItem 方法 --><button @click="deleteItem(index)">删除</button></li></ul><!-- 输入框和添加按钮 --><input type="text" v-model="newItem"><button @click="addItem">添加</button></div><!-- Vue 实例 --><script>new Vue({el: '#app',data: {items: ['Item 1', 'Item 2', 'Item 3'], // 初始列表数据newItem: '' // 输入框中的新项},methods: {// 添加新项到列表addItem() {if (this.newItem !== '') {this.items.push(this.newItem); // 将新项添加到列表this.newItem = ''; // 清空输入框}},// 删除指定索引的列表项deleteItem(index) {this.items.splice(index, 1); // 删除指定索引的列表项}}});</script>
</body>
</html>

在这个例子中，我们依然创建了一个 Vue 实例，但这次我们在 data 中定义了一个名为 items 的数组，用于存储列表项的数据。同时，我们也定义了一个名为 newItem 的数据属性，用于存储用户在输入框中输入的新项。在 methods 中，我们定义了两个方法，addItem() 用于添加新项到列表，deleteItem(index) 用于删除指定索引的列表项。

在 HTML 中，我们使用 v-for 指令遍历 items 数组，为每个列表项显示内容，并在每个列表项后面添加一个删除按钮。点击删除按钮时，会触发 deleteItem(index) 方法，传入对应的索引值来删除列表项。同时，我们还添加了一个输入框和一个添加按钮，用于用户输入新项并将其添加到列表中。

四、总结

当在 Vue 中使用事件绑定时，通常会使用 v-on 或简写形式 @ 来监听 DOM 事件，并在触发事件时执行相应的方法。以下是关于 Vue 事件绑定的总结：

  1. 监听事件：使用 v-on 指令来监听 DOM 事件，语法为 v-on:event，其中 event 是要监听的事件名，例如 click、mouseover 等。也可以使用简写形式 @event。

  2. 执行方法：在事件监听器中指定要执行的方法名。这些方法通常定义在 Vue 实例的 methods 属性中。

  3. 传递参数：可以在触发事件时传递额外的参数给事件处理函数。这些参数可以通过 $event 访问事件对象，也可以直接传递其他数据。

  4. 方法定义：在 Vue 实例的 methods 对象中定义方法，以供事件监听器调用。这些方法可以访问 Vue 实例的数据、计算属性和其他方法。

  5. 动态参数：可以使用动态参数来动态绑定事件处理函数。这在需要动态决定要调用的方法时很有用。

  6. 事件修饰符：Vue 提供了一些事件修饰符，用于处理事件的默认行为或者增强事件的功能，例如 .stop、.prevent、.capture 等。

  7. 按键修饰符：除了常规的 DOM 事件，Vue 还支持按键修饰符，例如 @keyup.enter 用于监听回车键的按下事件。

  8. 自定义事件：除了监听 DOM 事件，Vue 还支持自定义事件。可以使用 $emit 方法在子组件中触发自定义事件，然后在父组件中使用 v-on 或 @ 来监听并执行相应的方法。

综上所述，Vue 的事件绑定机制提供了丰富的功能和灵活性，使开发者能够方便地处理用户交互行为，并实现各种复杂的应用逻辑。

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

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

相关文章

python使用tkinter和ttkbootstrap制作UI界面（二）

python使用tkinter和ttkbootstrap制作UI界面（二）

这次讲解UI界面常用的主键&#xff0c;延续上文的框架进行编写&#xff0c;原界面如下&#xff1a; Combobox组件应用&#xff08;下拉框&#xff09; """Combobox组件"""global comvalue_operatorcomvalue_operator tk.StringVar()value_ope…
阅读更多...
【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活

【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活

【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活 文章目录 【论文阅读】用于遥感弱监督语义分割的对比标记和标签激活一、介绍二、联系工作三、方法3.1 对比token学习模块&#xff08;CTLM&#xff09;3.2 Class token对比学习3.3 标签前景激活模块 四、实验结果 Cont…
阅读更多...
【云计算】云数据中心网络（七）：负载均衡

【云计算】云数据中心网络（七）：负载均衡

《云网络》系列&#xff0c;共包含以下文章&#xff1a; 云网络是未来的网络基础设施云网络产品体系概述云数据中心网络&#xff08;一&#xff09;&#xff1a;VPC云数据中心网络&#xff08;二&#xff09;&#xff1a;弹性公网 IP云数据中心网络&#xff08;三&#xff09;…
阅读更多...
日常小bug

日常小bug

1.mybatis-config.xml中记载sql的映射文件的方式 <mappers><!-- 方法一&#xff1a;使用xml文件进行注册,注意&#xff1a;这里是斜线--><mapper resource"com/dao/UserMapper.xml"/><!-- 方法二&#xff1a;使用class进行注册&#xff0c;注…
阅读更多...
C语言-单片机：STM32程序烧录的几种方法

C语言-单片机：STM32程序烧录的几种方法

STM32微控制器提供了多种程序烧录&#xff08;也称为编程或固件更新&#xff09;方式&#xff0c;这些方法允许用户将编译后的程序代码&#xff08;通常为HEX或BIN格式&#xff09;下载到MCU的闪存中。以下是几种常见的STM32程序烧录方式&#xff1a; ST-LINK&#xff1a; ST-L…
阅读更多...
在Ubuntu 22.04上安装配置VNC实现可视化

在Ubuntu 22.04上安装配置VNC实现可视化

前面安装的部分可以看我这篇文章 在Ubuntu 18.04上安装配置VNC实现Spinach测试可视化_ubuntu18开vnc-CSDN博客 命令差不多一样&#xff1a; sudo apt update sudo apt install xfce4 xfce4-goodies sudo apt install tightvncserver这个时候就可以启动server了 启动server&…
阅读更多...
Linux RHCE练习之远程连接服务实战

Linux RHCE练习之远程连接服务实战

Linux RHCE练习之远程连接服务实战 要求 主机一 主机名&#xff1a;server.example.comip: 172.25.254.100建立用户timinglee&#xff0c;其密码为timinglee 主机二 主机名&#xff1a;client.example.comip: 172.25.254.200 实现 主机一实现 [rootserver100 ~]# hostn…
阅读更多...
C++：map和set的使用

C++：map和set的使用

一、关联式容器介绍 在学习map和set之前&#xff0c;我们接触到的容器有&#xff1a;vector、list、stack、queue、priority_queue、array&#xff0c;这些容器统称为序列式容器&#xff0c;因为其底层为线性序列的数据结构&#xff0c;里面存储的是元素本身。 关联式容器也是用…
阅读更多...
解锁PDF潜能：一站式PDF处理工具，让文件管理更高效！

解锁PDF潜能：一站式PDF处理工具，让文件管理更高效！

在这个数字化时代&#xff0c;PDF文件因其便携性和安全性成为了我们日常工作和学习中不可或缺的一部分。但你是否曾遇到过PDF文件加密、需要合并拆分、或转换格式的难题&#xff1f;别担心&#xff0c;今天我们将为你介绍一款功能强大的PDF处理工具&#xff0c;它将彻底改变你对…
阅读更多...
李沐-16 PyTorch 神经网络基础【动手学深度学习v2】

李沐-16 PyTorch 神经网络基础【动手学深度学习v2】

注&#xff1a;1. 沐神对应章节视频出处 2.代码使用Jupyter Notebook运行更方便 3.文章笔记出处 一、层和块 层&#xff1a;层&#xff08;1&#xff09;接受一组输入&#xff0c; &#xff08;2&#xff09;生成相应的输出&#xff0c; &#xff08;3&#xff09;由一组可调整…
阅读更多...
【Camera Framework笔记】二、Camera Native Framework架构①

【Camera Framework笔记】二、Camera Native Framework架构①

一、总体架构&#xff1a; service -> opencamera -> client&#xff08;api1/api2&#xff09; -> device3&#xff08;hal3&#xff09; | | &#xff08;不opencamera…
阅读更多...
Linux网络编程--网络传输

Linux网络编程--网络传输

Linux网络编程--网络传输 Linux网络编程TCP/IP网络模型网络通信的过程局域网通信跨网络通信&#xff1a;问题总结&#xff1a; Linux网络编程 TCP/IP网络模型 发送方&#xff08;包装&#xff09;&#xff1a; 应用层&#xff1a;HTTP HTTPS SSH等 —> 包含数据&#xff0…
阅读更多...
终极版商城平台 涵盖虚拟商品全功能的商城平台 全能商城小程序 智慧商城系统 全品类百货商城服务

终极版商城平台 涵盖虚拟商品全功能的商城平台 全能商城小程序 智慧商城系统 全品类百货商城服务

终极版商城平台 涵盖虚拟商品全功能的商城平台 全能商城小程序 智慧商城系统 全品类百货商城服务 含uniapp源码 全功能商城系统&#xff1a;完美运营版&#xff0c;简洁无冗余 这款商城系统完美集成了拼团、团购、秒杀、积分兑换、砍价活动&#xff0c;同时支持实物商品与虚拟…
阅读更多...
2010年认证杯SPSSPRO杯数学建模B题(第一阶段)交通拥堵问题全过程文档及程序

2010年认证杯SPSSPRO杯数学建模B题(第一阶段)交通拥堵问题全过程文档及程序

2010年认证杯SPSSPRO杯数学建模 交通拥堵问题 B题 Braess 悖论 原题再现&#xff1a; Dietrich Braess 在 1968 年的一篇文章中提出了道路交通体系当中的Braess 悖论。它的含义是&#xff1a;有时在一个交通网络上增加一条路段&#xff0c;或者提高某个路段的局部通行能力&a…
阅读更多...
开发语言漫谈-Vue

开发语言漫谈-Vue

Vue严格说来不是一门语言&#xff0c;它是Javascript的一个框架。如同Spring是Java语言的一个框架。只是当下为了开发效率&#xff0c;很少有人使用原生Javascript&#xff0c;多少得选择某种框架。类似的框架实在太多&#xff0c;bootstrap、layui、Angular、jQuery、react、E…
阅读更多...
深度学习知识点：循环神经网络（RNN）、长短期记忆网络（LSTM）、门控循环单元（GRU）

深度学习知识点：循环神经网络（RNN）、长短期记忆网络（LSTM）、门控循环单元（GRU）

深度学习知识点&#xff1a;循环神经网络&#xff08;RNN&#xff09;、长短期记忆网络&#xff08;LSTM&#xff09;、门控循环单元&#xff08;GRU&#xff09; 前言循环神经网络&#xff08;RNN&#xff09;RNNs&#xff08;循环神经网络&#xff09;训练和传统ANN&#xff…
阅读更多...
VulBG: 构建行为图加强基于深度学习的漏洞检测模型

VulBG: 构建行为图加强基于深度学习的漏洞检测模型

近年来&#xff0c;人们提出了基于深度学习&#xff08;DL&#xff09;的漏洞检测系统&#xff0c;用于从源代码中自动提取特征。这些方法在合成数据集上可以实现理想的性能&#xff0c;但在检测真实世界的漏洞数据集时&#xff0c;准确率却大幅下降。此外&#xff0c;这些方法…
阅读更多...
OpenHarmony网络协议通信—nanopb

OpenHarmony网络协议通信—nanopb

简介 nanopb是一种小代码量的协议缓冲区实现&#xff0c;适用于任何内存受限的系统。 下载安装 直接在OpenHarmony-SIG仓中搜索nanopb并下载。 使用说明 以OpenHarmony 3.1 Beta的rk3568版本为例 将下载的Nanopb库代码存在以下路径&#xff1a;./third_party/nanopb 修改添…
阅读更多...
docker安装并跑通QQ机器人实践（3）-bs-nonebot搭建

docker安装并跑通QQ机器人实践（3）-bs-nonebot搭建

NoneBot2 是一个现代、跨平台、可扩展的 Python 聊天机器人框架&#xff08;下称 NoneBot&#xff09;&#xff0c;它基于 Python 的类型注解和异步优先特性&#xff08;兼容同步&#xff09;&#xff0c;能够为你的需求实现提供便捷灵活的支持。同时&#xff0c;NoneBot 拥有大…
阅读更多...
如何在 Netlify 上手动部署 React 和 TypeScript 项目

如何在 Netlify 上手动部署 React 和 TypeScript 项目

在本教程中&#xff0c;我将教你如何使用 Vite 在 Netlify 上手动部署 React 和 TypeScript 项目。我将向你展示一些快速简单的步骤&#xff0c;让你的项目能够立即运行。 要跟着本教程操作&#xff0c;有几个先决条件&#xff1a; 一个现有的 React 和 TypeScript 项目&…
阅读更多...
最新文章

Copyright @ 2022~2023