Vue.js框架学习—事件处理
Vue的事件处理
一、事件的基本使用
Vue中使用v-on:xxx或
xxx绑定事件，其中xxx是事件名，事件的回调需要配置在methods对象中，methods中配置的函数，不要用箭头函数，否则this就不是指向Vue实例，而是指向window，click=“xxx”和click=“xxx(event)”效果一致，但后者可以传参。模板和Vue实例
二、Vue的事件修饰符
1.prevent：阻止默认事件（常用）2.stop：阻止事件冒泡（常用）3.once：事件只触发一次（常用）4.capture：使用事件的捕获模式5.self：只有event.target是当前操作的元素时才触发事件6.passive：事件的默认行为立即执行，无需等待事件回调执行完毕
模板和Vue实例
第一个button按钮使用了once修饰符，所以只有第一次点击，才会跳出弹窗，之后点击不会再跳出弹窗。第二个button按钮没有once修饰符，点击总是会跳出弹窗。
三、Vue的键盘修饰符
Vue中常用的按键别名
回车=enter删除=delete(捕获“删除”和“退格”键)退出=esc空格=space换行=tab(特殊，必须配合keydown去使用)上=up下=down左=left右=right
模板和Vue实例
如果对keydown事件不添加enter修饰符，input框内的值发生变化，span标签的值也会随之发生变化。但对keydown事件添加enter修饰符之后，input框内的值发生变化，span标签的值不会随之变化，只有按下回车键之后，span标签的值才会发生变化。