Vue修饰符（Vue事件修饰符、Vue按键修饰符）

//在原有的代码基础上增加一个超链接
 "http://www.baidu.com" @click.prevent="four">去百度
//在methods中增加一个函数
 four(){
                    console.log('去百度');
                }

 
capture="three">
            <span @click.capture="two">
                <button @click.capture="one">{{msg}}button>
            span>
        

"three">
            <span @click.capture="two">
                <button @click="one">{{msg}}button>
            span>
        

.once

添加了.once事件修饰符

没有添加once事件修饰符前，每点击按钮一次，就会触发事件一次，添加了once事件修饰符后

 
"three">
            <span @click="two">
                <button @click.once="one">{{msg}}button>
            span>
        

我们给button添加了once，所以1只会打印一次，其余的会默认冒泡事件触发，答应出2,3

Vue按键修饰符

.enter 回车键

.delete 键

.esc 键

.space 空格键

.up 箭头上键

.dowm 箭头下键

.left 箭头左键

.right 箭头右键

.tab 键 （无法触发keyup事件，只能触发keydown事件） 

四个特殊键

ctrl,alt,shift,meta(也就是win标志，田)

对于keydown事件来说，只需要直接按下对应的键就可以触发

对于keyup时间来说，需要按下对应的键，并且加上按下组合键，然后松开组合键，才可以触发keyup事件.组合键就类似于：ctrl+c、ctrl+x等

class="app">
        <h1>{{msg}}h1>
        回车键："text" @keyup.enter="getInfo">
       delete键："text" @keyup.delete="getInfo">
        esc键："text" @keyup.esc="getInfo">
        space键："text" @keyup.space="getInfo">
        up键："text" @keyup.up="getInfo">
        down键："text" @keyup.down="getInfo">
        left键："text" @keyup.left="getInfo">
        right键："text" @keyup.right="getInfo">
        tab键："text" @keydown.tab="getInfo">
    
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'按键修饰符'
            },
            methods:{
                getInfo(e){
                    console.log(e.target.value);
                }
            }
        })
    script>

按下对应的案件后会立即调用函数

获取某个键的按键修饰符

通过event.key获取这个键的真实名字

将这个真是名字以kebab-case风格进行命名 例：pageDown是真实名字，命名后，page-down

class="app">
        <h1>{{msg}}h1>
       回车键："text" @keyup.enter="getInfo">
    
    <script>
        const vm = new Vue({
            el:'.app',
            data:{
                msg:'按键修饰符'
            },
            methods:{
                getInfo(e){
                    console.log(e.key);
                }
            }
        })
    script>

按下回车时，打印出相应的按键