<!--
指令修饰符：‘.’指明一些指令后缀，不同后缀封装了不同的处理操作->简化代码
1.按键修饰符：@keyup.enter->键盘回车监听
2.v-model修饰符：v-model.trim->去掉首尾空格
v-model.number->转数字
3.事件修饰符：@事件名.stop->阻止冒泡
@事件名.prevent->阻止默认行为
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clock{
width: 200px;
height: 200px;
background-color: aquamarine;
}
.clock02{
width: 100px;
height: 100px;
background-color: darksalmon;
margin: auto;
}
</style>
</head>
<!--
指令修饰符：‘.’指明一些指令后缀，不同后缀封装了不同的处理操作->简化代码
1.按键修饰符：@keyup.enter->键盘回车监听
2.v-model修饰符：v-model.trim->去掉首尾空格
v-model.number->转数字
3.事件修饰符：@事件名.stop->阻止冒泡
@事件名.prevent->阻止默认行为
-->
<body>
<div id="app">
<p>v-model修饰符 .trim .number</p>
账号：<input type="text" placeholder="请输入内容" v-model.trim="uesrName" @keyup.enter="fn"><br>
密码：<input type="text" placeholder="请输入内容" v-model.number="password" @keyup.enter="fn">
<hr>@事件名.stop->阻止冒泡
<div @click="fn02" class="clock">
<div @click.stop="fn03" class="clock02">
</div>
</div>
<hr>阻止链接默认行为
<a @click.prevent href="https://www.baidu.com">阻止链接跳转</a>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
uesrName: '',
password: '',
},
methods: {
fn(){
console.log('键盘回车监听', this.uesrName, this.password)
},
fn02(){
alert('大方块')
},
fn03(){
alert('小方块')
}
}
})
</script>
</body>
</html>
