**
VUE中的事件处理及表单处理
**
1-事件处理
1.1-事件对象
-
无需给事件处理函数传递参数
在事件处理函数定义的位置, 直接通过形参接收事件对象即可
<div id="app"> <h1>{{msg}}</h1> <button v-on:click="updateMsg">点击改变msg</button> </div> <script> let vm = new Vue({ el:'#app', data:{ msg:'hello world' }, methods: { updateMsg(e){ console.log(e) this.msg = '你好' } }, }) </script> -
需要给事件处理函数传递参数
需要使用系统提供的关键字**$event**手动传递事件对象
<!-- 1.无需给事件处理函数传递参数，形参就是事件对象 2.需要给事件处理函数传递参数，用$event代表事件对象 --> <div id="app"> <h1>{{msg}}</h1> <button v-on:click="updateMsg('哈哈',$event)">点击改变msg</button> <hr> <input type="text" @keyup="getInput"> </div> <script> let vm = new Vue({ el:'#app', data:{ msg:'hello world' }, methods: { updateMsg(e,val){ console.log(e,val) this.msg = '你好' }, getInput(e){ if(e.keyCode === 13) { console.log(e.target.value) } } }, }) </script>
1.2-事件修饰符
-
作用: 限制事件触发的时机或者条件
-
语法格式
<div @事件名称.事件修饰符="事件处理函数"></div>
1.2.1-stop
-
作用: 阻止事件冒泡
-
书写位置: 子元素事件注册位置
<style> .father { width: 300px; height: 300px; background-color: pink; } .child { width: 200px; height: 200px; background-color: gold; } </style> <div id="app"> <div class="father" @click="getFather"> father <div class="child" @click.stop="getChild"> child </div> </div> </div> <script> let vm = new Vue({ el:'#app', data:{ }, methods: { getFather(){ console.log('父标签被点击') }, getChild(e){ // 原生js阻止冒泡行为 // e.stopPropagation(); console.log('子标签被点击') } }, }) </script>
1.2.2-prevent
-
作用: 阻止默认行为
<div id="app"> <a href="https://www.baidu.com" target="_blank" @click.prevent.once="handle">点击跳转到百度</a> </div> <script> let vm = new Vue({ el:'#app', methods: { handle(e){ // 原生js阻止默认行为 // e.preventDefault(); console.log('点击了') } }, }) </script>
1.2.3-capture
-
作用: 修改事件执行顺序, 将事件执行顺序变为捕获模式(由外向内依次触发)
-
书写位置: 父元素的事件注册位置
<div id="app"> <!-- 将事件执行顺序改变为由外向内 --> <div class="father" @click.capture="getFather"> father <div class="child" @click="getChild"> child </div> </div> </div> <script> let vm = new Vue({ el:'#app', data:{ }, methods: { getFather(){ console.log('父标签被点击') }, getChild(){ console.log('子标签被点击') } }, }) </script>
1.2.4-self
-
作用: 限制事件只能被自己触发, 不能被冒泡行为触发
-
书写位置: 父元素事件注册位置
<div id="app"> <!-- self 限制只能被自身出发 --> <div class="father" @click.self.once="getFather"> father <div class="child" @click="getChild"> child </div> </div> </div> <script> let vm = new Vue({ el:'#app', data:{ }, methods: { getFather(){ console.log('父标签被点击') }, getChild(){ console.log('子标签被点击') } }, }) </script>
1.2.5-once
-
作用: 限制事件只能被触发一次
<div id="app"> <!-- once 限制事件只能被触发一次 --> <div class="box" @click.once="handle"></div> </div> <script> let vm = new Vue({ el:'#app', data:{ }, methods: { handle(){ console.log('盒子被点击了') } }, }) </script>
1.3-按键修饰符
-
作用: 修饰键盘事件, 从而限制键盘事件的触发条件(只有在按下按键修饰符对应的键盘按键的时候, 才执行事件处理函数)
-
语法格式
<input @键盘事件名称.按键修饰符="事件处理函数">
1.3.1-系统内置的按键修饰符
.enter: 回车键.tab: tab键.delete(捕获“删除”和“退格”键).esc: esc键.space空格键.up: 上.down: 下.left: 左.right: 右
1.3.2-自定义按键修饰符
- 按键修饰符名字自定义即可
- 键盘码必须真实有效
// Vue.config.keyCodes.自定义按键修饰符别名 = 按键键盘码
Vue.config.keyCodes.f1 = 112;
1.3.3-系统修饰符
-
.ctrl -
.alt -
.shift -
.meta
2-表单处理
2.0-双向数据绑定
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2jnQWqfQ-1625197010923)(.\media\双向数据绑定.jpg)]
2.1-v-model指令
-
作用: 将用户通过表单元素输入或者选择的内容同步到数据层
-
注意: v-model这个指令一般只能和表单元素结合起来使用
2.2-常见表单元素双向数据绑定
<div id="app">
<h3>用户信息</h3>
<div>
用户名：<input type="text" placeholder="请输入用户名" v-model="userinfo.username">
</div>
<div>
密码：<input type="password" placeholder="请输入密码" v-model="userinfo.password">
</div>
<div>
性别：
<input type="radio" value="male" v-model="userinfo.sex"> 男
<input type="radio" value="female" v-model="userinfo.sex"> 女
</div>
<div>
爱好：
<input type="checkbox" value="code" v-model="userinfo.hobby"> 敲代码
<input type="checkbox" value="sleep" v-model="userinfo.hobby"> 睡觉
<input type="checkbox" value="playGame" v-model="userinfo.hobby"> 玩游戏
</div>
<div>
所属省份：
<select v-model="userinfo.province">
<option value="JS">江苏</option>
<option value="ZJ">浙江</option>
<option value="SC">四川</option>
<option value="HB">湖北</option>
</select>
</div>
<div>
<button @click="submit">提交</button>
</div>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
userinfo:{
username:'',
password:'',
sex:'male',
hobby:['sleep','playGame'],
province:'JS'
}
},
methods: {
submit(){
console.log(this.userinfo)
// 发送一个ajax请求
}
},
})
</script>
2.2-表单修饰符
- 作用: 对v-model指令所收集到的表单内容进行处理
2.2.1-书写位置
v-model.表单修饰符="数据"
2.2.2-系统表单修饰符
-
trim
- 作用: 去除表单元素内容首位和末尾的空格
-
number
- 作用: 对表单元素的内容进行数据类型的转换, 将表单内容转换成数值类型
- 特点:
- 当表单内容可以被转换成数值类型的时候, 会自动转换
- 当表单内容无法转换成数值类型的时候, 则不会做处理
-
lazy
- 作用: 延迟v-model同步数据的时机, 失去焦点的时候, 再进行数据同步
3-vm.$set
3.1-作用
- 动态给数组添加元素
- 动态给对象添加属性
3.2-语法
vm.$set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)
3.3-别名
Vue.set(目标数据,数组的索引/对象的属性名,数组元素的值/对象的属性值)
<div id="app">
<h3 v-for="item in arr">{{item}}</h3>
<hr>
<h3 v-for="(item,key) in userinfo">{{key}}=={{item}}</h3>
<hr>
<button @click="add">点击向数组添加一条数据</button>
<button @click="addObj">点击向对象添加一条属性</button>
</div>
<script>
let vm = new Vue({
el:'#app',
data:{
arr:['宝马','奔驰','奥迪'],
userinfo:{
username:'张三',
sex:'男',
age:20
}
},
methods: {
add(){
// this.arr.push('大众')
// this.arr[3] = '保时捷'
this.$set(this.arr,3,'保时捷')
console.log(this.arr)
},
addObj(){
this.userinfo.province = '江苏'
// this.$set('目标数据','数组的索引/对象属性名','数组的元素/对象属性值')
// this.$set(this.userinfo,'province','江苏')
// 别名
// Vue.set(this.userinfo,'hobby','睡觉')
console.log(this.userinfo)
// 强制视图更新
this.$forceUpdate()
}
},
})
</script>
798
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
