vue之修饰符

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 右键
posted @ 2024-04-28 20:26  Unfool  阅读(45)  评论(0)    收藏  举报