事件与表单处理

 事件处理

v-on 指令

• 用于进行元素的事件绑定。

 • Vue.js 还为 v-on 指令提供了简写方式

 • 事件程序代码较多时，可以在 methods 中设置函数，并设置为事 件处理程序。

 

  • 设置事件处理程序后，可以从参数中接收事件对象。

 •在视图中可以通过 $event 访问事件对象

表单输入绑定

v-model指令

•用于给 <input>、<textarea> 及 <seleact> 元素设置双向数据 绑定。

输入框绑定

• 输入框分为单行输入框 input 与多行输入框 textarea。

 单选按钮绑定

 复选框绑定

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

 选择框绑定

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

 v-model 指令小结

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

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

• radio：绑定字符串值。

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

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

修饰符

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

• 事件修饰符

    •.prevent 修饰符

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

    • .stop 修饰符

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

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

    • .once 修饰符

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

• 按键修饰符

按键码

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

特殊按键

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

• 系统修饰符

系统按键指的是 ctrl 、alt 、shift 等按 键。单独点击系统操作符无效，系统按键通常与其他按键组合使用

    • .ctrl 修饰符

    • .alt 修饰符

    • .shift 修饰符

• 鼠标修饰符

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

   • .left 修饰符

   • .right 修饰符

   • .middle 修饰符

• v-model 修饰符

   • .trim 修饰符

用于自动过滤用户输入内容首尾两端的空格

   • .lazy 修饰符

用于将 v-model 的触发方式由 input 事件触发更改为 change 事件触发

   • .number 修饰

用于自动将用户输入的值转换为数值类型，如无法被 parseFloat() 转换，则返回原始内容