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

最新推荐文章于 2023-09-18 20:48:36 发布

m0_47734729

最新推荐文章于 2023-09-18 20:48:36 发布

阅读量185

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/m0_47734729/article/details/108840232

版权

vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

m0_47734729

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue笔记-2 事件修饰符按键修饰符

vue中的事件修饰符修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制常用的事件修饰符.stop.prevent.capture.self.once.passive1.事件修饰符stop修饰符用来阻止事件冒泡事件冒泡详情:https://www.jianshu.com/p/3f0ee1f6ec30prevent 事件修饰符用来阻止标签的默认行为self 事件修饰符用来针对于当前标签的事件触发 ===========> 只触发自己标签
复制链接

扫一扫