Vue模板语法（下）
文章目录
- 一、事件处理
-
- 1.1 监听事件
- 1.2 事件修饰符
- 1.3 按键修饰符
- 1.4 实例
- 二、表单综合案例
- 三、自定义组件
一、事件处理
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>
使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用@click.prevent.self会阻止元素及其子元素的所有点击事件的默认行为，而@click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。
<div @click.capture="doThis">...div>
<a @click.once="doThis">a>
<div @scroll.passive="onScroll">...div>
.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应
请勿同时使用 .passive 和 .prevent，因为 .passive 已经向浏览器表明了你不想阻止事件的默认行为。如果你这么做了，则.prevent 会被忽略，并且浏览器会抛出警告。
1.3 按键修饰符
在监听键盘事件时，我们经常需要检查特定的按键。Vue 允许在 v-on 或 @ 监听按键事件时添加按键修饰符。
<input @keyup.enter="submit" />
你可以直接使用 KeyboardEvent.key 暴露的按键名称作为修饰符，但需要转为 kebab-case 形式。
<input @keyup.page-down="onPageDown" />
在上面的例子中，仅会在 $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>
二、表单综合案例
在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：
<input
:value="text"
@input="event => text = event.target.value">
v-model 指令帮我们简化了这一步骤：
<input v-model="text">
另外，v-model 还可以用于各种不同类型的输入，