07-事件处理器

<style>
    * {
        padding-top: 10px;
    }

    .demo1 {
        height: 100px;
        background-color: aqua;
    }

    .box {
        height: 50px;
        background-color: antiquewhite;
    }

    ul {
        height: 400px;
        width: 500px;
        background-color: bisque;
        overflow: auto;
    }

    li {
        height: 200px;
        /* background-color: aqua; */
    }
</style>
 <!-- 准备一个容器 -->
<div id="root">
    <h1>你好啊，{{name}}</h1>
    <!-- prevent（就是事件修饰符）：阻止默认事件（常用） -->
    <a href="https://juejin.cn/" @click.prevent="showInfo">点我提示信息</a>
    <!-- stop:阻止事件冒泡（常用） -->
    <div class="demo1" @click="showInfo">
        <button @click.stop="showInfo">点我提示信息</button>
        <!-- 修饰符可以连续写 -->
        <!-- <a href="https://juejin.cn/" @click.stop.prevent="showInfo">点我提示信息</a> -->
    </div>
    <!-- once:事件只触发一次（常用） -->
    <button @click.once="showInfo">点我提示信息</button>
    <!-- capture:使用事件的捕获模式 -->
    <div class="demo1" @click.capture="showMsg(1)">
        div1
        <div class="box" @click="showMsg(2)">div2</div>
    </div>
    <!-- self:只有event.target是当前操作的元素时才触发事件 -->
    <div class="demo1" @click.self="showInfo">
        <button @click="showInfo">点我提示信息</button>
    </div>
    <!-- passive:事件的默认行为立即执行，无需等待事件回调执行完毕 -->
    <!-- scroll滚动条---wheel鼠标滚轮 -->
    <ul @wheel.passive="demo">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script>

    //创建Vue实例
    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
            name: 'world'

        },
        methods: {
            showInfo(e) {
                // e.preventDefault()
                // e.stopPropagation()
                alert('同学好')
                // console.log(event.target)
            },
            showMsg(Msg) {
                console.log(Msg)
            },
            demo() {
                for (let i = 0; i < 100000; i++) {
                    console.log('#')
                }
                console.log('累死了')
            }
        }
    })
</script>


    

 <!-- 准备一个容器 -->
<div id="root">
    <h1>hi,{{name}}</h1>
    <!-- CapsLock得这样写caps-lock   --keydown.tab---  --keydown.ctrl-- --keyup.huiche-- --keyup.ctrl.y-- -->
    <input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
</div>
<script>
    Vue.config.keyCodes.huiche = 13//定义了一个别名按键

    //创建Vue实例
    new Vue({
        el: '#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
        data: {//data用于储存数据，数据供el指定的容器使用，值我们先暂时写成一个对象
            name: 'world'

        },
        methods: {
            showInfo(e) {
                console.log(e.key, e.keyCode)
                // if (e.keyCode !== 13) return
                // console.log(e.target.value)
            }
        }
    })
</script>