v-on事件

绑定方式

• v-on:事件名
• @事件名

事件修饰符

• .stop

  阻止事件冒泡

• .prevent

  阻止默认事件发生

• .capture

  使用事件捕获模式

• .self

  只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

• .once

  只执行一次

​ 修饰符是由点开头的指令后缀来表示的。

获取事件对象

• 在调用函数传递特殊变量$event
• 在函数中直接使用event

按键修饰符（了解）

• .enter
• .tab
• .delete (捕获“删除”和“退格”键)
• .esc
• .space
• .up
• .down
• .left
• .right

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div id="app">
  <div>
    <form action="http://baidu.com" method="get">
        <!--根据按键的编号-->
        <!--<input type="text" v-on:key.13="submit">-->
        <!--由于按键的编号难记,可以使用vue提供的别名,作用和方面一样-->
        <input v-on:keyup.enter="submit">
        <!--常见的-->
        <!--
        .enter
        .tab
        .delete (捕获“删除”和“退格”键)
        .esc
        .space
        .up
        .down
        .left
        .right
        -->
    </form>
  </div>

为什么在 HTML 中监听事件？

实际上，使用 v-on 或 @ 有几个好处：

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