VUE 入门基础(7)
八，事件处理器
监听事件
可以用v-on 指令监听DOM 事件来触发一些javaScript
<div id="example-1">
<button v-on:click="counter += 1">增加1</button>
<p>这个按钮被点击了{{ counter }} 次</p>
</div>
var example1 = new Vue({
el: "#example-1"
data: {
counter: 0
}
})
方法事件处理器
v-on 可以接收一个定义的方法来调用
<div id="example-2"> <butto v-on:click="greet">Greet</button> </div> var example2 = new Vue({ el:'#example-2', data: { name: 'Vue.js' }, methods: { greet: function (event) { alert('Hello' + this.name + '!') } } }) example2.greet()
内联事件处理方法
可以内联JavaScript语句
<div id="example-3">
<button v-on:click="say('hi')">Say hi</button>
<button v-on:click="say('what')">Say what</button>
</div>
new Vue({
el: '#example-3',
methods: {
alert(message)
}
})
有时候也需要内联语句处理器中访问原生DOM事件 可以用特殊变了$event 把它传入方法：
<button v-on:click="warn('For cannot be submitted ye.',$event)" >Submit</button>
methods: {
warn: function(message, event) {
if（event） event.preventDefault()
alert(message)
}
}
事件修饰符
为v-on 提供了 事件修饰符 通过由(.)表示的的指令后缀来调用修饰符。
.stop .prevent .capture .self .once
// 防止事件冒泡
<a v-on:click.stop="doThis"></a>
// 提交事件不在重载页面
<form v-on:submit.prevent="onSubmit"></form>
// 修饰符可以串联
<a v-on:click.stop.prevent="doThat"></a>
// 只有修饰符
<form v-on:submit.prevent></form>
// 添加事件监听器时使用事件捕获模式
<div v-on:click.capture="doTthis"></div>
// 只当事件在该元素本身（而不是子元素）触发时触发回调
<div v-on:click.self="doThat"></div>
按键修饰符
在监听键盘事件时，vue允许 v-on 在监听键盘事件时添加按键修饰符
// 只有在keyCode 是 13 是调用 vm.submit() <input v-on:keyup.13="submit"> // 记住所有的 keyCode 比较困难， 所以Vue 为最常见的按键提供了别名： <input v-on:keyup.enter="submit"> <input @keyup.enter="submit">
全部的按键名
.enter .tab .delete .esc .space .up .down .left .right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
按键修饰符
可以用如下修饰符开启鼠标或键盘事件监听，使在按键按下时发生响应。
.ctrl .alt .shift .meta
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
九，表单控件绑定
基础用法
用v-model 指令在表单控件元素上创建双向数据绑定。
<input v-model="message" placeholder="edit me">
<p>Message is:{{ message}}</p>
多行文本
<span>Multiline message is:</span>
<p style="white-space: pre">{{ message }}</p>
<textarea v-model="message" placeholder="add multtiple lines"> </textarea>
复选框
单个勾选框，逻辑值
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked}}</label>
多个勾选框，绑定到同一个数组
<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="jack">john</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="jack">Mike</label> <span>Checked names: {{checkedNames}}</span> new Vue({ el：'...', data: { checkedNames: [ ] } })
单选按钮
<input type="radio" id="one" value="One" v-model="picked"> <lable for="one">One</lable> <input type="radio" id="two" value="Two" v-model="picked"> <lable for="one">One</lable> <span>Picked: {{ picked }}</span>
选择列表
单选列表：
<select v-model="selected"> <option>A</option> <option>B</option> <option>C</option> </select>
多选列表（绑定到一个数组）：
<select v-model="selected" multiple>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
动态选项，用v-for 渲染
<select v-model="selected"> <option v-for="opction in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>selected: {{ sekected}}</span> new Vue({ el:'...', data: { selected: 'A', options: [ {text:'One',value: 'A'}, {text:'Two',value: 'B'}, {text:'Three',value: 'C'} ] } })
绑定 value
对于单选按钮，勾选框及选择列表, v-model 绑定的value 通常是静态字符串。
// 当选中时 picked 为字符串 a
<input type="radio" v-model="picked" value="a">
// toggle 为 true 或 false
<input type="checkbox" v-model="toggle">
// 当选中时 selected 为字符串女abc
<select v-mode="selected">
<option value="abc">ABC</option>
</select>
复选框
<input type="checkbox" v-model="toggle" v-bind:true-value="a" v-bind:false-value="a"> // 当选中时 vm.toggle === vm.a vm.toggle === vm.b
等选按钮
<input type="radio" v-model="pick" v-bind:value="a"> // 当选中时 vm.pcik === vm.a
选择列表设置
<select v-model="selected"> // 内联对象字面量 <option v-bind:value="{number: 123}">123</option> </select> // 当选中时 typeof vm.selected // object vm.selected.number //123 修饰符
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据 (除了 上述 IME 部分)，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
// 在“change” 而不是在 "input" 时间中更新
<input v-model.lazy="msg">
.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
<input v-model.number="age" type="number">
因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
<input v-model.trim=msg>
