Vue中事件与表单处理(2)

input内容为：{{ value2 }}

单选按钮绑定

---

单选按钮的双向数据绑定方式如下

radio 数据为：{{ value3 }}

选项一

radio 数据为：{{ value3 }}

选项二

复选框绑定

---

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

单个 checkbox 选择的数据为：{{ value4 }}

选项

多个 checkbox 选择的数据为：{{ value5 }}

选项一

选项二

选择框绑定

---

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

单选 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

总结

大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】