Vue 学习 - 监听 DOM 事件和事件修饰符 - 《前端》

[TOC]

简体事件

假设我们要在单击“说你好”按钮时将消息“嗨”更改为“你好”。知道我们如何通过 Vue 实现这一目标吗？
Vue 为此又有另一个指令，v-on！我们始终可以使用v-on监听 DOM 事件，例如：
- 鼠标事件 – click，dblclick，mousemove，mouseover等。
- 键盘事件 - keypress，keyup，keydown等。
- 表单事件 – submit，focus，blur等
- 还有很多

监听点击事件

因此，我们现在的任务是监听按钮“Say Hello”上发生点击事件时，将消息文本从“Hi”更改为“Hello”。我们必须将v-on指令添加到将要监听click事件的button元素中。
v-on – Vue 知道我们正在使用此指令来监听事件
click – 指定在冒号之后我们正在监听的事件的类型
= 在等号后，指定触发事件时我们要执行的方法名称或 JavaScript 代码。

令人费解的问题：如何在v-on指令的双引号中放入复杂的 JavaScript 代码？ — 不推荐写在引号内

<!DOCTYPE html>
<html>
<head>
  <title>Hello Vue!</title>
  <!-- including Vue with development version CDN -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <h2>Welcome</h2>
    <button v-on:click="message='Hello'">Say Hello</button>
    <p> {{ message }} </p>
  </div>
  <!-- including index.js file -->
  <script>
    var app = new Vue({
      el: "#app",
      data: {
        message: "Hi"
      }
    });</script>
</body>
</html>

使用方法

上面提到的大脑拖曳问题的答案是使用方法。就像data对象一样，我们的 Vue 实例有一个可选的methods对象，我们可以在其中定义所有方法。
现在，在v-on的双引号中，只需提及方法的名称，然后传递所需的参数（如果有）。然后，在 Vue 实例的methods对象中定义方法，该方法将在每次click事件发生时触发。

单击该按钮，触发了greet('howdy')方法，并且该方法中的代码被执行，从而向网页呈现“Howdy”。

<button v-on:click="greet('howdy')">Say Hello</button>
<script>
var app = new Vue({
  el: "#app",
  data: {
    message: "Hi"
  },
  // define all the methods within the 'methods' object
  methods: {
    greet(greeting) {
      // 'this' keyword refers to the current Vue instance
      this.message = greeting;
    }
  }
});
</script>

您注意到this关键字的用法了吗？
- 为了从 HTML 引用data对象的属性，我们可以直接使用它们，因为我们使用el关键字将特定的 HTML 部分与 Vue 实例挂钩。
- 但是，在methods内部，我们必须使用‘this’关键字指向 Vue 实例，然后访问data对象的属性。

事件修饰符

假设我们有一个名为“加 1”的按钮和一个初始值为zero的计数器。每次单击该按钮时，都会在现有的counter值上加 1 并将其打印到屏幕上。

只需将v-on指令与click用作参数，即可触发将counter值加 1 的方法。

<div id="app">
<button v-on:click="addOne">Add 1</button>
<p> {{ counter }} </p>
</div>
<script>
var app = new Vue({
  el: "#app",
  data: {
    counter: 0,
  },
  methods: {
    addOne() {
      this.counter += 1;
    }
  }
});</script>

如果我们只想先在click上触发此方法，然后再不触发该方法怎么办？

答案是 – 事件修饰符！这些使我们能够修改事件的行为（正如其名称所暗示的）。
用法：在事件名称（在本例中为click）之后，添加一个点并指定要使用的修饰符的名称。
使用事件修饰符.once，click事件将仅触发一次。这意味着，无论单击按钮多少次，只要将counter的值增加到 1，addOne方法将仅被调用。
```
<button v-on:click.once="addOne">Add 1</button>
```

可用的修饰符

同样，其他可用的事件修饰符是

.stop
.prevent
.capture
.self
.once
.passive

最常用的修饰符是.stop和.prevent，它们称为众所周知的event.stopPropagation()和event.preventDefault()方法。这些是本机事件对象随附的方法。这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法，借助修饰符来处理此类常见事件详细信息，而不是在 Vue 实例的方法中显式指定这些事件方法（例如event.preventDefault()来取消事件）。

两个最常用修饰符的快速刷新：

根据stopPropagation()事件方法，.stop修饰符将进一步停止事件的传播。
根据preventDefault()方法，.prevent修饰符将防止发生默认操作。
- .prevent的最佳示例是将其与Submit按钮一起使用，以便触发提交事件时，它不会重新加载页面。

