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>