Vue2中的指令修饰符
指令修饰符
通过“ . ”指明一些指令后缀，不同后缀封装了不同的处理操作 -》简化代码
按键修饰符：@keyup.enter -> 键盘回车监听
<!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></style> </head><body><div id="app"><h3>@keyup.enter =》监听键盘回车事件</h3><input @keyup.enter="fn" v-model="username" type="text"></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username:''},methods: {fn(){console.log('键盘回车时触发',this.username);}},})</script> </body></html>v-model修饰符：v-model.trim ->去除首尾空格 ； v-model.number->转数字
事件修饰符：@事件名.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>.fat{width: 200px;height: 200px;background-color: pink;}.son{width: 100px;height: 100px;background-color: orangered;}</style> </head><body><div id="app"><h3>v-model修饰符:.trim .number</h3>姓名:<input v-model.trim="username" type="text">年龄:<input v-model.number="age" type="text"><h3>@事件名.stop -></h3><div @click="fat" class="fat"><div @click.stop="son" class="son"></div></div><h3>@事件.prevent ->阻止默认行为</h3><a @click.prevent href="http://www.baidu.com">阻止默认行为</a></div><!-- 引入是开发版本的包 --><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},methods: {fat() {alert("点击了father")},son() {alert("点击了son")}},})</script> </body></html>