文章目录

  • 一. 回顾
  • 二. 事件监听
  • 2.1 v-on使用情景
  • 2.2 v-on介绍以及基本使用
  • 2.3 v-on参数传递
  • 2.4 v-on修饰符的使用

一. 回顾

前面学习了Day11——ES6语法补充，今天学习事件监听

二. 事件监听

2.1 v-on使用情景

用户与前端界面进行交互，我们需要监听事件，比如点击、拖拽、键盘事件等等

2.2 v-on介绍以及基本使用

语法：v-on:事件名="处理事件的方法()"（其中的括号()可以要，也可以不要）语法糖：@事件名="处理事件的方法()"

作用：绑定事件监听器

例子：

<body>
<div id="app">
  <h2>{{counter}}</h2>
  <button v-on:click="counter++">+</button>
  <button v-on:click="counter--">-</button>
  <button v-on:click="increment()">+</button>
  <button v-on:click="decrement">-</button>
  <!-- v-on的语法糖是使用@-->
  <button @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: function () {
        this.counter++
      },
      decrement: function () {
        this.counter--
      }
    }
  })
</script>
</body>

效果：

android AlertDialog 监听按钮点击 android点击事件监听_bc

2.3 v-on参数传递

事件发生后，有可能需要获取事件相关的参数。

情况1：如果使用v-on不需要传递参数，那么方法后的()不需要添加。如果方法本身有一个参数，那么默认会将事件event参数传递进去。

情况2：如果需要传递某个参数的同时，需要传递event参数，可以通过$event传入事件

例子:

<body>
<div id="app">
  <button @click="btn1Click">按钮一</button>
  <button @click="btn2Click(123)">按钮二</button>
  <!-- 没有传入参数，vue会将event事件对象作为参数传入到方法中-->
  <button @click="btn2Click">按钮三</button>
  <button @click="btn4Click">按钮四</button>
  <!-- 有时需要event对象，又同时需要其他参数 -->
  <button @click="btn5Click(123, $event)">按钮五</button>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      btn1Click(){
        console.log('---------')
      },
      btn2Click(abc){
        console.log('----------', abc)
      },
      btn4Click(event){//默认传递事件event参数
        console.log('--------', event);
      },
      btn5Click(abc, event){
        console.log('-------------', abc, event)
      }
    }
  })
</script>
</body>

效果：

android AlertDialog 监听按钮点击 android点击事件监听_Vue_02

2.4 v-on修饰符的使用

某些情况拿到event的目的是做一些事件处理，Vue提供修饰符方便我们处理事件。

修饰符

作用

.stop

阻止事件冒泡传递

.prevent

阻止默认行为，比如阻止表单提交按钮的提交功能，自己可以在提交前做一些数据处理

.(keyCode 或 keyAlias}

只有当事件从特定键触发时才会触发回调

.native

监听组件根元素的原生事件

.once

只触发一次回调

例子：

<body>
<div id="app">
  <!--1. .stop修饰符的使用-->
  <div @click="divClick">
    <h2>aaa</h2>
    <button @click.stop="btnClick" >按钮</button>
  </div>

  <!--2. .prevent修饰符的使用-->
  <form action="baidu">
    <input type="submit" value="提交" @click.prevent="submitClick">
  </form>

  <!--3. .监听键盘上的某个键-->
  <!-- 监听enter键-->
  <input type="text" @keyup.enter="keyUp">

  <!--4. .once事件只触发一次-->
  <button @click.once="btn2Click">按钮2</button>

</div>
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    },
    methods: {
      btnClick(){
        console.log('btnClick');
      },
      divClick(){
        console.log('divClick');
      },
      submitClick(){
        console.log('submitClick')
      },
      keyUp(){
        console.log('keyUp')
      },
      btn2Click(){
        console.log('btn2Click');
      }
    }
  })
</script>
</body>