Vue学习记录-11

最新推荐文章于 2024-07-24 11:11:41 发布

weixin_43821826

最新推荐文章于 2024-07-24 11:11:41 发布

阅读量117

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/weixin_43821826/article/details/126199235

版权

Vue学习记录-11

1、学习代码

<!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">
    <script src="../js/vue.js"></script>
    <title>事件修饰符</title>
    <style>
        *{
            margin-top: 20px;
        }
        .demo1{
            height: 50px;
            background-color: aquamarine;
        }
        .box1{
            padding: 5px;
            background-color: aqua;
        }
        .box2{
            padding: 5px;
            background-color: yellowgreen;
        }
        .box3{
            padding: 5px;
            background-color: aqua;
        }
        .box4{
            padding: 5px;
            background-color: yellowgreen;
        }
        .list{
            height: 200px;
            width: 200px;
            background-color: yellow;
            overflow: auto;
        }
        li{
            height: 100px;
        }

    </style>
</head>
<body>
    <div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent即事件修饰符：阻止默认事件 -->
        <a :href="url" @click.prevent="showInfo">点我提示信息</a>
        <!-- stop：阻止事件冒泡 -->
        <div class="demo1" @click="showInfo">
            <button @click.stop="showInfo">点我提示信息</button>
        </div>
        <!-- once:事件只触发一次 -->
        <div class="demo2">
            <button @click.once="showInfo">点我提示信息</button>
        </div>
        <!--  使用事件的捕获模式-->
        <div class="box1" @click="showMsg('box1')">
            div1
            <div class="box2" @click="showMsg('box2')">
                div2
            </div>
        </div>
        <!-- slef:只有当是对该组件进行操作时才会触发方法否则不执行 -->
        <div class="box3" @click.self="showMsg('box3')">
            div3
            <div class="box4" @click="showMsg('box4')">
                div4
            </div>
        </div>
<!-- passive: 如果我定义的函数很耗时影响了组件本身的效果事件，则组件本身的效果事件不会等待我定义的事件执行完毕而会立即执行-->
<!-- scroll/wheel两种方式 wheel会受到自定义函数的影响scroll不会-->
        <ul class="list" @scroll="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>

    </div>
    <script>
        const vm = new Vue({
            el:'#root',
            data:{
                name:'北方工业大学',
                url:'http://www.baidu.com'
            },
            methods:{
                showInfo(e){
                    // e.preventDefault()//阻止默认行为
                    alert('同学你好')
                },
                showMsg(msg){
                    alert(msg)
                },
                demo(){
                    console.log('滚动')
                    for(let i = 0;i<100000;i++){
                        console.log('#')
                    }
                    console.log('累坏了')
                }
            }
        })
    </script>
</body>
</html>