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 api
            data: 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 api
            data: 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 api
            data: 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.mfbz.cn/a/558962.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

阿里云ECS服务器安装docker

阿里云ECS服务器安装docker

首先查看阿里云ECS的服务器的版本 cat /etc/redhat-release如果是Alibaba Cloud Linux release 3,请执行以下命令 添加docker-ce的dnf源。 sudo dnf config-manager --add-repohttps://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo安装Alibaba Cloud Linux 3专…
阅读更多...
深度学习每周学习总结P5（运动鞋识别）

深度学习每周学习总结P5（运动鞋识别）

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 | 接辅导、项目定制 –来自百度网盘超级会员V5的分享 目录 0. 总结1. 数据导入及处理部分2. 加载数据集3.模型构建部分3.1 模型构建3.2 公式推导 4. 设置超参…
阅读更多...
小型燃气站3D可视化：打造安全高效的燃气新时代

小型燃气站3D可视化：打造安全高效的燃气新时代

随着科技的不断进步&#xff0c;越来越多的行业开始融入3D可视化技术&#xff0c;燃气行业也不例外。 小型燃气站作为城市燃气供应的重要节点&#xff0c;其安全性和运行效率至关重要。传统的燃气站管理方式往往依赖于人工巡检和纸质记录&#xff0c;这种方式不仅效率低下&…
阅读更多...
开源大数据集群部署（二十一）Spark on yarn 部署

开源大数据集群部署（二十一）Spark on yarn 部署

作者&#xff1a;櫰木 1 spark on yarn安装&#xff08;每个节点&#xff09; cd /root/bigdata/ tar -xzvf spark-3.3.1-bin-hadoop3.tgz -C /opt/ ln -s /opt/spark-3.3.1-bin-hadoop3 /opt/spark chown -R spark:spark /opt/spark-3.3.1-bin-hadoop32 配置环境变量及修改配…
阅读更多...
BFS解决八数码问题-java

BFS解决八数码问题-java

本文主要通过BFS广度优先搜索来解决八数码问题。 文章目录 前言 一、八数码 二、算法思路 1.思路模拟 2.实现思路 三、代码 1.代码如下&#xff1a; 2.读入数据 3.代码运行结果 总结 前言 本文主要通过BFS广度优先搜索来解决八数码问题。 提示&#xff1a;以下是本篇文章正文内…
阅读更多...
有没有手机上使用的库存软件

有没有手机上使用的库存软件

库存软件是一种仓库的信息管理系统&#xff0c;它主要针对出库与入库这些数据进行管理&#xff0c;传统的库存管理都是在电脑上安装一个专门的数据库管理系统进行管理&#xff0c;这也是一种比较成熟的管理方式&#xff0c;那么有没有手机上使用的库存软件。 手机上使用的库存软…
阅读更多...
开发工具——postman使用教程详解

开发工具——postman使用教程详解

一、概念 1、Postman是一款功能强大的网页调试与发送网页HTTP请求的Chrome插件&#xff0c;Postman分为Postman native app和Postman Chrome app两个版本。目前Chrome app已停止维护&#xff0c;官方不推荐使用该版本。 2、官网下载地址&#xff1a;http://www.getpostman.com…
阅读更多...
离线数仓数据导出-hive数据同步到mysql

离线数仓数据导出-hive数据同步到mysql

离线数仓数据导出-hive数据同步到mysql MySQL建库建表数据导出 为方便报表应用使用数据&#xff0c;需将ads各指标的统计结果导出到MySQL数据库中。 datax支持hive同步MySQL&#xff1a;仅仅支持hive存储的hdfs文件导出。所以reader选hdfs-reader&#xff0c;writer选mysql-wri…
阅读更多...
架构师系列-搜索引擎ElasticSearch（十）- 索引别名及重建

架构师系列-搜索引擎ElasticSearch（十）- 索引别名及重建

索引别名 别名&#xff0c;有点类似数据库的视图&#xff0c;别名一般都会和一些过滤条件相结合&#xff0c;可以做到即使是同一个索引上&#xff0c;让不同人看到不同的数据。 别名的作用 在开发中&#xff0c;一般随着业务需求的迭代&#xff0c;较老的业务逻辑就要面临更新…
阅读更多...
架构设计-权限系统之通用的权限系统设计方案

架构设计-权限系统之通用的权限系统设计方案

一个系统&#xff0c;如果没有安全控制&#xff0c;是十分危险的&#xff0c;一般安全控制包括身份认证和权限管理。用户访问时&#xff0c;首先需要查看此用户是否是合法用户&#xff0c;然后检查此用户可以对那些资源进行何种操作&#xff0c;最终做到安全访问。身份认证的方…
阅读更多...
Junit 基础-ApiHug准备-测试篇-009

