Vue学习笔记

Vue学习笔记

事件处理

Vue标签

v-bind
v-model
v-on

标签简写

v-bind：x="a" ===> :x="a"
v-model:value="a" ===> v-model="a"
v-on:click="method" ===> @click="method"

事件

click 鼠标点击事件
scroll 滚动条移动事件
wheel 鼠标滚轮移动事件
keyup/keydown 键盘事件

事件修饰符

prevent：阻止默认事件（如a标签的跳转）
stop：组织事件冒泡（事件传到父元素）
once：事件只触发一次
capture：使用时间的额捕获模式
self：只有event.target是当前操作的元素时才触发事件
passive：事件的默认行为立即执行，无需等待事件回调执行完毕

键盘事件

Vue中常见的按键别名

回车 => enter
删除 => delete(捕获“删除”和“退格”键）
退出 => esc
空格 => space
换行 => tab（必须配合keyup）
上 => up
下 => down
左 => left
右 => right

其他按键使用按键原始的key值去绑定


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


Vue.config.keyCodes.自定义键名 = 键码，自定义按键别名