Vue的事件和表单绑定
# Vue的事件和表单绑定
# 1.事件绑定
HTML 中的事件，是以 on 开头，在开发工具中提示有非常多的事件，如下所示：
# 1.1 事件绑定v-on
V-on 绑定所有 html 事件时，格式“v-on:事件名”（注意是去掉 HTML 中事件名的“on”前缀）。简写格式“@事件名”，如下示例所示：
<div id="app">
<h3>v-on:</h3>
<input type="button" v-on:click="btnClick" value="点我一下"/>
<HR>
<h3>简写@</h3>
<input type="button" @click="btnClick" value="点我一下"/>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
msg: "消息"
},
methods: {
btnClick() {
console.log(this.msg);
}
}
});
</script>
# 1.2 事件处理(内联处理器)
绑定事件时，绑定一个带参数的事件，带括号的是内联处理器。
<div id="app">
<!--简写-->
<input type="button"
@click="btnClickParams('我是一只来自北方的狼！')"
value="点我一下"/>
</div>
<script>
let vue = new Vue({
el: "#app",
methods: {
btnClickParams(msg) {
console.log(msg);
}
}
});
</script>
# 1.3 事件处理（$event 参数)
$event 参数是可以传递当前对象的原生 DOM 一系列信息，当绑定事件时，不 用括号时，自动传递。当使用括号传入参数时，如果想获取$event参数的相关 信息，必须带上$event 参数,且参数名称必须写成“$event”，如下：
<div id="app">
<input type="button"
@click="btnClickParamsAndEvent('按钮被点击！',$event)"
value="接收参数和$event 参数"/>
</div>
<script>
let vue = new Vue({
el: "#app",
methods: {
btnClickParamsAndEvent(msg,event) {
console.log(msg,event);
//可以通过 event 改变 DOM 的相关值
event.target.value = "按钮"
event.target.style.backgroundColor = "blue";
event.target.style.fontSize = "20px";
event.target.style.color = "#FFFFFF";
}
}
});
</script>
# 1.4 event场景处理冒泡
注意：VUE 解决冒泡更简单的可以使用事件修饰
<div id="app">
<!--接收内联参数和系统参数 event (注意是固定写法：$event)-->
<div style="width: 200px;
height: 100px;
background-color: aquamarine;"
@click="btnClickParamsAndEvent('VID 被点击！',$event)">
<!--DIV 里面嵌了按钮-->
<input type="button"
@click="btnClickParamsAndEvent('按钮被点击！',$event)"
value="接收参数和$event 参数"/>
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
msg: "这是 vue 绑定的数据。"
},
methods:{
//event 一般用在事件监听、事件冒泡处理等，如：
btnClickParamsAndEvent(msg,event) {
this.msg = msg;
let object = event.target||event.srcElement;
//阻止传递，下面这个个语句加上注解可以看到当按钮点的时候
//触发了两次。这就是下面的 DIV 事件也被激活，称之为事件冒泡
event.cancelBubble = true;
console.log(object,"===>",msg);
}
}
});
</script>
# 1.5 事件修饰
阻止冒泡、事件捕获
<style>
.class1{
width: 300px;
height: 100px;
background-color: #D8E1FF;
}
.class2{
width: 200px;
height: 50px;
background-color: #5CA2FF;
}
</style>
<div id="app">
<h3>(1)阻止单击事件继续传播，解决事件冒泡:stop</h3>
<!-- 阻止单击事件继续传播，解决事件冒泡 -->
<div class="class1" @click.stop="doThis">
<div class="class2" @click.stop="doThis">
<button @click.stop="doThis">点我一下</button>
</div>
</div>
<h3>(2)点击事件将只会触发一次:once</h3>
<!-- 点击事件将只会触发一次 -->
<button @click.once="doThis">点击事件将只会触发一次</button>
<h3>(3)提交事件不再重载页面:submit.prevent</h3>
<!-- 提交事件不再重载页面 ，去掉 prevent 尝试一下，页面会重新加载-->
<form class="class1" @submit.prevent="onSubmit">
<label for="keyword">输入关键字：</label>
<input type="text" id="keyword" value="">
<input type="submit" value="提交事件不再重载页面"/>
</form>
<h3>(4)修饰符可以串联:.stop.prevent</h3>
<!-- 修饰符可以串联 -->
<button @click.stop.prevent="doThat">修饰符可以串联</button>
<h3>(5)只有修饰符:submit.prevent </h3>
<!-- 只有修饰符 -->
<form @submit.prevent>
<input type="submit" value="只有修饰符"/>
</form>
<h3>(6)添加事件监听器时使用事件捕获模式 </h3>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div class="class1" @click="docapture1">
<div class="class2" @click.capture="docapture2">
<button @click.capture="docapture3">点击我一下</button>
</div>
</div>
<h3>(7)只当在 event.target 是当前元素自身时触发处理函数 </h3>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div class="class1" @click.self="doThat">
<button @click.self="doThis">点击我一下</button>
</div>
<h3>(8)滚动事件的默认行为 (即滚动行为) 将会立即触发 </h3>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div class="class1" @scroll.passive="onScroll">
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
msg: "这是 vue 绑定的数据。"
},
methods:{
doThis(){
console.log("doThis……");
},
doThat(){
console.log("doThat……");
},
docapture1(){
console.log("capture1111");
},
docapture2(){
console.log("capture2222");
},
docapture3(){
console.log("capture3333");
},
onSubmit() {
console.log("onSubmit……");
}
}
});
</script>
# 1.6 键盘监听
常见的键盘按键码：
(1) enter
(2) tab
(3) delete (捕获“删除”和“退格”键)
(4) esc
(5) space
(6) up
(7) down
(8) left
(9) right
(10) ctrl
(11) alt
(12) shift
(13) met
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
使用 keyCode 特性也是允许的：
<input v-on:keyup.13="submit">
<!-- Alt + C -->
<input @keyup.alt.67="clear">
# 2. 表单元素绑定
# 2.1 input绑定
数据绑定—表单输入绑定—单行输入文本 v-model
<div id="app">
<div>
<label for="userName">用户名称：</label>
<input v-model="userName">
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
userName: ""
}
});
</script>
# 2.2 多行输入文本绑定
<div id="app">
<div>
<label for="message">备注信息：</label>
<textarea v-model="message" placeholder="这里可以输入很多信息">
</textarea>
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: { message: "" }
});
</script>
# 2.3 复选框绑定
复选框绑定的数据是数组
<div id="app">
<div>
<label>选择喜欢吃的水果：</label>
<input type="checkbox" v-model="fruits"
id="apple" value="苹果">
<label for="apple">苹果</label>
<input type="checkbox" v-model="fruits"
id="banana" value="香蕉">
<label for="banana">香蕉</label>
<input type="checkbox" v-model="fruits"
id="pear" value="梨子">
<label for="pear">梨子</label>
</div>
</div>
<script>
let vue = new Vue({
el: "#app",
data: { fruits :[] }
});
</script>
# 2.4 单选按钮绑定
单选按钮绑定的数据是普通变量
<div id="app">
<label>选择喜欢的球类：</label>
<input type="radio" v-model="balls" id="footBall" value="足球">
<label for="footBall">足球</label>
<input type="radio" v-model="balls" id="basketBall" value="篮球">
<label for="basketBall">篮球</label>
<input type="radio" v-model="balls" id="pingpongBall" value="乒乓球">
<label for="pingpongBall">乒乓球</label>
</div>
<script>
let vue = new Vue({
el: "#app",
data: { balls : "" }
});
</script>
# 2.5 表单下拉输入绑定
表单输入绑定—下拉（结合 v-for），下拉绑定的数据也是数组。
<div id="app">
<label>请选择一个省份：</label>
<select v-model="province">
<option value="0" selected>--请选择--</option>
<option v-for="item in provinceList"
:value="item.id" :key="item.id">{{item.name}}</option>
</select>
</div>
<script>
let vue = new Vue({
el: "#app",
data: {
province : 0,
provinceList:[
{
id:1,
name :"广东"
},
{
id:2,
name :"广西"
},
{
id:3,
name :"山东"
},
{
id:4,
name :"辽宁"
},
{
id:5,
name :"河北"
}
]
}
});
</script>
# 2.7 总结
上次更新: 2023/11/28, 22:03:59