什么是指令修饰符？

​所谓指令修饰符就是通过“.”指明一些指令后缀， 不同的后缀封装了不同的处理操作 —> 简化代码

按键修饰符

• @keyup.enter —>当点击enter键的时候才触发

    <div class="app"><input type="text" @keyup.enter="fn" v-model="log"></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el:'.app',data:{log:''},methods:{fn(){console.log('按下回车触发打印',this.log)}}})</script>

v-model修饰符

• v-model.trim —>去除首位空格
• v-model.number —>转数字

事件修饰符

• @事件名.stop —> 阻止冒泡
• @事件名.prevent —>阻止默认行为
• @事件名.stop.prevent —>可以连用 即阻止事件冒泡也阻止默认行为

 <style>.father {width: 200px;height: 200px;background-color: pink;margin-top: 20px;}.son {width: 100px;height: 100px;background-color: skyblue;}</style><div id="app"><h3>v-model修饰符 .trim .number</h3>姓名：<input v-model.trim="username" type="text"><br>年纪：<input v-model.number="age" type="text"><br><h3>@事件名.stop     →  阻止冒泡</h3><div @click="fatherFn" class="father"><div @click.stop="sonFn" 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/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},methods: {fatherFn () {alert('老父亲被点击了')},sonFn (e) {// e.stopPropagation()alert('儿子被点击了')}}})</script>