vue之事件修饰符、按键修饰符

v-on:事件修饰符简化我们的操作 | stop self once prevent

@keydown.left按键修饰符

1.$ref 属性标记
可以将这个内所有用ref 标记的元素添加到当前对象下的 $refs 里边，标记名为key 标记的元素为value
2. .self 只有点击自己的时候才会触发
3…stop 阻止事件冒泡

<div id="app">
    <div @click.self="grand" ref="grand">
        <!-- .self只有点击自己的时候才会触发事件 -->
        老子是爷爷
            <div @click="fa">
            老子是爸爸
                <div @click.stop="son">
                <!-- 阻止事件冒泡，在后边加.stop -->
                你是儿子
                </div>
            </div>
    </div>
</div>
//目的：点击grand打印爷爷，点击fa打印爸爸，点击son打印儿子
var app = new Vue({
    
    
    el : "#app",
    methods : {
    
    
        grand(){
    
    
            // let element = this.$refs.grand; //this下有$refs，然后$refs下有grand信息
            // console.log(element); //这样可以拿到包括grand在内的所有元素及信息

            console.log("grandpa");
        },
        fa(){
    
    
            console.log("father");
        },
        son(){
    
    
            console.log("son");
             //只是这样打印的话会发生事件冒泡，上边的father 和 grandpa都会打印
        }
    }
})

4.prevent 阻止默认事件

<form action="">
    <button @click.prevent="zuzhi">阻止默认事件</button>
</form>

5.键盘事件中的按键修饰符，例如：enter

<div id="app">
    //在事件后边加按键的名称即可
    <input type="text" @keyUp.enter="getMsg">
    {
    
    {
    
    text}}
</div>
var app = new Vue({
    
    
    el : "#app",
    data : {
    
    
        text : ""
    },
    methods : {
    
    
        getMsg(e){
    
    
            // console.log(e); 
            // 打印默认的e 事件对象，可以看到e.target.value是输入的内容
            console.log(e.target.value); //获取输入的内容
            this.text = e.target.value;
            //之前我们的原生方法是这样，这样有一个弊端，就是在输入内容的时候还在打印上边的内容，
            //而我们的按键修饰符则只监听这个按键的事件，会屏蔽一些不必要的监听
            if(e.keyCode==13){
    
    
                this.text=e.target.value
            }
        }
    }
})

// 默认键盘监听 监听所有的事件
// 事件修饰符 只监听指定事件 效率会更高一些

vue之事件修饰符、按键修饰符

猜你喜欢