vue3基础学习

xiangchengkang

已于 2022-04-20 22:04:48 修改

阅读量285

点赞数

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

于 2022-04-20 21:37:01 首次发布

本文链接：https://blog.csdn.net/qq_45645345/article/details/124307884

版权

Vue 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章目录

属性/事件绑定

<body>
<div id="app">
    <p v-text="username"></p>
    <p v-text="gender"></p>
    <p>点击数：{{count}}</p>
    <button @click="addCount">+1</button>
</div>

<script src="./vue-2.6.12.js"></script>

<script>
    const mv = new Vue({
        el: "#app",
        data: {
            username: "zs",
            gender: "男",
            count: 0,
        },
        methods: {
            addCount() {
                this.count += 1
            }
        }
    })
</script>
</body>

事件对象event

<body>
<div id="app">
    <p v-text="username"></p>
    <p v-text="gender"></p>
    <p>点击数：{{count}}</p>
    <button @click="addCount">+1</button>
</div>

<script src="./vue-2.6.12.js"></script>

<script>
    const mv = new Vue({
        el: "#app",
        data: {
            username: "zs",
            gender: "男",
            count: 0,
        },
        methods: {
            addCount(e) {
                const nowBgColor = e.target.style.backgroundColor
                e.target.style.backgroundColor = nowBgColor === "red" ? "" : "red"
                console.log(nowBgColor)
                this.count += 1
            }
        },
    })
</script>
</body>

绑定事件并传参

<body>
<div id="app">
    <p v-text="username"></p>
    <p v-text="gender"></p>
    <p>点击数：{{count}}</p>
    <button @click="addCount(3)">+3</button>
</div>

<script src="./vue-2.6.12.js"></script>

<script>
    const mv = new Vue({
        el: "#app",
        data: {
            username: "zs",
            gender: "男",
            count: 0,
        },
        methods: {
            addCount(step) {
                this.count += step
            }
        },
    })
</script>
</body>

事件传参之$event

<body>
<div id="app">
    <p v-text="username"></p>
    <p v-text="gender"></p>
    <p>点击数：{{count}}</p>
    <button @click="addCount(3,$event)">+3</button>
</div>

<script src="./vue-2.6.12.js"></script>

<script>
    const mv = new Vue({
        el: "#app",
        data: {
            username: "zs",
            gender: "男",
            count: 0,
        },
        methods: {
            addCount(step, e) {
                const nowBgColor = e.target.style.backgroundColor
                e.target.style.backgroundColor = nowBgColor === "red" ? "" : "red"
                console.log(nowBgColor)
                this.count += step
            }
        },
    })
</script>
</body>

事件修饰符

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .inner {
            line-height: 100px;
            background-color: aliceblue;
            font-size: 13px;
            text-align: center;
        }

        .outer {
            background-color: bisque;
            padding: 50px;
            font-size: 13px;
        }

        .box {
            background-color: coral;
            padding: 50px;
        }
    </style>
</head>

<body>
<!-- 在页面中声明一个将要被 vue 所控制的 DOM 区域 -->
<div id="app">
    <h4>① .prevent 事件修饰符的应用场景</h4>
    <a href="https://www.baidu.com" @click="onLinkClick">百度首页</a>

    <hr/>

    <h4>② .stop 事件修饰符的应用场景</h4>
    <div class="outer" @click="onOuterClick">
        外层的 div
        <div class="inner" @click="onInnerClick">内部的 div</div>
    </div>

    <hr/>

    <h4>③ .capture 事件修饰符的应用场景</h4>
    <div class="outer" @click="onOuterClick">
        外层的 div
        <div class="inner" @click="onInnerClick">内部的 div</div>
    </div>

    <hr/>

    <h4>④ .once 事件修饰符的应用场景</h4>
    <div class="inner" @click="onInnerClick">内部的 div</div>

    <hr/>

    <h4>⑤ .self 事件修饰符的应用场景</h4>
    <div class="box" @click="onBoxClick">
        最外层的 box
        <div class="outer" @click="onOuterClick">
            中间的 div
            <div class="inner" @click="onInnerClick">内部的 div</div>
        </div>
    </div>

    <hr/>
</div>

<script src="./vue-2.6.12.js"></script>

<script>
    const vm = new Vue({
        el: '#app',
        // 声明处理函数的节点
        methods: {
            // 超链接的点击事件处理函数
            onLinkClick() {
                alert('ok')
            },
            // 点击了外层的 div
            onOuterClick() {
                console.log('触发了 outer 的 click 事件处理函数')
            },
            // 点击了内部的 div
            onInnerClick() {
                console.log('触发了 inner 的 click 事件处理函数')
            },
            onBoxClick() {
                console.log('触发了 box 的 click 事件处理函数')
            }
        },
    })
</script>
</body>

</html>

 <a href="https://www.baidu.com" @click.prevent="onLinkClick">百度首页</a>

      <div class="inner" @click.stop="onInnerClick">内部的 div</div>

    <div class="outer" @click.capture="onOuterClick">

    <div class="inner" @click.once="onInnerClick">内部的 div</div>

  <div class="outer" @click.self="onOuterClick">

在这里插入图片描述

按键修饰符

xiangchengkang

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3基础学习

属性/事件绑定<body><div id="app"> <p v-text="username"></p> <p v-text="gender"></p> <p>点击数：{{count}}</p> <button @click="addCount">+1</button></div><script src="./vue-2.6.1
复制链接

扫一扫