几个关键认知

<!-- @input：每次值变化立即触发 --><input @input="onInput" /><!-- input @change="onChange" /><!-- @change：失去焦点且值有变化时触发 --><input @change="onChange" /><!-- select 元素 --><select @change="onSelect"> <option>A</option></select><!-- checkbox/radio --><input type="checkbox" @change="onCheckboxChange" /> 焦点事件

说实话，焦点事件hen多人用得不多，但其实hen实用，哈哈！

@focus <!-- 获得焦点 -->@blur <!-- 失去焦点 -->@focusin <!-- 获得焦点 -->@focusout <!-- 失去焦点 -->

举个例子，你Ke以这样用：

<!-- 实用场景：监听整个表单区域内的焦点状态 --><div @focusin="isFormActive = true" @focusout="isFormActive = false"> <input placeholder="字段1" /> <input placeholder="字段2" /></div>

focusin/focusout 会冒泡，而 focus/blur 不会——这是在父容器层面感知子元素的焦点的标准方式。

咱就是说Vue 的 v-on本质上是对原生 DOM 事件的直接透传，你懂的。

凡是浏览器原生支持的事件，Vue 均可绑定。

@keydown <!-- 按键按下 -->@keyup <!-- 按键抬起 -->@keypress <!-- ⚠️ Yi废弃，不推荐使用 -->

害，Vue 内置了这么多按键别名，但文档里没全部举例，咱来补上！

@keydown.enter="submit"@keydown.tab="onTab"@keydown.delete="onDelete" <!-- 同时匹配 Delete 和 Backspace -->@keydown.esc="onEsc" <!-- 等价于 Escape -->@keydown.space="onSpace"

这是文档中完全没有专门章节讲解的一类事件，但实现原生拖拽时必须用到。

=