【前端笔记】八、vue指令的事件修饰符

最新推荐文章于 2024-08-16 18:15:23 发布

知识的芬芳和温柔的力量全都拥有的小王同学

最新推荐文章于 2024-08-16 18:15:23 发布

阅读量107

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/tensixchuan/article/details/120421692

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

vue指令的事件修饰符

.stop 阻止冒泡
.prevent 阻止默认事件
.capture 添加事件侦听器时使用事件捕获机制
.once 事件只触发一次
.self 只在元素本身被触发时触发回调事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/vue.js"></script>
    <style>
        .inner {
            height: 150px;
            background-color: rgb(16, 153, 172);
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="inner" @click="div1Handler">
            <!-- 使用.stop 阻止冒泡 -->
            <!-- 本来点button先触发btnHandle再触发div1Handler，添加.stop后阻止了冒泡，只触发了btnHandle -->
            <input type="button" value="点击" @click.stop="btnHandle">
        </div>

        <!-- .prevent 阻止默认事件 -->
        <!-- link默认跳转，使用.prevent后只触发linkHandle事件，不会自动跳转 -->
        <a href="http://www.baidu.com" @click.prevent="linkHandle">baidu</a>

        <!-- .capture 添加事件侦听器时使用事件捕获机制 -->
        <!-- 本来点button先触发btnHandle再触发div1Handler，添加.capture后先触发div1Handler再触发btnHandle -->
        <div class="inner" @click.capture="div1Handler">
            <input type="button" value="点击" @click.stop="btnHandle">
        </div>

        <!-- .once 事件只触发一次 -->
        <a href="http://www.baidu.com" @click.prevent="linkHandle">baidu</a>

        <!-- .self 只在元素本身被触发时触发回调事件 -->
        <!-- 本来点子元素button会先触发btnHandle再触发div1Handler，添加.self后只有点击inner自身才会触发div1Handler -->
        <div class="inner" @click.self="div1Handler">
            <input type="button" value="点击" @click.stop="btnHandle">
        </div>
        <!-- 注：事件修饰符可以串联 -->

        <!-- v-model可以双向绑定数据，而且v-bind只能从model到view单项绑定 -->
        <h4 v-text="msg"></h4>
        <input type="text" :value="msg">
        <input type="text" v-model="msg">
        <!-- 注：v-model只能运用在表单元素上，即input（radio、text、address、email等）、select、checkbox -->
    </div>

    <script>
        //创建Vue实例，得到ViewModel
        var vm = new Vue({
            el: "#app",
            data: {
                msg: "绑定数据"
            },
            methods: {
                div1Handler() {
                    console.log("触发inner点击事件")
                },
                btnHandle() {
                    console.log("触发btn点击事件")
                },
                linkHandle() {
                    console.log("触发link点击事件")
                }
            }
        });
    </script>

</body>

</html>

参考：

事件修饰符的介绍

知识的芬芳和温柔的力量全都拥有的小王同学

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【前端笔记】八、vue指令的事件修饰符

vue指令的事件修饰符.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获机制.once 事件只触发一次.self 只在元素本身被触发时触发回调事件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
复制链接

扫一扫

专栏目录