一、 事件的基本使用

1.使用v-on:xxx 或 @xxx绑定事件 其中xxx是事件名

2.事件的回调需要配置在methods对象中 最终会在VM上

3.methods中配置的函数，不需要箭头函数 否则this就不是VM了

4.methods中配置的函数 都是被vue所管理的函数 this的指向是VM 或组件实例对象

5.@click="demo" 和 @click="demo($even,number)"效果是一样的 但是后者可以传参

二、 vue中的事件修饰符

1.prevent：阻止默认事件

2.stop：阻止事件冒泡

3.once：事件只触发一次

4.capture：使用事件的捕获模式

5.self：只有event.target是当前操作的元素时才触发事件

6.passive：事件的默认行为立即执行 无需等待事件回调执行完毕

<div id="root">
        <h2>欢迎来到{{name}}学习</h2>
        <!-- prevent：阻止默认事件 -->
        <!-- 阻止链接跳转 -->
        <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.prevent="showInfo">点我提示信息</a>

        <!-- stop：阻止事件冒泡 -->
        <div @click="showInfo" class="demo1">
            <button @click.stop="showInfo">点我提示信息</button>
            <!--修饰符可以连续写  即阻止冒泡 又阻止跳转 -->
            <a href="https://www.bilibili.com/video/BV1Zy4y1K7SH?p=15" @click.stop.prevent="showInfo">点我提示信息</a>

        </div>

        <!-- once：事件只触发一次 -->
        <button @click.once="showInfo">点我提示信息</button>

        <!-- capture：使用事件的捕获模式 -->
        <div class="box1" @click.capture="showMsg(1)">
            div1
            <div  class="box2" @click="showMsg(2)">
                div2
            </div>
        </div>

        <!-- self：只有event.target是当前操作的元素时才触发事件 -->
        <div @click.self="showInfo" class="demo1">
            <button @click="showInfo">点我提示信息</button>
        </div>

        <!-- passive：事件的默认行为立即执行 无需等待事件回调执行完毕 -->
        <!-- @scroll="demo" 滚动条的滚动 @wheel="demo"鼠标滚轮的滚动-->
        <ul class="list" @wheel.passive="demo">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
     </div>

三、vue中常用的按键别名

回车 enter

删除 delete

退出 esc

空格 space

换行 tab(特殊 必须配合keydown使用)

上 up

下 down

左 left

右 right

1.vue中未提供别名的按键 可以使用按键原始的key值去绑定 但注意要转为kebab-case(短横线命名)

2.系统修饰键(用法特殊) ctrl alt shift meta

配合keyup使用：按下修饰键（win）的同时，再按下其他键 随后释放其他键 事件才被触发

配合keydown使用：正常触发

也可以使用keyCode去指定具体的按键（不推荐）

Vue.config.keyCode.自定义键名 = 键码 可以去定制键码

<div id="root">
       <h2>欢迎来到{{name}}学习</h2>  
       <input type="text" name="" id="" placeholder="按下回车提示输入" @keyup.enter="showInfo">
    </div>