Junit 基础-ApiHug准备-测试篇-009

&#x1f917; ApiHug {Postman|Swagger|Api...} 快↑ 准√ 省↓ GitHub - apihug/apihug.com: All abou the Apihug apihug.com: 有爱&#xff0c;有温度&#xff0c;有质量&#xff0c;有信任ApiHug - API design Copilot - IntelliJ IDEs Plugin | Marketplace 注解 J…
阅读更多...
STM32直接存储器存取DMA

STM32直接存储器存取DMA

前提知识&#xff1a; 1、STM32F103内部存储器结构以及映射 STM32F103的程序存储器、数据存储器、寄存器和IO端口被组织在同一个4GB的线性地址空间内。数据字节以小端模式存放在存储器中。即低地址中存放的是字数据的低字节&#xff0c;高地址中存放的是字数据的高字节 可访问…
阅读更多...
React间接实现一个动态组件逻辑

React间接实现一个动态组件逻辑

在开发一个浏览器插件的时候&#xff0c;用的plasmo框架和react支持的&#xff0c;里面使用react开发一个菜单功能&#xff0c;但是又不想使用react-router&#xff0c;所以就想着能不能使用一个很简单的方式做一个替代方案&#xff1f;那肯定是可以。 我在引入一个组件后&…
阅读更多...
C语言 | Leetcode C语言题解之第40题组合总和II

C语言 | Leetcode C语言题解之第40题组合总和II

题目&#xff1a; 题解&#xff1a; int** ans; int* ansColumnSizes; int ansSize;int* sequence; int sequenceSize;int** freq; int freqSize;void dfs(int pos, int rest) {if (rest 0) {int* tmp malloc(sizeof(int) * sequenceSize);memcpy(tmp, sequence, sizeof(int…
阅读更多...
Golang | Leetcode Golang题解之第37题解数独

Golang | Leetcode Golang题解之第37题解数独

题目&#xff1a; 题解&#xff1a; func solveSudoku(board [][]byte) {var line, column [9][9]boolvar block [3][3][9]boolvar spaces [][2]intfor i, row : range board {for j, b : range row {if b . {spaces append(spaces, [2]int{i, j})} else {digit : b - 1line…
阅读更多...
如何实现外网访问内网ip？公网端口映射或内网映射来解决

如何实现外网访问内网ip？公网端口映射或内网映射来解决

本地搭建服务器应用&#xff0c;在局域网内可以访问&#xff0c;但在外网不能访问。如何实现外网访问内网ip&#xff1f;主要有两种方案&#xff1a;路由器端口映射和快解析内网映射。根据自己本地网络环境&#xff0c;结合是否有公网IP&#xff0c;是否有路由权限&#xff0c;…
阅读更多...
Vast+产品展厅 | Vastbase G100数据库是什么架构？(1)

Vast+产品展厅 | Vastbase G100数据库是什么架构？(1)

Vastbase G100是海量数据融合了多年对各行业应用场景的深入理解&#xff0c;基于openGauss内核开发的企业级关系型数据库。 了解Vastbase G100的架构&#xff0c;可以帮助您确保数据库系统的高效、可靠和安全运行。 “Vast产品展厅”将分两期&#xff0c;为您详细讲解Vastbas…
阅读更多...
Excel模板导入、导出工具类

Excel模板导入、导出工具类

1.引入maven依赖&#xff0c;利用hutool的excel读取 Hutool-poi对excel读取、写入 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-all</artifactId><version>5.8.16</version></dependency> <depen…
阅读更多...
手写Java设计模式之工厂模式，附源码解读

手写Java设计模式之工厂模式，附源码解读

工厂模式&#xff08;Factory Pattern&#xff09;是 Java 中最常用的设计模式之一&#xff0c;这种类型的设计模式属于创建型模式&#xff0c;它提供了一种创建对象的最佳方式。 工厂模式提供了一种创建对象的方式&#xff0c;而无需指定要创建的具体类。 工厂模式属于创建型…
阅读更多...
智慧园区引领产业智能化升级：科技创新驱动打造智慧化、高效化产业新未来

智慧园区引领产业智能化升级：科技创新驱动打造智慧化、高效化产业新未来

随着全球科技革命的深入推进&#xff0c;以大数据、云计算、物联网、人工智能等为代表的新一代信息技术正深刻改变着传统产业的发展模式。在这一背景下&#xff0c;智慧园区作为产业智能化升级的重要载体和平台&#xff0c;正以其前瞻性的规划、创新的科技和卓越的实践&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站