通常,当我们开发 Web 用户界面时,我们希望定制 DOM 事件的行为,以提供更丰富的用户体验。 形式提交,按钮点击,甚至滚动都具有相关的 DOM 事件,这些事件可以被我们的代码收听和处理。
Vue提供了v-on指令,允许我们通过给它事件的名称来收听和定制HTML元素上的DOM事件,例如,v-on:click允许我们消耗clickDOM事件。
内线事件处理
使用v-on指令,我们可以听到按钮上的点击事件,并增加一个跟踪点击数量的简单计数器。
1[label InlineMethodComponent.vue]
2<template>
3 <div>
4 <h2>InlineMethodComponent</h2>
5 <button v-on:click="clicked += 1">
6 Clicked {{ clicked }} times
7 </button>
8 </div>
9</template>
10
11<script>
12export default {
13 name: 'InlineMethodComponent',
14 data: function () {
15 return {
16 clicked: 0
17 }
18 }
19}
20</script>
组件方法
现在我们能够处理DOM事件,我们希望开始实施变得更加复杂的逻辑。在v-on指令中添加一堆复杂的逻辑,这将是相当繁琐和糟糕的做法。
1[label SimpleMethodComponent.vue]
2<template>
3 <div>
4 <h2>SimpleMethodComponent</h2>
5 <button v-on:click="log">
6 Click Me
7 </button>
8 </div>
9</template>
10
11<script>
12export default {
13 name: 'SimpleMethodComponent',
14 methods: {
15 log() {
16 console.log('Button clicked!');
17 }
18 }
19}
20</script>
内线方法呼叫
有时我们希望能够将信息传递给我们的方法调用,甚至消耗 DOM 事件本身。而不是将方法的名称传递给‘v-on’ 指令,我们可以代替将调用传递给方法本身,传递我们想要的任何信息。
1[label InlineMethodCallComponent.vue]
2<template>
3 <div>
4 <h2>InlineMethodCallComponent</h2>
5 <button v-on:click="log('clicked!', $event)">
6 Click Me
7 </button>
8 </div>
9</template>
10
11<script>
12export default {
13 name: 'InlineMethodCallComponent',
14 methods: {
15 log(msg, event) {
16 console.log(event.target.tagName, msg);
17 }
18 }
19}
20</script>
事件方法变更
有时我们想修改甚至阻止 DOM 事件的默认行为,Vue 提供了一些修改器,我们可以链接到我们为v-on指令提供的事件名称。
例如,如果我们有一个表格包含一个按钮的提交,用户的点击会更新页面. 使用单页应用程序(SPAs),我们希望避免全页重新加载. 为了做到这一点,我们可以链接防止修改器,防止事件通过呼叫event.preventDefault()重新加载页面。
1[label MethodCallModifiersComponent.vue]
2<template>
3 <div>
4 <h2>MethodCallModifiersComponent</h2>
5 <form
6 v-on:submit.stop.prevent="log('clicked!', $event)">
7 <button type="Submit">
8 Click Me
9 </button>
10 </form>
11 </div>
12</template>
13
14<script>
15export default {
16 name: 'MethodCallModifiersComponent',
17 methods: {
18 log(msg, event) {
19 console.log(event.target.tagName, msg);
20 }
21 }
22}
23</script>
事件方法 关键变更
有时我们有 DOM 事件,这些事件是通过键盘按钮触发的,Vue 为我们提供了针对基于密钥的事件定制的事件修改器。
例如,如果我们有一个输入元素,我们可以听到Enter和Esc的键按钮,通过定制这种行为,我们可以允许Enter调用我们的log()方法,并允许Escape为用户提供一个快速的方式来重置其输入。
1[label MethodCallKeyModifiersComponent.vue]
2<template>
3 <div>
4 <h2>MethodCallKeyModifiersComponent</h2>
5 <input
6 placeholder="Press Enter"
7 v-on:keyup.esc.stop="clear"
8 v-on:keyup.enter.stop="log"
9 />
10 </div>
11</template>
12
13<script>
14export default {
15 name: 'MethodCallKeyModifiersComponent',
16 methods: {
17 log(event) {
18 console.log(
19 event.target.tagName,
20 event.type,
21 event.key,
22 event.target.value
23 );
24 },
25 clear(event) {
26 event.target.value = '';
27 }
28 }
29}
30</script>
包装上
由于v-on指令,我们能够以无痛的方式拦截和定制 DOM 事件的行为. 由于这些事件与一个单独的组件有关,我们不必担心告诉我们的事件处理器停止听取 - 当组件被破坏时,它们就会被摧毁。