【Vue.js】之事件与表单

事件

• event参数，自定义参数
• 事件修饰符，按键修饰符
• 【观察】事件被绑定到哪里

event 是原生的
事件被挂载到当前元素
和 DOM 事件一样

<template>
  <div>
    <p>{{ num }}</p>
    <button @click="increment1">+1</button>
    <button @click="increment2(2, $event)">+2</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 0
    }
  },
  methods: {
    increment1 (event) {
      // eslint-disable-next-line
      console.log("event", event, event.__proto__.constructor); // 是原生的 event 对象
      // eslint-disable-next-line
      console.log(event.target);
      // eslint-disable-next-line
      console.log(event.currentTarget); // 注意，事件是被注册到当前元素的，和 React 不一样
      this.num++

      // 1. event 是原生的
      // 2. 事件被挂载到当前元素
      // 和 DOM 事件一样
    },
    increment2 (val, event) {
      // eslint-disable-next-line
      console.log(event.target);
      this.num = this.num + val
    },
    loadHandler () {
      // do some thing
    }
  },
  mounted () {
    window.addEventListener('load', this.loadHandler)
  },
  beforeDestroy () {
    // 【注意】用 vue 绑定的事件，组建销毁时会自动被解绑
    // 自己绑定的事件，需要自己销毁！！！
    window.removeEventListener('load', this.loadHandler)
  }
}
</script>

事件修饰符

v-on 指令常用修饰符：
	.stop - 调用 event.stopPropagation()，禁止事件冒泡。
    .prevent - 调用 event.preventDefault()，阻止事件默认行为。
    .capture - 添加事件侦听器时使用 capture 模式。
    .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
    .{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
    .native - 监听组件根元素的原生事件。
    .once - 只触发一次回调。
    .left - (2.2.0) 只当点击鼠标左键时触发。
    .right - (2.2.0) 只当点击鼠标右键时触发。
    .middle - (2.2.0) 只当点击鼠标中键时触发。
    .passive - (2.3.0) 以 { passive: true } 模式添加侦听器
    
v-bind 指令常用修饰符：
    .prop - 被用于绑定 DOM 属性 (property)。
    .camel - (2.1.0+) 将 kebab-case 特性名转换为 camelCase. (从 2.1.0 开始支持)
    .sync (2.3.0+) 语法糖，会扩展成一个更新父组件绑定值的 v-on 侦听器。
    
v-model 指令常用修饰符：
    .lazy - 取代 input 监听 change 事件
    .number - 输入字符串转为数字
    .trim - 输入首尾空格过滤

1.阻止单击事件继续传播

<a v-on:click.stop = "doThis"></a>

2.提交事件不再重载页面

<form v-on:submit.prevent = "onSubmit"></form>

3.修饰符可以串联

<a v-on:click.stop.prevent = "doThat"></a>

4.添加事件监听器时使用事件捕获模式

即内部元素触发的事件此处处理，然后再交由内部元素进行处理

<div v-on:click.capture = "doThis"></div>

5.只当在event.target是当前元素自身触发时处理函数
即事件不是从内部元素触发的

div v-on:click.self = "doThat"></div>

6.即使Alt或Shift被一同按下时也会触发

<button @click.ctrl = "onClick">A</button>

7.有且只有Ctrl被按下时才触发

<button @click.ctrl.exact = "onCtrlClick">A</button>

8.没有任何系统修饰符被按下的时候才触发

<button @click.ctrl.exact = "onClick">A</button>

exact修饰符允许你控制由精确的系统修饰符组合触发的事件

表单

• v-model
• 常见表单项 textarea checkbox radio select
• 修饰符 lazy number trim

<template>
  <div>
    <p>输入框: {{ name }}</p>
    <input type="text" v-model.trim="name" />
    <input type="text" v-model.lazy="name" />
    <input type="text" v-model.number="age" />

    <p>多行文本: {{ desc }}</p>
    <textarea v-model="desc"></textarea>
    <!-- 注意，<textarea>{{desc}}</textarea> 是不允许的！！！ -->

    <p>复选框 {{ checked }}</p>
    <input type="checkbox" v-model="checked" />

    <p>多个复选框 {{ checkedNames }}</p>
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
    <label for="jack">Jack</label>
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
    <label for="john">John</label>
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
    <label for="mike">Mike</label>

    <p>单选 {{ gender }}</p>
    <input type="radio" id="male" value="male" v-model="gender" />
    <label for="male">男</label>
    <input type="radio" id="female" value="female" v-model="gender" />
    <label for="female">女</label>

    <p>下拉列表选择 {{ selected }}</p>
    <select v-model="selected">
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>

    <p>下拉列表选择（多选） {{ selectedList }}</p>
    <select v-model="selectedList" multiple>
      <option disabled value="">请选择</option>
      <option>A</option>
      <option>B</option>
      <option>C</option>
    </select>
  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '夹心',
      age: 18,
      desc: '自我介绍',

      checked: true,
      checkedNames: [],

      gender: 'male',

      selected: '',
      selectedList: []
    }
  }
}
</script>