• v-on 指令可以监听 DOM 事件，并在触发时运行一些 JavaScript 代码

    简单的逻辑运算

  • 事件类型由参数指定

    1. <div id="app">
    2. <button v-on:click="counter += 1">点击加 1</button>
    3. <!--简写为 -->
    4. <button @click="counter += 1">点击加 1</button>
    5. <p>按钮被点击了 {{ counter }} 次</p>
    6. </div>
    1. const vm = new Vue({
    2. el: 'app',
    3. data: {
    4.   counter: 0
    5. }
    6. })

    调用方法

  • 但是很多事件处理逻辑是非常复杂的，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。所以 v-on 还可以接收一个需要调用的方法名称。

    • 事件触发调用的方法内的this指向Vue的实例
    • 事件对象指向触发事件的元素
      1. <div id="app">
      2. <!-- `addCounter` 是在下面定义的方法名 -->
      3. <button v-on:click="addCounter">点击加 1</button>
      4. <p>按钮被点击了 {{ counter }} 次</p>
      5. </div>
      1. const vm = new Vue({
      2. el: '#app',
      3. data: {
      4. counter: 0
      5. },
      6. // 在 methods 对象中定义方法
      7. methods: {
      8. addCounter: function (e) {
      9.  // this 在方法里指向当前 Vue 实例
      10.  this.counter += 1；
      11.  // e 是原生 DOM 事件
      12.  cosnole.log(e.target)；
      13. }
      14. }
      15. })

      传参

  • 除了直接绑定到一个方法，也可以在内联JavaScript 语句中调用方法：

    • 此时事件对象无法使用
      1. <div id="app">
      2. <button v-on:click="addCounter(5)">点击加 5</button>
      3. <p>按钮被点击了 {{ counter }} 次</p>
      4. </div>
      1. new Vue({
      2. el: '#app',
      3. data: {
      4. counter: 0
      5. },
      6. methods: {
      7. addCounter: function (num) {
      8.  this.counter += 5;
      9. }
      10. }
      11. })

      既能传递参数又能使用事件对象

  • 在内联语句中使用事件对象时，可以利用特殊变量 $event:

    1. <div id="app">
    2. <button v-on:click="addCounter(5, $event)">点击加 5</button>
    3. <p>按钮被点击了 {{ counter }} 次</p>
    4. </div>
    1. new Vue({
    2. el: '#app',
    3. methods: {
    4.   addCounter: function (num, e) {
    5.     this.counter += 5;
    6.     cosnole.log(e.target)；        
    7.   }
    8. }
    9. })

  • methods中的函数，也会直接代理给Vue实例对象，所以可以直接运行：

    1. vm.addCounter();

  • 可以绑定动态事件，Vue版本需要2.6.0+

    1. <div v-on:[event]="handleClick">点击，弹出1</div>

    ```javascript const vm = new Vue({ el: ‘#app’, data: { event: ‘click’ }, methods: { handleClick () {

    1. alert(1);

    } } })

  2. - 可以不带参数绑定一个对象，Vue版本需要2.4.0+。
  3.    - { 事件名：事件执行函数 }
  4.    - 使用此种方法不支持函数传参&修饰符
  5. ```html
  6. <div v-on="{ mousedown: doThis, mouseup: doThat }"></div>
  • v-on指令简写：@

    为什么在 HTML 中监听事件?

    扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
    因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试
    当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何清理它们