-
Vue模板语法（下）
一、事件处理
1.1 监听事件
我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：
v-on:click="handler"或@click="handler"。事件处理器 (handler) 的值可以是：
- 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。
- 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。
这两种在前面的博客已经有体现
1.2 事件修饰符
在处理事件时调用 event.preventDefault() 或 event.stopPropagation() 是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理 DOM 事件的细节会更好。
为解决这一问题，Vue 为 v-on 提供了事件修饰符。修饰符是用
.表示的指令后缀，包含以下这些：- .stop
- .prevent
- .self
- .capture
- .once
- .passive
<a @click.stop="doThis">a> <form @submit.prevent="onSubmit">form> <a @click.stop.prevent="doThat">a> <form @submit.prevent>form> <div @click.self="doThat">...div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。
<div @click.capture="doThis">...div> <a @click.once="doThis">a> <div @scroll.passive="onScroll">...div>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应
请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则.prevent 会被忽略，并且浏览器会抛出警告。
1.3 按键修饰符
在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
<input @keyup.enter="submit" />- 1
- 2
你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
<input @keyup.page-down="onPageDown" />- 1
在上面的例子中，仅会在 $event.key 为 ‘PageDown’ 时调用事件处理。
按鍵別名
Vue 为一些常用的按键提供了别名：
- .enter
- .tab
- .delete (捕获“Delete”和“Backspace”两个按键)
- .esc
- .space
- .up
- .down
- .left
- .right
1.4 实例
事件冒泡
是指在计算机编程中的一种事件传递机制。在事件驱动的编程模型中，当用户与程序交互时，例如点击鼠标或按下键盘，这些操作会触发相应的事件。事件冒泡是指当一个元素上的事件被触发时，它会向上级元素传递，直到根元素，这个过程就像气泡从底部冒到顶部一样。
那有时候我们不需要这种情况发生，该怎么解决呢？用咱们的事件修饰符
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js">script> <style> .red{ width: 400px; height: 400px; background-color: red; } .orange{ width: 300px; height: 300px; background-color: orange; } .blue{ width: 200px; height: 200px; background-color: blue; } .black{ width: 100px; height: 100px; background-color: black; } style> head> <body> <div id="app"> <p>冒泡事件p> <div class="red" @click="red"> <div class="orange" @click="orange"> <div class="blue" @click="blue"> <div class="black" @click.stop="black">div> div> div> div> <p>提交答案p> <button @click.once="dosub">提交button> <p>按键修饰符p> <input v-on:keyup.enter="dosub" /> div> body> <script type="text/javascript"> // 绑定边界 ES6具体体现 new Vue({ el: '#app', data() { return { f200: 'f200' }; }, methods: { red() { alert("red"); }, orange() { alert("orange"); }, blue() { alert("blue"); }, black() { alert("black"); }, dosub(){ alert("提交"); } } }) script> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
二、表单综合案例
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
<input :value="text" @input="event => text = event.target.value">- 1
- 2
- 3
v-model 指令帮我们简化了这一步骤：
<input v-model="text">- 1
另外，v-model 还可以用于各种不同类型的输入，
