Vue中事件与表单处理，前端工程师面试该怎么准备，我三年开发经验从字节跳动抖音离职后

选择框绑定

---

选择框绑定分为单选绑定与多选绑定两种情况，书写方式不同

单选 select 数据为：{{ value6 }}

请选择 选项一 选项二 选项三

多选 select 数据为：{{ value7 }}

选项一 选项二 选项三

v-model 指令小结

---

• input 输入框：绑定字符串值

• textarea 输入框：绑定字符串值

• radio：绑定字符串值

• checkbox：单个绑定布尔值，多个绑定数组

• select：单选绑定字符串，多选绑定数组

修饰符

=============================================================

修饰符是以点开头的指令后缀，用于给当前指令设置特殊操作

事件修饰符

---

prevent 修饰符

用于阻止默认事件行为，相当于 event.preventDefault()

<a @click.prevent=“fn” href=“https://kaiwu.lagou.com/”>链接

<a @click.prevent href=“https://kaiwu.lagou.com/”>链接

stop 修饰符

用于阻止事件传播，相当于 event.stopPropagation()

<button @click.stop=“fn2”>按钮

Vue.js 中允许修饰符进行连写，例如：@click.prevent.stop

<a @click.prevent.stop=“fn2” href=“https://kaiwu.lagou.com/”>链接

once 修饰符

用于设置事件只会触发一次

<button @click=“fn”>按钮1

<button @click.once=“fn”>按钮2

按键修饰符

---

按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式

特殊按键指的是键盘中类似 esc、enter、delete 等功能按键，为了更好的兼容性，应首选内置别名

<input type=“text” @keyup=“fn”> -->

<input type=“text” @keyup.49=“fn”>

<input type=“text” @keyup.a=“fn”>

<input type=“text” @keyup.esc=“fn”>

<input type=“text” @keyup.a.b.c=“fn”>

系统修饰符

---

系统按键指的是 ctrl、alt、shift等按键

单独点击系统操作符无效

系统按键通常与其他按键组合使用

<input type=“text” @keyup.17.q=“fn”>

<input type=“text” @keyup.ctrl.q=“fn” v-model=“inputValue”>

鼠标按键修饰符

---

用于设置点击事件由鼠标那个按键来完成

<button @click.left=“fn”>按钮1

<button @click.right=“fn”>按钮2

<button @click.middle=“fn”>按钮3