Vue学习：Vue中的事件处理

一、事件的基本使用

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

2、事件的回调需要配置在method对象中，最终会在vm上；

3、methods中配置的函数，不需要用箭头函数，否则this就不是vm了；

4、methods中配置的函数，都是vue所管理的函数，this的指向是vm或组件实例对象；

二、Vue中的事件修饰符

1、prevent：阻止默认事件；

2、stop：阻止事件冒泡；

3、once：事件只触发一次；

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

<div @click.capture="showInfo(1)">

div1

<div @click="showInfo(2)">

div2

</div>

</div>

methods: {

                showInfo(number){

                    console.log(number);

               

                }

            },

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

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

三、键盘事件

键盘事件中@keyup是键盘按下又弹起时触发，@keydown是键盘按下时触发；

列举一些常见的按键别名，包括enter、delete、esc、tab、up、down、left、right，使用时直接在@keyup或@keydown后面添加即可，其中tab只有在使用@keydown后才会有效果，还要一些特殊的别名，包括：ctrl、alt、meta、shift，它们配合@keyup使用时，按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发，配合@keydown使用时，正常触发事件。