1、v-on的修饰符
.stop:阻止事件冒泡
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
.prevent：阻止默认行为
<form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
.enter:监听enter(确认)键的情况-------（按下弹起）
<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
.once：事件只触发一次
<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
******完整代码*******
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./js/vue.js"></script>
</head>
<div id="app">
<div @click="getTitle">
阿Q
<button @click="getBut">按钮</button>
<button @click.stop="getBut2">按钮2</button>
</div>
<br>
<form action="Baidu">
<input type="submit" value="提交">
<input type="submit" value="提交" @click.prevent="getSubmit">
</form>
<br>
<input type="text" @keyup="getKeyup">
<input type="text" @keyup.enter="getKeyup">
<br>
<br>
<button @click="getOnce">按钮</button>
<button @click.once="getOnce">按钮2</button>
</div>
<body>
<script>
let vm = new Vue({
el: '#app',
data: () => ({
}),
methods: {
getTitle: () => {
console.log("啊Q")
},
getBut: () => {
console.log('Btn')
},
getBut2: () => {
console.log('Btn2')
},
getSubmit: () => {
console.log('getSubmit')
},
getKeyup: () => {
console.log('getKeyup')
},
getOnce: () => {
console.log('getOnce')
}
}
})
</script>
</body>
</html>