事件监听(v-on:)

在前端开发中，我们需要经常和用户交互。
- 这个时候，我们就必须监听用户发生的事件，比如点击、拖拽、键盘事件等等。
- 在Vue中如何监听事件呢？使用v-on指令。
v-on介绍
- 作用：绑定事件监听器。
- 缩写：@
- 预期：Function | Inline Statement | Object
- 参数：event
下面，我们就具体来学习下v-on的使用。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>01-v-on的基本使用</title>
</head>
<body>
  <div id="app">
    <h2>{
    
    {
    
    counter}}</h2>
    <button v-on:click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    
        counter: 0,
      },
      methods: {
    
    
        increment() {
    
    
          this.counter++;
        },
        decrement() {
    
    
          this.counter--;
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x1UIH9WB-1609521287696)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/1.gif)]

v-on传参数

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02-v-on的参数问题</title>
</head>
<body>
  <div id="app">
    <!-- 如果该方法不需要额外参数，那么方法后面的()可以不添加。 -->
    <button @click="btn1Click">按钮1</button>

    <!-- 在定义事件时，写方法时省略了小括号，但是方法本身需要一个参数，这个时候，Vue会默认
    将浏览器生成的event事件对象作为参数传递到方法 -->
    <button @click="btn2Click">按钮2</button>

    <!-- 方法定义时，我们需要event对象，同时又需要其他参数，如何手动获取浏览器的event对象：$event -->
    <button @click="btn3Click(123,$event)">按钮3</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    

      },
      methods: {
    
    
        btn1Click() {
    
    
          console.log("btn1Click");
        },
        btn2Click(abc) {
    
    
          console.log(abc);
        },
        btn3Click(abc, event){
    
    
          console.log(abc, event);
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l8VU2tsu-1609521287698)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/2.gif)]

v-on修饰符

在某些情况下，我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件：
- .stop - 调用 event.stopPropagation()。
- .prevent - 调用 event.preventDefault()。
- .capture - 添加事件侦听器时使用 capture 模式。
- .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
- .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
- .native - 监听组件根元素的原生事件。
- .once - 只触发一次回调。
- .left - (2.2.0) 只当点击鼠标左键时触发。
- .right - (2.2.0) 只当点击鼠标右键时触发。
- .middle - (2.2.0) 只当点击鼠标中键时触发。
- .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
当我们如下写代码的时候会触发冒泡事件：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-v-on的修饰符</title>
</head>
<body>
  <div id="app">
    <div @click="divClick">
      div区域
      <button @click="buttonClick">按钮</button>
    </div>
  </div>
  
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    

      },
      methods: {
    
    
        buttonClick() {
    
    
          console.log("button");
        },
        divClick() {
    
    
          console.log("div");
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AHJ6y6yx-1609521287699)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/3.gif)]

点击按钮触发buttonClick事件的同时也触发了它的父元素的divClick事件，如果我们不想触发冒泡事件，只需要加一个.stop修饰符：

<button @click.stop="buttonClick">按钮</button>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Rkmj4SmA-1609521287701)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/4.gif)]

我们也可以用.prevent修饰符来阻止默认操作：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-v-on的修饰符</title>
</head>
<body>
  <div id="app">
    <form action="http://www.baidu.com">
      <input type="submit" value="提交" @click.prevent="submitClick">
    </form>
  </div>
  
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {

      },
      methods: {
        submitClick() {
          console.log("自己提交");
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2UDw7h6e-1609521287702)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/5.gif)]

如果我们不设置prevent修饰符的话，会默认进行提交表单操作：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BBLKPHWf-1609521287704)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/6.gif)]

当我们想只当事件是从特定键触发时才触发回调：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>03-v-on的修饰符</title>
</head>
<body>
  <div id="app">
    <input type="text" @keyup.enter="keyup">
  </div>
  
  <script src="../js/vue.js"></script>
  <script>
    const app = new Vue({
    
    
      el: '#app',
      data: {
    
    

      },
      methods: {
    
    
        keyup() {
    
    
          console.log("keyup");
        }
      }
    })
  </script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J5dOCNsn-1609521287706)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/7.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zW801MOW-1609521287708)(/Users/mac/Desktop/前端学习笔记/vue/vue笔记四/8.gif)]

回顾

Vue笔记一——Vue安装与体验
 Vue笔记二——Vue声明周期与模板语法
 Vue笔记三——计算属性(computed)

Vue笔记四——事件监听的使用

文章目录

事件监听(v-on:)

v-on传参数

v-on修饰符

回顾

猜你喜欢