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

最新推荐文章于 2024-06-11 00:58:43 发布

码农白衣

最新推荐文章于 2024-06-11 00:58:43 发布

阅读量1.5k

点赞数 42

分类专栏： Vue 前端知识 html 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_73916603/article/details/137974016

版权

前端知识同时被 3 个专栏收录

54 篇文章 0 订阅

订阅专栏

html

33 篇文章 0 订阅

订阅专栏

Vue

12 篇文章 0 订阅

订阅专栏

一、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 事件绑定的总结：

监听事件：使用 v-on 指令来监听 DOM 事件，语法为 v-on:event，其中 event 是要监听的事件名，例如 click、mouseover 等。也可以使用简写形式 @event。
执行方法：在事件监听器中指定要执行的方法名。这些方法通常定义在 Vue 实例的 methods 属性中。
传递参数：可以在触发事件时传递额外的参数给事件处理函数。这些参数可以通过 $event 访问事件对象，也可以直接传递其他数据。
方法定义：在 Vue 实例的 methods 对象中定义方法，以供事件监听器调用。这些方法可以访问 Vue 实例的数据、计算属性和其他方法。
动态参数：可以使用动态参数来动态绑定事件处理函数。这在需要动态决定要调用的方法时很有用。
事件修饰符：Vue 提供了一些事件修饰符，用于处理事件的默认行为或者增强事件的功能，例如 .stop、.prevent、.capture 等。
按键修饰符：除了常规的 DOM 事件，Vue 还支持按键修饰符，例如 @keyup.enter 用于监听回车键的按下事件。
自定义事件：除了监听 DOM 事件，Vue 还支持自定义事件。可以使用 $emit 方法在子组件中触发自定义事件，然后在父组件中使用 v-on 或 @ 来监听并执行相应的方法。

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

码农白衣

关注

42
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
Vue之事件绑定（初识Vue事件）

Vue 的事件绑定是指通过 Vue 提供的v-on指令来监听 DOM 事件，当特定事件被触发时执行相应的方法或表达式。事件绑定在 Vue 中是一种重要的交互机制，它使得开发者可以轻松地响应用户的交互行为，并进行相应的逻辑处理。当在 Vue 中使用事件绑定时，通常会使用v-on或简写形式来监听 DOM 事件，并在触发事件时执行相应的方法。监听事件：使用v-on指令来监听 DOM 事件，语法为v-on:event，其中event是要监听的事件名，例如clickmouseover等。也可以使用简写形式。
复制链接

扫一扫

专栏目录