<!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自學(xué)：v-on的修飾符使用</title>
</head>
<body>
<!--
vue提供了修飾符來幫助我們處理一些事件
1: .stop-調(diào)用了 event.stopPropagation() 阻止了事件冒泡
2: .prevent 調(diào)用了 event.preventDefault() 阻止了默認(rèn)事件
3: {keyCode | keyAlias} - 當(dāng)時間從特定的按鈕上被按的時候，才會觸發(fā)回調(diào)
4: .native - 監(jiān)聽組件根元素的原生事件
5: .once - 只觸發(fā)一次回調(diào)
keyup 按下鍵盤放下的時候觸發(fā)
keydown 按下鍵盤沒放的時候觸發(fā)
.enter 修飾符：觸發(fā)回車鍵
修飾符可以串聯(lián)在一起
-->
<!-- 案例一：.stop 阻止冒泡事件 -->
<div id="app" @click="app_click">
測試測試測試
<button type="button" @click.stop="btn_click">按鈕</button>
</div>
<!-- 案例二：.prevent 阻止默認(rèn)事件 -->
<div id="app1">
<form action="baidu" method="post" @click.prevent="submit_click">
<input type="submit" value="提交"/>
</form>
</div>
<!-- 案例三：監(jiān)聽某個鍵盤的按鍵的點(diǎn)擊 -->
<div id="app2">
<input type="" name="" id="" value="" / v-on:keyup.enter="seach">
</div>
<!-- 案例四：獲取組件開發(fā)的監(jiān)聽事件 必須加上.native才能知道是組件開發(fā)的 -->
<cop @click.native = 'cpnClick'></cop>
<!-- 案例五：當(dāng)希望用戶的行為只允許觸發(fā)一次效果時，使用.once可以實(shí)現(xiàn) -->
<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(‘a(chǎn)pp_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(‘回車事件觸發(fā)成功’)
}
}
})
const vn = new Vue({
el:’#app3’,
data:{
},
methods:{
btt(){
console.log(7);
}
}
})
</script>
</html>
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號
收藏
