Day12——v-on事件监听

小咪咪 2023-02-27 12:09 33阅读 0赞

### 文章目录 ###

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

# 一. 回顾 #

前面学习了[Day11——ES6语法补充][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>
      
      <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>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]

## 2.3 v-on参数传递 ##

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

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

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

例子:

<body>
    <div id="app">
      <button @click="btn1Click">按钮一</button>
      <button @click="btn2Click(123)">按钮二</button>
      
      <button @click="btn2Click">按钮三</button>
      <button @click="btn4Click">按钮四</button>
      
      <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>

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]

## 2.4 v-on修饰符的使用 ##

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

<table> 
 <thead> 
  <tr> 
   <th>修饰符</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.stop</td> 
   <td>阻止事件冒泡传递</td> 
  </tr> 
  <tr> 
   <td>.prevent</td> 
   <td>阻止默认行为，比如阻止表单提交按钮的提交功能，自己可以在提交前做一些数据处理</td> 
  </tr> 
  <tr> 
   <td>.(keyCode 或 keyAlias}</td> 
   <td>只有当事件从特定键触发时才会触发回调</td> 
  </tr> 
  <tr> 
   <td>.native</td> 
   <td>监听组件根元素的原生事件</td> 
  </tr> 
  <tr> 
   <td>.once</td> 
   <td>只触发一次回调</td> 
  </tr> 
 </tbody> 
</table>

**例子**：

<body>
    <div id="app">
      
      <div @click="divClick">
        <h2>aaa</h2>
        <button @click.stop="btnClick" >按钮</button>
      </div>
    
      
      <form action="baidu">
        <input type="submit" value="提交" @click.prevent="submitClick">
      </form>
    
      
      
      <input type="text" @keyup.enter="keyUp">
    
      
      <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>

[Day11_ES6]: https://blog.csdn.net/qq_40634846/article/details/107405003
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70]: /images/20230209/ef96427d31c94bc996ec43d6900d00d5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/2020071714372226.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNjM0ODQ2,size_16,color_FFFFFF,t_70