Vue.js框架学习—事件处理:和合符

Vue的事件处理

一、事件的基本使用

师父微信:  sanqingge8

师父微信：   sanqingge8

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标签的值才会发生变化。

标签：和合符