链接修饰符

Vue 让我们像这样，将这些修饰符一个接一个地链接 v-on:click.self.prevent

链接的顺序非常重要。因为与每个修饰符相关的代码是按相同顺序生成的。

<a href="https://vuejs.org/" 
 v-on:click.self.prevent 
 target="_blank">
Open Vue 
<p>Click me now</p>
</a>

单击<a>标签的“ Open Vue”将阻止打开vuejs.org页面
单击标签上的“Click me now”，将在新标签中打开vuejs.org官方页面
如果我们将链接修饰符的顺序更改为v-on:click.prevent.self，则将防止发生所有单击事件。
- 单击<a>的“打开 Vue”和<p>的“立即单击我”都不会打开vuejs.org。

监听键盘事件

在开发人员世界中，即使用户没有明确单击页面上提供的 HTML 按钮来处理这种情况，我们也会经常听Enter键以确保执行相应的操作。
在使用 Vue 监听键事件时，我们可以使用通常的v-on指令来提及所需的键修饰符.
```
<button v-on:keyup.13="greet">greet</button>
```
我们要监听Enter键，而不仅仅是其他键。因此，让我们通过在keyup事件之后添加一个点来提及其键码为13。
想知道我怎么知道那个关键代码？
- 请尝试 https://keycode.info/ 获取键盘上任何键的键码。太酷了！
也有一些就像.once，.prevent，.self等事件修饰符一样
- .enter
- .tab
- .delete（同时捕获“删除”和“退格”键）
- .esc
- .space
- .up
- .down
- .left
- .right

自定义键修饰符别名

除了 Vue 附带的关键修饰符之外，您还可以继续进行自己的设置，为您选择的任何关键代码设置自定义别名。这是通过全局config.keyCodes对象完成的。

将以下行添加到js文件中以启用“ Vue.config.keyCodes.a = 65;”,在此，释放键“a”时，将触发键代码为65的keyup事件，并调用方法“greet()”。

<div id="app">
<button v-on:keyup.13="greet2">greet</button>
<button v-on:keyup.a="greet2">greet2</button>
</div>
<!-- including index.js file -->
<script>
Vue.config.keyCodes.a = 65;
var app = new Vue({
  el: "#app",
  data: {
  },
  methods: {
    greet2() {
      alert("Hi");
    }
  }
});</script>

鼠标事件

示例

假设，将鼠标指针悬停在“Hover over me!”按钮上时，应显示“developer”文本。
在 Vue 实例的数据对象中添加“role”，并定义一个名为“showRole”的方法，以将此角色属性更新为String和developer。触发mouseover事件时调用此方法。 ```html
{{ role }}



<a name="TlqSS"></a>
### 使用事件对象

- JavaScript 中的本机事件对象吗？ 触发事件时，将创建`Event`对象，并将其自动传递给使用`v-on`指令调用的任何方法。
- `Event`对象具有“`target`”方法，target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。
- 该方法返回触发事件的元素，并与`element.tagName`属性一起使用返回元素的 HTML 标记名称。
```html
<div id="app">
  <button v-on:mouseover="showRole('developer', $event)">Hover over me!</button>
  {{ role }}
</div>


<script>
  Vue.config.keyCodes.a = 65;
  var app = new Vue({
    el: "#app",
    data: {
      role: ""
    },
    methods: {
      showRole(customRole, event) {
        // 'this' keyword refers to the current Vue instance
        this.role = customRole;
        this.tagName = event.target.tagName;
      }
    }
  });
</script>

使用简写

v-bind和v-on是我们模板中最常用的两个指令
v-bind的简写
让我们使用v-bind属性将 HTML <a>标记的href属性绑定到“[https://www.google.com](https://www.google.com)” URL， ```html Google

> 编写`v-bind`指令的简短方法是一次性删除`v-bind`一词，而仅使用**冒号**

```html
<a :href="url" target="_blank">Google</a>

v-on的简写

有一个按钮。单击它后，我们将触发名为“greet”的方法，以在消息Hi和Hello之间切换。 ```html

data: { message: “Hi” }, methods: { greet() { this.message === “Hi” ? this.message = “Hello” : this.message = “Hi”; } }

> 此处的缩写是将单词`v-on`和冒号替换为`@`符号。 

```html
<!-- Using v-on shorthand --> 
<button @click="greet">Click for a different greeting</button>

监听 DOM 事件和事件修饰符