11 监听 DOM 事件和事件修饰符
我们在事件方面一直处于停滞状态。 现在,让我们学习如何收听 DOM 事件,即事件。 看一下起始代码,
Index.html
Index.js
var app = new Vue({
el: "#app",
data: {
message: "Hi"
}
});
地球上最著名的按钮事件是click
事件。 假设我们要在单击“说你好”按钮时将消息“嗨”更改为“你好”。 知道我们如何通过 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
元素中。
<button v-on:click="message='Hello'">Say Hello</button>
剖析语法,
click
– 指定在冒号之后我们正在监听的事件的类型=
– 在等号后,指定触发事件时我们要执行的方法名称或 JavaScript 代码。
我们正在从 Vue 实例的数据对象访问message
属性,并将其设置为“Hello
”。 输出如下,
酷! 但是在实际的应用中,我们将要做的不仅仅是改变属性的文本。
令人费解的问题:如何在v-on
指令的双引号中放入复杂的 JavaScript 代码?
上面提到的大脑拖曳问题的答案是使用方法。 就像data
对象一样,我们的 Vue 实例有一个可选的methods
对象,我们可以在其中定义所有方法。
现在,在v-on
的双引号中,只需提及方法的名称,然后传递所需的参数(如果有)。 然后,在 Vue 实例的methods
对象中定义方法,该方法将在每次click
事件发生时触发。
Index.html(代码段)
<button v-on:click="greet('howdy')">Say Hello</button>
Index.js
单击该按钮,“说声你好”触发了greet('howdy')
方法,并且该方法中的代码被执行,从而向网页呈现“Howdy
”。
事件修饰符
假设我们有一个名为“加 1”的按钮和一个初始值为zero
的计数器。 每次单击该按钮时,都会在现有的counter
值上加 1 并将其打印到屏幕上。
现在让我们将想象力带入现实。 只需将v-on
指令与click
用作参数,即可触发将counter
值加 1 的方法。
Index.html (代码段)
<button v-on:click="addOne">Add 1</button> <p> {{ counter }} </p>
Index.js(代码段)
methods: {
addOne: function() {
this.counter += 1;
}
}
脑筋急转弯问题: 如果我们只想先在click
上触发此方法,然后再不触发该方法怎么办?
该问题的答案是 – 事件修饰符! 这些使我们能够修改事件的行为(正如其名称所暗示的)。
用法:在事件名称(在本例中为click
)之后,添加一个点并指定要使用的修饰符的名称。
<button v-on:click.once="addOne">Add 1</button>
使用事件修饰符.once
,click
事件将仅触发一次。 这意味着,无论单击按钮多少次,只要将counter
的值增加到 1,addOne
方法将仅被调用。
同样,其他可用的事件修饰符是
.stop
.prevent
.capture
.self
.once
.passive
最常用的修饰符是.stop
和.prevent
,它们称为众所周知的event.stopPropagation()
和event.preventDefault()
方法。 这些是随附的方法。 这里与 Vue 无关。 Vue.js 只是提供了一种简单的方法,借助修饰符来处理此类常见事件详细信息,而不是在 Vue 实例的方法中显式指定这些事件方法(例如event.preventDefault()
来取消事件)。
根据preventDefault()
方法,.prevent
修饰符将防止发生默认操作。 .prevent
的最佳示例是将其与按钮一起使用,以便触发提交事件时,它不会重新加载页面。
警告:一开始可能会有些弯腰!
Vue 让我们像这样,将这些修饰符一个接一个地链接,
链接的顺序非常重要。 因为与每个修饰符相关的代码是按相同顺序生成的。
例如,
<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>
标签的“打开 Vue”将阻止打开vuejs.org
页面 - 单击标签上的“立即单击我”,将在新标签中打开
vuejs.org
官方页面
相反,如果我们将链接修饰符的顺序更改为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
(换句话说,它无法打开)。
现在,让我们看一下到目前为止处理的完整代码,
index.html
<!DOCTYPE html>
<html>
<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>
index.js
祝你有个美好的一天!