Vue.js 事件与表单处理

事件处理

v-on 事件处理绑定

• v-on方式进行事件绑定，v-on后面添加事件类型名称 :clic
  v-on:click 简写 @click

• 事件程序代码较多时，可以在 methods 中设置函数，并设置为事 件处理程序。
• 设置事件处理程序后，可以从参数中接收事件对象。
• 在视图中可以通过 $event 访问事件对象

v-model 表单输入绑定

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

输入框效果绑定

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

单选按钮绑定

复选框绑定

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

选择框绑定

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

修饰符

• 事件修饰符
  • .prevent 修饰符
  • .stop 修饰符
  • .once 修饰符
  • .capture
  • .self
  • .passive
• 按键修饰符
• 系统修饰符
  • .ctrl
  • .alt
  • .shift
  • .exact
• 鼠标修饰符
  • .left 修饰符
  • .right 修饰符
  • .middle 修饰符
• v-model 修饰符
  • .trim 修饰符
  • .lazy 修饰符
  • .number 修饰符

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

事件修饰符

• .prevent 修饰符
  用于阻止默认事件行为，相当于 event.preventDefault()。

• .stop 修饰符
  用于阻止事件传播，相当于 event.stopPropagation()。
  Vue.js 中允许修饰符进行连写，例如:@click.prevent.stop

• .once 修饰符 用于设置事件只会触发一次。

按键修饰符

• 按键码指的是将按键的按键码作为修饰符使用以标识按键的操作方式。
• 特殊按键指的是键盘中类似 esc、enter、delete 等功能按键， 为了更好的兼容性，应首选内置别名。

系统修饰符

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

鼠标按键修饰符

• .left 修饰符
• .right 修饰符
• .middle 修饰符

  <div id="app">
    <button @click.left="fn">按钮1</button>
    <button @click.right="fn">按钮2</button>
    <button @click.middle="fn">按钮3</button>
  </div>
  
  <script src="lib/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
      },
      methods: {
        fn() {
          console.log('点击了元素');
        }
      }
    });
  </script>

v-model修饰符（进行双向数据绑定）

• .trim 修饰符
• .lazy 修饰符
• .number 修饰符

.trim 修饰符

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

.lazy 修饰符

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

.number修饰符

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