1 修饰符分类
· 表单修饰符---（属于v-model进阶使用）
· 事件修饰符
· 按键修饰符
· v-bind修饰符
2、表单修饰符
| 修饰符 | 作用 | 使用 |
|---|---|---|
| lazy | 填写信息之后，光标离开标签的时候才会将值赋予给value | |
| trim | 自动过滤用户输入的首个空格字符，中间的空格不会过滤 | |
| number | 自动将用户输入的值转换为数字类型，如果不能被parseFloat解析，会返回原来的值 |
实际代码展示：
<body>
<div id="app">
<h1>v-model进阶</h1>
<input type="text" v-model.lazy="name">====>{{name}}
<br>
<input type="text" v-model.number="name1">====>{{name1}}
<br>
<input type="text" v-model.trim="name2">====>{{name2}}
<br>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name:'',
name1:'',
name2:'',
},
})
</script>
3 事件修饰符
| 修饰符 | 作用 |
|---|---|
| stop | 阻止了事件冒泡 ，相当于调用了event.stopPropagation 只处理自己的事件，父控件冒泡的事件不处理（阻止事件冒泡） |
| self | 只处理自己的事件，子控件冒泡的事件不处理 将事件绑定在自身身上，相当于阻止事件冒泡 |
| prevent | 阻止了事件的默认行为，相当于调用了event.preventDefault方法阻止a链接的跳转 |
| once | 事件只会触发一次（适用于抽奖页面） |
代码展示：
<body>
<div id="app">
<h1>事件修饰符--stop</h1>
<div class="top" @click="handleTop">
<div class="inner" @click.stop="handleInner">点我</div>
</div>
<h1>事件修饰符--self</h1>
<div class="top" @click.self="handleTop">
<div class="inner" @click="handleInner">点我</div>
</div>
<h1>事件修饰符--prevent</h1>
<a href="https://www.baidu.com" @click.prevent="handleA">点我看美女</a>
<h1>事件修饰符--once</h1>
<button @click.once="handleOnce">抽奖</button>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {},
methods: {
handleTop() {
console.log('父亲')
},
handleInner() {
console.log('子子')
},
handleA(){
console.log('a 被点了')
location.href='https://www.baidu.com'
},
handleOnce(){
console.log('只会执行一次')
}
}
})
</script>
</html>
4 按键修饰符
.enter 回车键
.delete 键
.esc 键
.space 空格键
.up 箭头上键
.dowm 箭头下键
.left 箭头左键
.right 箭头右键
.tab 键 （无法触发keyup事件，只能触发keydown事件）
# 1 按下某个键盘，触发事件，通过修饰控制只有按下某个键，才触发事件
#2 keyCode对应表--》按键修饰符
https://www.cnblogs.com/841019rossi/p/16808455.html
特殊键
ctrl,alt,shift,meta(也就是win标志，田)
代码展示：
<body>
<div id="app">
<h1>按键事件</h1>
<input type="text" v-model="name" @keyup="handleKeyUp">-->{{name}}
<h1>按键修饰符</h1>
<input type="text" v-model="name1" @keyup.13="handleKeyUp2">-->{{name1}}
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
name: '',
name1: '',
},
methods:{
handleKeyUp(event){
console.log('按下了：',event.key,event)
},
handleKeyUp2(){
console.log('enter被按了')
}
}
})
</script>
</html>
5 常见的应用场景
| 修饰符 | 应用场景 |
|---|---|
| .stop | 阻止事件冒泡 |
| .native | 绑定原生事件 |
| .once | 事件只执行一次 |
| .self | 将事件绑定在自身，相当于阻止事件冒泡 |
| .prevent | 阻止默认事件 |
| .caption | 用于事件捕获 |
| .keyCode | 监听特定键盘的按下 |
| .right | 右键 |