vue-05 Vue里面的事件处理
2024-02-28 本文已影响0人
_RG
使用 v-on:Click指令可以绑定点击事件, 事件的方法名必须是Vue对象中的方法, 如果绑定的事件函数不传参数,绑定方法名时只需要写方法名称即可, 会默认带有一个event参数,可以获取到target对象(发生事件的对象), 如果绑定时带有参数, 直接在方法名后面传递, event参数 需要使用 $event 进行占位
也可以简写为@Click
<div id='Root'>
<h1>测试{{name}}</h1>
<button v-on:Click="showInfo1">不传参数的button,实际默认有个event参数</button>
<button v-on:Click="showInfo2($event, 66)">不传参数的button,实际默认有个event参数</button>
<button @Click="showInfo2($event, 66)">简写</button>
</div>
<script>
const vm = new Vue({
el: '#Root',
data: {
name: '你好'
},
methods: { //对象里面添加方法,不用写function
showInfo1(event){
console.log('默认参数' + event.target.innerText)
alert('你好')
},
showInfo2(event, number){
console.log(event.target.innerText)
console.log(number)
}
}
})
</script>
阻止默认事件和阻止事件冒泡(事件触发的同时,也会触发父试图同名的方法)
@Click.prevent 阻止默认事件
@Click.stop 阻止事件冒泡
@Click.once 事件只触发一次
@Click.self 只有event.target是本身时才会触发
修饰符可以连用 @Click.preven.stop 即阻止冒泡,又阻止默认事件
<div id='Root'>
<a href="https://www.baidu.com" @Click.prevent="showInfo1">点我去百度</a><br/>
<div @Click="showInfo2($event,66)">
<button @Click="showInfo1">事件可以冒泡</button><br/>
</div>
<div @Click="showInfo2($event,66)">
<button @Click.stop="showInfo1">使用stop阻止事件冒泡</button><br/>
</div>
<div @Click.self="showInfo2($event,66)">
<button @Click="showInfo1">使用self阻止事件冒泡</button><br/>
</div>
</div>
<script>
const vm = new Vue({
el: '#Root',
data: {
name: '你好'
},
methods: { //对象里面添加方法,不用写function
showInfo1(e){
console.log('默认参数' + event.target.innerText)
alert('你好')
},
showInfo2(event, number){
console.log(event.target.innerText)
console.log(number)
alert('你好')
}
}
})
</script>
键盘事件
使用@keyup(按键弹起时)和@keydown(按键按下时)绑定vue函数
如果要指定某个按键弹起时,只需要获取按键的值并转换成小写拼接在@keyup.或@keydown.后面即可, 例如按下回车键触发事件@keyup.enter
获取每个键的名字, 可以通过console.log(e.key, e.keyCode)获取
div id='Root'>
<input type="text" placeholder="请输入" @keyup.enter="showInfo1">
</div>
<script>
const vm = new Vue({
el: '#Root',
data: {
name: '你好'
},
methods: { //对象里面添加方法,不用写function
showInfo1(e){
console.log(e.target.value)
}
}
})
</script>
获取每个键的名字
<div id='Root'>
<input type="text" placeholder="请输入" @keydown="showInfo1">
</div>
<script>
const vm = new Vue({
el: '#Root',
data: {
name: '你好'
},
methods: { //对象里面添加方法,不用写function
showInfo1(e){
console.log(e.key, e.keyCode)
}
}
})
</script>
截屏2023-09-08 15.14.33.png
总结:
截屏2024-02-29 09.56.03.png
