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>