23-Vue之事件修饰符

事件修饰符

前言

本篇来学习两个常用的事件修饰符

阻止默认行为

.prevent : 阻止默认行为

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符title>
head>
<body>
<div id="app">
    <p>{{message}}p>
    <a href="https://blog.csdn.net/it_heima" @click="showMes">跳转小白的博客a>
    
    <a href="https://blog.csdn.net/it_heima" @click.prevent="showInfo">跳转小白的博客a>
div>


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

<script>
    // 创建vue的实例对象
    const app = new Vue({
        // el 属性是固定写法，表示当前vue实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data对象是要渲染页面上的数据
        data: {
            message: '事件修饰符学习！'
        },
        methods: {
            showMes(e) {
                console.log('被点击了！')
                // 原生 阻止默认行为写法，对应a标签来说就是阻止跳转
                e.preventDefault()
            },
            showInfo() {
                console.log('被点击了！')
            }
        }
    });
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

阻止冒泡事件

.stop ：阻止冒泡事件
如下为未阻止冒泡事件示例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符title>
head>
<body>
<div id="app">
    <p>{{message}}p>
    <a href="https://blog.csdn.net/it_heima" @click="showMes">跳转小白的博客a>
    
    <a href="https://blog.csdn.net/it_heima" @click.prevent="showInfo">跳转小白的博客a>

    <hr>

    <div style="height: 150px;background-color: orange;padding-left: 100px;line-height: 150px" @click="divHandler">
        <button @click="btnHandler">按钮button>
    div>
div>


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

<script>
    // 创建vue的实例对象
    const app = new Vue({
        // el 属性是固定写法，表示当前vue实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data对象是要渲染页面上的数据
        data: {
            message: '事件修饰符学习！'
        },
        methods: {
            showMes(e) {
                console.log('被点击了！')
                // 原生 阻止默认行为写法，对应a标签来说就是阻止跳转
                e.preventDefault()
            },
            showInfo() {
                console.log('被点击了！')
            },
            btnHandler() {
                console.log('btn 点击事件')
            },
            divHandler() {
                console.log('div 点击事件')
            }
        }
    });
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55

在这里插入图片描述

阻止冒泡事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件修饰符title>
head>
<body>
<div id="app">
    <p>{{message}}p>
    <a href="https://blog.csdn.net/it_heima" @click="showMes">跳转小白的博客a>
    
    <a href="https://blog.csdn.net/it_heima" @click.prevent="showInfo">跳转小白的博客a>

    <hr>

    <div style="height: 150px;background-color: orange;padding-left: 100px;line-height: 150px" @click="divHandler">
        <button @click="btnHandler">按钮button>
        <button @click.stop="btnHandler1">按钮button>
    div>
div>


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

<script>
    // 创建vue的实例对象
    const app = new Vue({
        // el 属性是固定写法，表示当前vue实例要控制页面上的哪个区域，接收的值是一个选择器
        el: '#app',
        // data对象是要渲染页面上的数据
        data: {
            message: '事件修饰符学习！'
        },
        methods: {
            showMes(e) {
                console.log('被点击了！')
                // 原生 阻止默认行为写法，对应a标签来说就是阻止跳转
                e.preventDefault()
            },
            showInfo() {
                console.log('被点击了！')
            },
            btnHandler(e) {
                console.log('btn 点击事件')
                // 原生阻止冒泡事件
                e.stopPropagation()
            },
            btnHandler1() {
                console.log('btn 点击事件1')
            },
            divHandler() {
                console.log('div 点击事件')
            }
        }
    });
script>


body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

相关阅读:
如何成功地将 OKR 推广到您的组织
 机器人过程自动化(RPA)入门 1. 什么是机器人过程自动化？
V-for中 key 值的作用，如何选择key
百果园再冲刺港交所上市：扩张靠加盟和放贷，余惠勇夫妇为实控人
 1-4metasploitable2介绍
 CSS基础选择器
 数据化管理洞悉零售及电子商务运营——商品中的数据化管理
 OpenPCDet解析
 使用OAK-D相机跑ORB-SLAM3算法遇到的问题总结
 数据结构与算法（十三）——红黑树1
原文地址：https://blog.csdn.net/IT_heima/article/details/128055342