vue2知识点总结 - vue指令修饰符 - 《vue》

<body>
    <script src='https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js'></script>
    <div id='myApp'>
        指令修饰符: 在vue指令后打点调用的属性,用于给指令添加特定的功能 <br>
        vue中的指令修饰符分为三类: 表单修饰符,  事件修饰符,  键盘修饰符 <br>
        <h3>表单修饰符</h3>
        <div>1, trim 用在v-model中, 用于取出表单输入的首尾空格</div>
        <input type="text" v-model.trim ="str">  =={{str}}==
        <div>2, number 用在v-model中, 用于把表单中的文字转化成数字</div>
        <input type="text" v-model.number="str"> {{str + 3}}
        <div>3, lazy 用在v-model中, 把input事件切换为change事件</div>
        <input type="text" v-model.lazy="str"> {{str}}
        <h3>事件修饰符</h3>
        <div>1, prevent 修饰符用于阻止事件的默认行为</div>
        <a href="./1,代办任务作业.html" @click.prevent="()=>{str='警告'}">律师函警告</a>
        <div>2, stop 修饰符用于阻止事件冒泡</div>
        <a @click="myClick">百度
            <button @click.stop="myClick">律师函警告</button>
        </a>
        <div>3, self 阻止事件挖洞,只有标签本身的事件被触发,子标签的事件不会导致父标签事件触发 </div>
        <a @click.self="myClick">百度
            <button @click="myClick">律师函警告</button>
        </a>
        <div>4, once 限制事件只能触发一次</div>
        <button @click.once="()=>{str++}">您有一次抽奖机会</button>
        <h3>键盘修饰符</h3>
        <div>键盘上任意键的键名都可以当作指令修饰符, 修饰键盘事件, 用于限定哪个键或那些键点击才触发事件</div>
        <input type="text" @keydown.a="myKey"> 
        <input type="text" @keydown.alt.shift.f="myKey">
        <div>指令修饰符是可以链式调用的</div>
        <button @click.once.prevent.stop.self="myClick">点我</button>
        <h2>总结: vue中的指令修饰符有:  .trim  .number  .lazy  .prevent  .self   .stop  .once  .anyKey</h2>
    </div>
    <script>
        new Vue({
            el: '#myApp',
            data: {
                str: ""
            },
            methods: {
                myKey(e){
                    alert(e.key)
                },
                myClick(e){
                    console.log(e.currentTarget)
                }
            }
        })
    </script>
</body>