.stop：停止冒泡
.once：点击回调只触发一次
.prevent: 阻止默认行为,如阻止表单提交
.stop.prevent：串联修饰符像工厂模式
keyup.enter： 键修饰符，监听回车键
常用按键：
@keyup.13 回车
@keyup.enter 回车
@keyup.left 左键
@keyup.right 右键
@keyup.up 上键
@keyup.down 下键
@keyup.delete 删除键
我是分割线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div @click="doIt" style="width: 100px;height: 50px;background: pink">
<button @click.stop="doIt">停止冒泡</button>
</div>
<button @click.once="doIt">点击回调只触发一次</button>
<br>
<button @click.prevent="doIt">阻止默认行为</button>
<br>
<form action="/getInfo" @submit.prevent>
<input type="submit" value="阻止表单提交" @click="doIt">
</form>
<br>
<button @click.stop.prevent="doIt">串联修饰符</button>
<br>
<input @keyup.enter="doIt">键修饰符，监听回车键</input>
<br>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!',
},
methods:{
doIt() {
alert("doIt");
},
}
});
</script>
</body>
</html>
我是分割线
前台效果：
Title
键修饰符，监听回车键