# 11.侦听 DOM 事件和事件修饰符 > 原文: [https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/](https://javabeginnerstutorial.com/vue-js/11-listening-to-dom-events-and-event-modifiers/) 我们在事件方面一直处于停滞状态。 现在,让我们学习如何收听 DOM 事件,即`click`事件。 看一下起始代码, #### Index.html ```java
{{ message }}
凉! 但是在实际的应用中,我们将要做的不仅仅是改变属性的文本。
令人费解的问题: 如何在v-on指令的双引号中放入复杂的 JavaScript 代码?
v-on
上面提到的大脑拖曳问题的答案是使用方法。 就像“data”对象一样,我们的 Vue 实例有一个可选的“methods”对象,我们可以在其中定义所有方法。
“data”
“methods”
现在,在v-on的双引号中,只需提及方法的名称,然后传递所需的参数(如果有)。 然后,在 Vue 实例的“methods”对象中定义方法,该方法将在每次click事件发生时触发。
click
<button v-on:click="greet('howdy')">Say Hello</button>
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; } } });
您注意到this关键字的用法了吗? 为了从 HTML 引用data对象的属性,我们可以直接使用它们,因为我们使用‘el’关键字将特定的 HTML 部分与 Vue 实例挂钩。 但是,在methods内部,我们必须使用‘this’关键字指向 Vue 实例,然后访问data对象的属性。
this
data
‘el’
methods
‘this’
单击该按钮,“说声你好”触发了greet(‘howdy’)方法,并且该方法中的代码被执行,从而向网页呈现“Howdy”。
greet(‘howdy’)
假设我们有一个名为“加 1 ”的按钮和一个初始值为zero的计数器。 每次单击该按钮时,都会在现有的counter值上加 1 并将其打印到屏幕上。
zero
counter
现在让我们将想象力带入现实。 只需将v-on指令与click用作参数,即可触发将counter值加 1 的方法。
<button v-on:click="addOne">Add 1</button> <p> {{ counter }} </p>
methods: { addOne: function() { this.counter += 1; } }
脑筋急转弯问题: 如果我们只想先在首先在 click上触发此方法,然后再不触发该方法怎么办?
该问题的答案是 – 事件修饰符! 这些使我们能够修改事件的行为(正如其名称所暗示的)。
用法:在事件名称(在本例中为click)之后,添加一个点并指定要使用的修饰符的名称。
<button v-on:click.once="addOne">Add 1</button>
使用事件修饰符.once,click事件将仅触发一次。 这意味着,无论单击按钮多少次,只要将counter的值增加到 1,“addOne”方法将仅被称为。
.once
“addOne”
同样,其他可用的事件修饰符是
最常用的修饰符是.stop和.prevent,它们称为众所周知的event.stopPropagation()和event.preventDefault()方法。 这些是本机事件对象随附的方法。 这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法,借助修饰符来处理此类常见事件详细信息,而不是在 Vue 实例的方法中显式指定这些事件方法(例如event.preventDefault()来取消事件)。
.stop
.prevent
event.stopPropagation()
event.preventDefault()
根据stopPropagation()事件方法,.stop修饰符将进一步停止事件的传播。
stopPropagation()
根据preventDefault()方法,.prevent修饰符将防止发生默认操作。 .prevent的最佳示例是将其与Submit按钮一起使用,以便触发提交事件时,它不会重新加载页面。
preventDefault()
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>
使用v-on:click.self.prevent仅会阻止单击<a>元素本身,而不是单击其child元素。 好吧,我听到你说“请用英语”! 换句话说,这意味着
<a>
child
vuejs.org
相反,如果我们将链接修饰符的顺序更改为v-on:click.prevent.self,则将防止发生所有单击事件。
v-on:click.prevent.self
<a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a>
单击<a>的“打开 Vue” 和<p>的“立即单击我” 都不会打开vuejs.org(换句话说,它无法打开 )。
<p>
现在,让我们看一下到目前为止处理的完整代码,
index.html
<!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> <!-- Listening to click event with v-on directive --> <button v-on:click="greet('howdy')">Say Hello</button> <p> {{ message }} </p> <h2>Event Modifiers</h2> <!-- Using .once to modify click event --> <button v-on:click.once="addOne">Add 1</button> <p> {{ counter }} </p> <!-- chaining event modifiers --> <a href="https://vuejs.org/" v-on:click.prevent.self target="_blank">Open Vue <p>Click me now</p> </a> </div> <!-- including index.js file --> <script src="index.js"></script> </body> </html>
index.js
var app = new Vue({ el: "#app", data: { message: "Hi", counter: 0 }, // define all the methods within the 'methods' object methods: { greet(greeting) { // 'this' keyword refers to the current Vue instance this.message = greeting; }, // another way to define methods before es6 addOne: function() { this.counter += 1; } } });
我知道今天有很多事情要消化。 上面讨论的所有代码以及不言自明的注释在 GitHub 仓库中可用。 慢慢来,我很快就会回来讨论键盘和其他鼠标 DOM 事件。
祝你有个美好的一天!