Vue中事件与表单处理

表单输入绑定

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

v-model 指令

用于给 <input>、<textarea>、<select> 元素设置双向数据绑定

输入框绑定

---

表单数据绑定

输入框分为单行输入框 input 与多行输入框

input内容为：{{ value1 }}

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”>