一、v-on 简写

v-on 指令可以简写为 @:

  1. <button v-on:click="num++">按钮</button>
  2. <button @click="num++">按钮</button>

二、事件处理方法

每一个 Vue 实例身上，都有一个 methods 属性，用来设置实例的方法。
语法结构如下：

  1. new Vue({
  2.     methods: {
  3.         方法名一() {
  4.         },
  5.         方法名二() {
  6.         },
  7.         // ...
  8.     }
  9. })

调用 methods 方法

通常，methods 中的每一个方法，都可以在 HTML 中调用，也可以在其他 methods 方法中调用。
例如在 HTML 中调用：

  1. <button @click="方法名">按钮</button>
  2. <h1>{{方法名()}}</h1>

又例如在一个 methods 方法中调用另一个 methods 方法：

  1. new Vue({
  2.     methods: {
  3.         方法名一() {
  4.             this.方法名二();
  5.         },
  6.         方法名二() {
  7.             //...
  8.         }
  9.     }
  10. })

三、事件传值

在调用 methods 的方法时，还可以通过小括号来进行传值。
基础语法：

  1. <button @click="方法名一(要传递的值)">按钮</button>
  2. <script>
  3.     new Vue({
  4.         methods: {
  5.             方法名一(任意变量名) {
  6.                 // ...
  7.             },
  8.             方法名二() {
  9.             }
  10.         }
  11.     })
  12. </script>
  • 有时也需要在内联语句处理器中访问原始的 DOM 事件。
    • 可以用特殊变量 $event 把它传入方法： ```html

// … methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) { event.preventDefault() } alert(message) } }

  1. <a name="yjxeW"></a>
  2. ### 四、事件修饰符
  4. - 为什么要使用事件修饰符?
  5.    - 在事件处理程序中调用 `event.preventDefault()` 或 `event.stopPropagation()` 是非常常见的需求。
  6.    - 所以我们就简化成修饰符
  7. - 常见的修饰符有什么?
  8.    - .stop
  9.    - .prevent
  10.    - .capture
  11.    - .self
  12.    - .once
  13.    - .passive
  14. ```html
  15. <!-- 阻止单击事件继续传播 -->
  16. <a v-on:click.stop="doThis"></a>
  18. <!-- 提交事件不再重载页面 -->
  19. <form v-on:submit.prevent="onSubmit"></form>
  21. <!-- 修饰符可以串联 -->
  22. <a v-on:click.stop.prevent="doThat"></a>
  24. <!-- 只有修饰符 -->
  25. <form v-on:submit.prevent></form>
  27. <!-- 添加事件监听器时使用事件捕获模式 -->
  28. <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
  29. <div v-on:click.capture="doThis">...</div>
  31. <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
  32. <!-- 即事件不是从内部元素触发的 -->
  33. <div v-on:click.self="doThat">...</div>
  35. <!-- 点击事件将只会触发一次 -->
  36. <a v-on:click.once="doThis"></a>
  39. <!-- Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符 -->
  40. <!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
  41. <!-- 而不会等待 `onScroll` 完成  -->
  42. <!-- 这其中包含 `event.preventDefault()` 的情况 -->
  43. <div v-on:scroll.passive="onScroll">...</div>
  44. <!--  这个 .passive 修饰符尤其能够提升移动端的性能 -->
  • 使用修饰符时，顺序很重要
    • 用 v-on:click.prevent.self 会阻止所有的点击，
    • 而 v-on:click.self.prevent 只会阻止对元素自身的点击。

  • 注意

    • 不要把 .passive 和 .prevent 一起使用，
      • 因为 .prevent 将会被忽略，
      • 同时浏览器可能会向你展示一个警告。
      • 请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。

        为什么在 HTML 中监听事件？

  • 你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。

    • 但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，
    • 它不会导致任何维护上的困难。
  • 实际上，使用 v-on 有几个好处：
    • 扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    • 因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
    • 当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们。