Vue笔记-2 事件修饰符 按键修饰符

vue中的事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

常用的事件修饰符

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive

1.事件修饰符

stop修饰符

用来阻止事件冒泡

事件冒泡
详情:https://www.jianshu.com/p/3f0ee1f6ec30

prevent 事件修饰符

用来阻止标签的默认行为

self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

once 事件修饰符

once 一次 作用: 就是让指定事件只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01.Vue中事件修饰符使用</title>
    <style>
        .aa{
            background: red;
            width: 300px;
            height: 300px;
        }
    </style>
</head>
<body>
<div id="app">

    <!--只触发标签自身的事件-->
    <div class="aa" @click.self="divClick">

        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">


        <input type="button" value="按钮1" @click="btnClick1">


    </div>


    <hr>

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baidu.com/" @click.prevent.once="aClick">百度</a>

</div>




<div id="app2" class="aa">


<!--事件冒泡-->
    <div @click="aconsole1">
        <input type="submit" value="app2-2" @click="aconsole2">
    </div>

</div>





<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>


<script>
    const app = new Vue({
        el: "#app",
        data: {},
        methods: {
            btnClick(){
                alert('button被点击了');
            },
            divClick(){
                alert('div被点击了');
            },
            aClick(){
                alert('a被点击了');
            },
            btnClick1(){
                alert('btn1被点击了');
            }
        }
    });


    const app2 = new Vue({
        el:"#app2",
        data:{},
        methods: {
            aconsole1: function () {
                console.log("div被触发了");
                alert('div');
            },
            aconsole2: function () {
                console.log("按钮被触发了");
                alert('按钮');
            }

        }
    })
</script>
</body>
</html>



按键修饰符

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

如 enter 回车键

用来在触发回车按键之后触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02.按键修饰符</title>
</head>
<body>
<div id="app">


    <!--
        enter 按键修饰符  在回车之后触发的事件
    -->

    <input type="text" v-model="msg" @keyup.enter="keyups">

    <input type="text" @keyup.left="keytabs">

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
        el: "#app",
        data: {
            msg:"",
        },
        methods: {
            keyups(){
                console.log(this.msg);
            },
            keytabs(){
                console.log("left键触发");
            }
        }
    });
</script>
</body>
</html>
©️2020 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页