1.当我们对Vue进行传递参数时,我们就需要用到事件传值。还有事件修饰符是我们对一些事件的特殊修饰

1.1 代码

<!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">
        <!-- 事件传递参数 -->
        <!-- 这个时候可以把123的值传入下面的方法中 -->
        <!-- $event可以把所有的数据传递给下面的方法中 -->
        <h1 @click="clickH1(123,$event)">123</h1>
        <h1 @click="clickH1(456)">456</h1>

        <!-- 事件修饰符 -->
        <hr>
        <!-- 点击事件只执行一次 -->
        <button @click.once="clickBtn">按钮,点击事件只能执行一次</button>
        <hr>
        <!-- 冒泡(下层元素可以向上层元素进行传播) -->
        <div class="out" @click="clickOut" style="width: 400px;height: 400px;background:pink;">
            <!-- 可以通过stop阻止其冒泡,不让其向外传播 -->
            <!-- 点击橙色的方块时不会执行clickOut的点击事件 -->
            <div class="box" @click.stop="clickBox" style="width: 100px;height: 100px;background: orange;">

            </div>
        </div>

    </div>

    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{

            },
            methods:{
                clickH1(e,event){
                    console.log(e);
                    console.log(event)
                },
                clickBtn(){
                    alert(123)
                },
                clickOut(){
                    console.log("这是out");
                },
                clickBox(){
                    console.log("这是box")
                }
            }
        })
    </script>
</body>
</html>

1.2 显示效果

1.3 在线演示

点击下面链接,即可在线运行

http://www.68yun.top/demo/vue/1.8.html

最后修改:2021 年 02 月 20 日 10 : 19 AM