<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>Vue自学：v-on的修饰符使用</title>
</head>
<body>
<!--
vue提供了修饰符来帮助我们处理一些事件
1: .stop-调用了 event.stopPropagation() 阻止了事件冒泡
2: .prevent 调用了 event.preventDefault() 阻止了默认事件
3: {keyCode | keyAlias} - 当时间从特定的按钮上被按的时候，才会触发回调
4: .native - 监听组件根元素的原生事件
5: .once - 只触发一次回调
keyup 按下键盘放下的时候触发
keydown 按下键盘没放的时候触发
.enter 修饰符：触发回车键
修饰符可以串联在一起
-->
<!-- 案例一：.stop 阻止冒泡事件 -->
<div id="app" @click="app_click">
测试测试测试
<button type="button" @click.stop="btn_click">按钮</button>
</div>
<!-- 案例二：.prevent 阻止默认事件 -->
<div id="app1">
<form action="baidu" method="post" @click.prevent="submit_click">
<input type="submit" value="提交"/>
</form>
</div>
<!-- 案例三：监听某个键盘的按键的点击 -->
<div id="app2">
<input type="" name="" id="" value="" / v-on:keyup.enter="seach">
</div>
<!-- 案例四：获取组件开发的监听事件 必须加上.native才能知道是组件开发的 -->
<cop @click.native = 'cpnClick'></cop>
<!-- 案例五：当希望用户的行为只允许触发一次效果时，使用.once可以实现 -->
<div id="app3">
<button type="button" @click.once="btt">只允许一次</button>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:’#app’,
data:{
},
methods:{
app_click(){
console.log(‘app_click’)
},
btn_click(){
console.log(‘btn_click’)
},
submit_click(){
console.log(‘submit_click’)
}
}
})
const ve = new Vue({
el:’#app1’,
data:{
},
methods:{
submit_click(){
console.log(‘submit_click’)
}
}
})
const vt = new Vue({
el:’#app2’,
data:{
},
methods:{
seach(){
alert(‘回车事件触发成功’)
}
}
})
const vn = new Vue({
el:’#app3’,
data:{
},
methods:{
btt(){
console.log(7);
}
}
})
</script>
</html>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
