v-on绑定事件复习

usrname为username

已于 2023-07-17 17:07:07 修改

阅读量126

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-17 17:06:52 首次发布

本文链接：https://blog.csdn.net/weixin_54327001/article/details/131770234

版权

在前端开发中，我们需要经常和用户进行各种各样的交互：
 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等
 在 Vue 中如何监听事件呢？使用 v-on 指令。

 参数： event
 修饰符：
 .stop - 调用 event.stopPropagation() 。
 .prevent - 调用 event.preventDefault() 。
 .capture - 添加事件侦听器时使用 capture 模式。
 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
 .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
 .once - 只触发一次回调。
 .left - 只当点击鼠标左键时触发。
 .right - 只当点击鼠标右键时触发。
 .middle - 只当点击鼠标中键时触发。
 .passive - { passive: true } 模式添加侦听器

1.绑定事件基本使用

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h2 :name="name" :age="age" :height="height">Hello World</h2>

      <!-- v-bind绑定对象: 给组件传递参数 -->
      <h2 v-bind="infos">Hello Bind</h2>
    </div>

    <script src="../lib/vue.js"></script>
    <script>
      // 1.创建app
      const app = Vue.createApp({
        // data: option api
        data: function () {
          return {
            infos: { name: "why", age: 18, height: 1.88, address: "广州市" },

            name: "why",
            age: 18,
            height: 1.88,
          };
        },
      });

      // 2.挂载app
      app.mount("#app");
    </script>
  </body>
</html>

2.v-on 参数传递

 当通过 methods 中定义方法，以供 @click 调用时，需要注意参数问题：
 情况一：如果该方法不需要额外参数，那么方法后的 () 可以不添加。
 但是注意：如果方法本身中有一个参数，那么会默认将原生事件 event 参数传递进去
 情况二：如果需要同时传入某个参数，同时需要 event 时，可以通过 $event 传入事件。

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

3.v-on 的修饰符

 v-on 支持修饰符，修饰符相当于对事件进行了一些特殊的处理：
 .stop - 调用 event.stopPropagation() 。阻止冒泡
 .prevent - 调用 event.preventDefault() 。阻止默认行为
 .capture - 添加事件侦听器时使用 capture 模式。事件捕获
 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
 .{keyAlias} - 仅当事件是从特定键触发时才触发回调。
 .once - 只触发一次回调。
 .left - 只当点击鼠标左键时触发。
 .right - 只当点击鼠标右键时触发。
 .middle - 只当点击鼠标中键时触发。
 .passive - { passive: true } 模式添加侦听器

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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>
    // 1.创建app
    const app = Vue.createApp({
      // data: option api
      data: function() {
        return {
          message: "Hello Vue"
        }
      },
      methods: {
        btnClick(event) {
          console.log("btnClick")
        },
        divClick() {
          console.log("divClick")
        }
      }
    })
 
    // 2.挂载app
    app.mount("#app")
  </script>
</body>
</html>

usrname为username

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
v-on绑定事件复习

在前端开发中，我们需要经常和用户进行各种各样的交互： 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等 在 Vue 中如何监听事件呢？使用 v-on 指令。 参数： event 修饰符： .stop - 调用 event.stopPropagation()。 .prevent - 调用 event.preventDefault()。 .capture - 添加事件侦听器时使用 capture 模式。
复制链接

扫一扫