Vue.js学习笔记——4.v-on指令的使用_js中v-on指令的作用-CSDN博客

本文链接：https://blog.csdn.net/DDDDDecade/article/details/109865195

v-on指令的使用

一、v-on的基本使用
二、v-on的参数传递
三、v-on的修饰符

一、v-on的基本使用

v-on用于监听用户发生的事件，如点击、拖拽、键盘事件等
作用：绑定事件监听器
缩写：@
语法：

<element v-on:event></element>
<element @event></element>

举例：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue 计数器</title>
</head>
<body>
    <div id="counter">
        <h2>计数器：{{num}}</h2>
        <button @click="num++">+</button>
        <button @click="sub">-</button>
    </div>

    <script src="../js/vue.js"></script>
    <script>
        let app = new Vue({
            el:"#counter",
            data:{
                num:0
            },
            methods:{
                sub:function () {
                    this.num--;
                    console.log("sub已执行");
                }
            }
        })
    </script>
</body>
</html>

两个button都通过v-on绑定了鼠标点击事件click，第一个button传入的是一个简单的表达式，第二个button传入了在methods中定义的函数，点击按钮就可以增减num。
执行结果：
计数器
注意在methods和computed中获取data里的属性时要使用this

二、v-on的参数传递

当通过methods中定义方法供v-on调用时，需要注意参数问题：

如果该方法本身不需要额外参数，那么方法后的（）可以不加，但如果方法本身有一个参数并且省略了（），那么会默认将原生事件event参数传递进去；
如果需要同时传入某个参数和event时，可以通过$event传入事件。
举例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 事件调用方法没有参数 -->
  <button @click="btn1Click()">按钮1.1</button>
  <button @click="btn1Click">按钮1.2</button>
  <!-- 事件有一个参数 -->
  <button @click="btn2Click('btn2Click')">按钮2.1</button>
  <!-- 事件有一个参数并且（）没有省略，会传入undefined -->
  <button @click="btn2Click()">按钮2.2</button>
  <!-- 事件有一个参数并且（）省略，会传入event对象 -->
  <button @click="btn2Click">按钮2.3</button>
  <!-- 事件同时需要event对象和其他参数，需要用$event手动获取 -->
  <button @click="btn3Click('btn3Click',$event)">按钮3</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:"#app",
    data:{
      message:"你好啊"
    },
    methods:{
      btn1Click:function () {
        console.log('btn1Click');
      },
      btn2Click:function (a) {
        console.log(a);
      },
      btn3Click:function (a,event) {
        console.log(a,event);
      }
    }
  })
</script>
</body>
</html>

执行结果：依次点击按钮
v-on的参数传递
在方法不需要参数时，（）可以省略，但在有参数时（）加不加是有区别的

三、v-on的修饰符

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop 停止冒泡调用event.stopPropagation()
.prevent 阻止默认行为调用event.preventDefault()
.{keyCode|keyAlias} 键修饰符当特定键触发时才触发回调
.once 只触发一次回调

举例：

<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<button @click.prevent></button>
<!-- 修饰符串联 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符.键别名 -->
<button @keyup.enter="doThis"></button>
<!-- 键修饰符.键代码（ASCII码） -->
<button @keyup.13="doThis"></button>
<!-- 点击只会触发一次 -->
<button @click.once="doThis"></button>