Vue框架--方法和事件的绑定

春意迟迟、

已于 2022-10-11 15:16:15 修改

阅读量103

点赞数 1

文章标签： vue.js javascript 前端

于 2022-08-31 13:49:46 首次发布

本文链接：https://blog.csdn.net/qq_58167492/article/details/126620824

版权

方法都写在methods的对象中。（以下的写法都是正确的）

<script>
        function fn4() { console.log("fn4") }
        var fn5 = () => { console.log("fn5") }
        var fn6 = function () { console.log("fn6") }
        
        new Vue({
            el: "#app",
            data: {},
            methods: {
                fn1() { console.log("fn1") },
                fn2: function () { console.log("fn2") },
                fn3: () => { console.log("fn3") },
                fn4,
                fn5,
                fn6
            }
        })
</script>

事件绑定：

v-on: 和 @ 都是绑定事件的指令，指令后面跟事件类型,值就是methds中的方法,可以加小括号也可以不加。

事件修饰符：

.stop 阻止冒泡，阻止从当前元素经过的所有冒泡行为。

.prevent 阻止默认事件。

.capture 添加事件侦听器时让事件在捕获阶段触发。

.self 其他元素的事件触发时事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素。

.once 事件只触发一次,触发完之后,事件就解绑。

.native 事件在当前环境就可以运行

多修饰符一起使用:连点

<!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="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>
</head>

<body>
    <style>
        .son1 {
            width: 300px;
            height: 300px;
            background-color: blueviolet;
        }

        .son2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }

        .son3 {
            width: 100px;
            height: 100px;
            background-color: burlywood;
        }
    </style>

    <div class="box">
        <!-- @click:行内绑定点击事件-->
        <!-- capture:事件在捕获阶段就触发(不管点击哪个盒子，盒子1先触发，要理解事件链) -->
        <div class="son1" @click.capture="box1">
            盒子1
            <!-- 
                self:只有此对象为目标事件是才触发
                stop:阻止事件冒泡(当点击盒子2时，不会触发盒子1的事件)
             -->
            <div class="son2" @click.self.stop="box2">
                盒子2
                <div class="son3" @click="box3">盒子3</div>
            </div>
        </div>
        <hr>
        <!-- prevent:阻止默认事件触发(默认事件:标签自带的属性) -->
        <a @click.prevent="fn1" :href="url">prevent:阻止默认事件触发(默认事件:标签自带的属性)</a>
        <hr>
        <!-- v-on:click与@click效果一样,都是点击事件 -->
        <button v-on:click="fn1">v-on:click与@click效果一样</button><br>
        <hr>
        <!-- fn()与fn效果差不多的，只是fn()可以传参 -->
        <button @click="fn2(20)">fn2</button><br>
        <hr>
        <!-- once:只执行一次，再次执行只能刷新页面 -->
        <button @click.once="fn1">倒计时（只执行一次）</button>
    </div>

    <script>
        new Vue({
            el: ".box",
            data: {
                url: "www.baidu.com"
            },

            methods: {
                box1() {
                    console.log("打印的是盒子1")
                },
                box2() {
                    console.log("打印的是盒子2")
                },
                box3() {
                    console.log("打印的是盒子3")
                },
                fn1() {
                    color = "red"
                    console.log("6666")
                },
                fn2(n) {
                    console.log(n)
                }
            }
        })
    </script>
</body>

</html>

结果图：

分析：