一, 事件处理
1. 监听事件:
v-on 指令监听 DOM 事件
2. 事件处理方法:
a. 在触发时运行一些简单的 JavaScript 代码
<button v-on:click="counter += 1">Add 1</button>
b. 接收一个需要调用的方法名称
<button v-on:click="greet">Greet</button>
c. 在内联 JavaScript 语句中调用方法
<button v-on:click="say('what')">Say what</button>
d. 在内联语句处理器中访问原始的 DOM 事件. 可以用特殊变量 $event 把它传入方法:
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
3. 事件修饰符:
.stop - 调用 event.stopPropagation()
.prevent - 调用 event.preeventDefault()
.capture - 添加事件侦听器时使用 capture 模式
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调
.native - 监听组件根元素的原生事件
.once - 只触发一次回调
.passive - 以 {passive:true} 模式添加侦听器
注: 使用修饰符时, 顺序很重要; 相应的代码会以同样的顺序产生. 因此, 用 v-on:click.prevent.self 会阻止所有的点击, 而 v-on:click.self.prevent 只会阻止对元素自身的点击.
按键修饰符别名:
- .enter
- .tab
- .delete (捕获 "删除" 和 "退格" 键)
- .esc
- .space
- .up
- .down
- .left
- .right
4. 示例
- <!-- 方法处理器 -->
- <button v-on:click="doThis"></button>
- <!-- 内联语句 -->
- <button v-on:click="doThat('hello', $event)"></button>
- <!-- 缩写 -->
- <button @click="doThis"></button>
- <!-- 停止冒泡 -->
- <button @click.stop="doThis"></button>
- <!-- 阻止默认行为 -->
- <button @click.prevent="doThis"></button>
- <!-- 阻止默认行为, 没有表达式 -->
- <form @submit.prevent></form>
- <!-- 串联修饰符 -->
- <button @click.stop.prevent="doThis"></button>
- <!-- 键修饰符, 键别名 -->
- <input @keyup.enter="onEnter">
- <!-- 键修饰符, 键代码 -->
- <input @keyup.13="onEnter">
- <!-- 点击回调只会触发一次 -->
- <button v-on:click.once="doThis"></button>
二, 表单输入绑定
1. 基础用法: v-model 指令
a.v-model 指令在表单 input 和 textarea 元素上创建双向数据绑定.
b.v-model 会忽略所有的表单元素的 value,checked,selected 特性的初始值
, 而总是将 vue 示例的数据作为数据来源, 所以初始值应该声明在 data 中.
c. 对于需要使用输入法 (如中文, 日文, 韩文等) 的语言, v-model 不会在输入法组合文字过程中得到更新. 如果要处理这个过程, 需要使用 input 事件.
2. 复选框:
a. 单个复选框: 选中与不选中获取 true 和 false, 会忽略 checkbox 本身的 value 值.
- <input type="checkbox" id="checkbox" v-model="checked">
- <label for="checkbox">{{ checked }}</label>
- new Vue({
- el: '#example-2',
- data: {
- checked: false // 值是 true 或 false
- }
- })
b. 多个复选框, 绑定到同一个数组, 选中获取一个数组, 包含被选中的复选框的 value
- <div id='example-3'>
- <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>
- <br>
- <span>Checked names: {{ checkedNames }}</span>
- </div>
- new Vue({
- el: '#example-3',
- data: {
- checkedNames: [] // 值是 "Jack","John" 或 "Mike"
- }
- })
3. 单选框: 获取选中的 value 值
- <div id="example-4">
- <input type="radio" id="one" value="One" v-model="picked">
- <label for="one">One</label>
- <br>
- <input type="radio" id="two" value="Two" v-model="picked">
- <label for="two">Two</label>
- <br>
- <span>Picked: {{ picked }}</span>
- </div>
- new Vue({
- el: '#example-4',
- data: {
- picked: 'One' // 表示默认选中第一个 radio, 若为空则都不选中
- }
- })
4.select 下拉选择框:
若 option 有 value 值, 选中时获取的是 value 值, 若无, 则获取 option 的 text; 多选获的一个被选中的值组成的数组.
- <div id="example-5">
- <select v-model="selected" multiple="multiple">
- <option disabled value=""> 请选择 </option>
- <option>A</option>
- <option>B</option>
- <option>C</option>
- </select>
- <span>Selected: {{ selected }}</span>
- </div>
- new Vue({
- el: '#example-5',
- data: {
- selected: ''
- }
- })
注: 如果 v-model 表达式的初始值未能匹配任何选项,<select> 元素将被渲染为 "未选中" 状态.
- <!-- 在 "change" 时而非 "input" 时更新 -->
- <input v-model.lazy="msg">
来源: http://www.qdfuns.com/article/46690/abaebb0460a8c9ffc7a4fe987293c3e1.html