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

1. v-on 基础

计数器代码示例：

  1. <div id="app">
  2.   <h2>{{counter}}</h2>
  3.   <button type="button" @click="increment">+</button>
  4.   <button type="button" @click="decrement">-</button>
  5. </div>
  7. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  8. <script type="text/javascript">
  9.   const app = new Vue({
  10.     el: '#app',
  11.     data: {
  12.       counter: 0
  13.     },
  14.     methods: {
  15.       //对象函数的增强写法
  16.       increment() {
  17.         this.counter ++
  18.       },
  19.       decrement() {
  20.         this.counter --
  21.       }
  22.     }
  23.   })
  24. </script>

2. v-on 参数

在上面的 计数器代码里，有一个小细节：@click="increament" 方法名后面没有加 () ？

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

2.1 没有写 ()

image.png

  1. <div id="app">
  2.   <button type="button" @click="btnClick">按钮</button>
  3. </div>
  5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  6. <script type="text/javascript">
  7.   const app = new Vue({
  8.     el: '#app',
  9.     data: {
  10.     },
  11.     methods: {
  12.       btnClick(aaa) {
  13.         console.log(aaa)
  14.       }
  15.     }
  16.   })
  17. </script>

2.2 传入了$event 原始DOM事件

image.png

  1. <div id="app">
  2.   <button type="button" @click="btnClick(13, $event)">按钮</button>
  3. </div>
  5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  6. <script type="text/javascript">
  7.   const app = new Vue({
  8.     el: '#app',
  9.     data: {
  10.     },
  11.     methods: {
  12.       btnClick(num, event) {
  13.         console.log(num, event)
  14.       }
  15.     }
  16.   })
  17. </script>

2.3 传入的参数不够，或者没有传入参数，但是有 ()

image.png

  1. <div id="app">
  2.   <button type="button" @click="btnClick(13)">按钮</button>
  3. </div>
  5. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js" type="text/javascript" charset="utf-8"></script>
  6. <script type="text/javascript">
  7.   const app = new Vue({
  8.     el: '#app',
  9.     data: {
  10.     },
  11.     methods: {
  12.       btnClick(num, event) {
  13.         console.log(num, event)
  14.       }
  15.     }
  16.   })
  17. </script>
  • 传入的参数不够，或者没有传入参数，则控制台打印 undefined

3. v-on 修饰符

  • 在某些情况下，我们拿到 event的目的可能是进行一些事件处理。
  • Vue 提供了修饰符来帮助我们方便的处理一些事件：
    • .stop - 调用 event.stopPropagation()
    • .prevent - 调用 event.preventDefault``()
    • .{``keyCode`` | ``keyAlias``} - 只当事件是从特定键触发时才触发回调
    • .native - 监听组件根元素的原生事件
    • .once - 只触发一次回调

      具体更多详见：官网文档

  1. <!-- 停止冒泡 -->
  2. <button @click.stop="doThis"></button>
  4. <!-- 阻止默认行为 -->
  5. <button @click.prevent="doThis"></button>
  7. <!-- 阻止默认行为，没有表达式 -->
  8. <form @submit.prevent></form>
  10. <!-- 串联修饰符 -->
  11. <button @click.stop.prevent="doThis"></button>
  13. <!-- 键修饰符，键别名 -->
  14. <input @keyup.enter="onEnter">
  16. <!-- 键修饰符，键代码 -->
  17. <input @keyup.13="onEnter">
  19. <!-- 点击回调只会触发一次 -->
  20. <button @click.once="doThis"></button>

  • 代码演示 ```html

    aaaaaaa


```