07-指令的修饰符

一个微不足道的bug

已于 2023-08-12 00:22:01 修改

阅读量75

点赞数

分类专栏： Vue学习笔记文章标签： vue.js

于 2023-08-12 00:19:13 首次发布

本文链接：https://blog.csdn.net/m0_58250910/article/details/132221271

版权

Vue学习笔记专栏收录该内容

82 篇文章 2 订阅

订阅专栏

指令修饰符

通过 "." 指明一些指令后缀,不同后缀封装了不同的处理操作 -> 简化代码

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>
</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.14/dist/vue.js"></script>

    <script>
        const app = new Vue({

            el: '#app',
            data: {
               username:''
            },
            methods:{
                // 监听事件第一个参数一般都是事件对象
                fn(e){
                    // console.log(e)
                    //  @keyup.enter 底层实现原理
                    // if (e.key === 'Enter'){
                    //     console.log("键盘回车时候触发",this.username)
                    // }
                    
                    console.log("键盘回车时候触发",this.username)
                    
                }
            }
        })

    </script>


</body>

</html>

v-model修饰符和事件修饰符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <div id="app">
        <h3> v-mode修饰符 .trim .number</h3>
        <!-- v-model.trim: 首位去空格 -->
        <!-- v-model.number: 转为数字 -->
        姓名: <input v-model.trim="username" type="text"> <br>
        年龄: <input v-model.number="age" type="text"> <br>



        <h3>@事件名.stop -> 阻止冒泡</h3>
        <div @click="fatherFn">
            <div @click.stop="sonFn">子标签</div>
        </div>



        <h3>@事件名.prevent -> 阻止默认行为</h3>
        <a @click.prevent href="https://www.baidu.com">阻止默认行为 </a>

    </div>


    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>

    <script>
        const app = new Vue({

            el: '#app',
            data: {
                username: '',
                age:''
            },
            methods: {
                fatherFn(){
                    alert("父标签被点击了")
                },
                sonFn(e){
                    // e.stopPropagation()  // 阻止冒泡底层方法
                    alert("子标签被点击了")
                }
            }
        })

    </script>


</body>

</html>