Vue.js 事件处理器
<@H_301_5@template@H_301_5@>@H_301_5@
div @H_301_5@id@H_301_5@="app"@H_301_5@>@H_301_5@
button @H_301_5@v-on:click@H_301_5@="fn"@H_301_5@>@H_301_5@click me</@H_301_5@button@H_301_5@div@H_301_5@>@H_301_5@
>@H_301_5@
script@H_301_5@>@H_301_5@
var@H_301_5@ count@H_301_5@=@H_301_5@1@H_301_5@;
export @H_301_5@default@H_301_5@ {
name: @H_301_5@'@H_301_5@App@H_301_5@,data(){
@H_301_5@return@H_301_5@{
name:@H_301_5@cyy@H_301_5@
}
},methods:{
fn(e){
console.log(@H_301_5@this@H_301_5@.name);@H_301_5@//@H_301_5@cyy@H_301_5@
if@H_301_5@(e){
console.log(e.target.tagName);@H_301_5@BUTTON@H_301_5@
}
}
},}
@H_301_5@style @H_301_5@scoped@H_301_5@style@H_301_5@>@H_301_5@
除了直接绑定到一个方法，也可以用内联 JavaScript 语句：
Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。
Vue.js通过由点(.)表示的指令后缀来调用修饰符。
.stop.prevent.capture.self.once
<!--@H_301_5@ 阻止单击事件冒泡 @H_301_5@-->@H_301_5@
a @H_301_5@v-on:click.stop@H_301_5@="doThis"@H_301_5@></@H_301_5@a@H_301_5@ 提交事件不再重载页面 @H_301_5@form @H_301_5@v-on:submit.prevent@H_301_5@="onSubmit"@H_301_5@form@H_301_5@ 修饰符可以串联 @H_301_5@v-on:click.stop.prevent@H_301_5@="doThat"@H_301_5@ 只有修饰符 @H_301_5@ 添加事件侦听器时使用事件捕获模式 @H_301_5@v-on:click.capture@H_301_5@>@H_301_5@... 只当事件在该元素本身（而不是子元素）触发时触发回调 @H_301_5@v-on:click.self@H_301_5@ click 事件只能点击一次，2.1.4版本新增 @H_301_5@v-on:click.once@H_301_5@>@H_301_5@
只有在 keyCode 是 13 时调用 vm.submit() @H_301_5@input @H_301_5@v-on:keyup.13@H_301_5@="submit"@H_301_5@>@H_301_5@
Vue 为最常用的按键提供了别名：
全部的按键别名：
input
@H_301_5@="fn"@H_301_5@
v-on:keyup.tab@H_301_5@
v-on:keyup.delete@H_301_5@
v-on:keyup.esc@H_301_5@
v-on:keyup.space@H_301_5@
v-on:keyup.up@H_301_5@
v-on:keyup.down@H_301_5@
v-on:keyup.left@H_301_5@
v-on:keyup.right@H_301_5@
v-on:keyup.ctrl@H_301_5@
v-on:keyup.alt@H_301_5@
v-on:keyup.shift@H_301_5@
v-on:keyup.Meta@H_301_5@="fn"@H_301_5@
/>@H_301_5@enter
@H_301_5@>@H_301_5@
当绑定 v-on:click 事件时，想传入参数同时也传入当前元素：
这里必须使用$event @H_301_5@-->@H_301_5@
p @H_301_5@@click@H_301_5@="fn('cyy',$event)"@H_301_5@>@H_301_5@bind methods fnp@H_301_5@>@H_301_5@
Vue.js 表单
用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。
实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
type@H_301_5@="text"@H_301_5@ v-model@H_301_5@="text"@H_301_5@>@H_301_5@{{text}}>@H_301_5@
textarea @H_301_5@cols@H_301_5@="30"@H_301_5@ rows@H_301_5@="3"@H_301_5@="textarea"@H_301_5@textarea@H_301_5@>@H_301_5@{{textarea}}{
text:@H_301_5@301_5@this is a long text@H_301_5@>@H_301_5@
复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
单个复选框 @H_301_5@="checkBox"@H_301_5@ id@H_301_5@="one"@H_301_5@="checked"@H_301_5@label @H_301_5@for@H_301_5@="#one"@H_301_5@>@H_301_5@{{checked}}label@H_301_5@br@H_301_5@ 多个复选框 @H_301_5@ name@H_301_5@="more"@H_301_5@="item1"@H_301_5@ value@H_301_5@="moreChecked"@H_301_5@="#item1"@H_301_5@>@H_301_5@item1="item2"@H_301_5@="#item2"@H_301_5@>@H_301_5@item2="item3"@H_301_5@="#item3"@H_301_5@>@H_301_5@item3>@H_301_5@you checked:{{moreChecked}}{
checked:@H_301_5@true@H_301_5@>@H_301_5@
以下实例中演示了单选按钮的双向数据绑定：
以下实例中演示了下拉列表的双向数据绑定：
select @H_301_5@name@H_301_5@="choose"@H_301_5@="choose"@H_301_5@>@H_301_5@
option @H_301_5@value@H_301_5@=""@H_301_5@>@H_301_5@请选择option@H_301_5@="item1"@H_301_5@="item2"@H_301_5@select@H_301_5@>@H_301_5@you choose:{{choose}}{
choose:@H_301_5@''@H_301_5@>@H_301_5@
.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：
在 "change" 而不是 "input" 事件中更新 @H_301_5@ v-model.lazy@H_301_5@="text2"@H_301_5@>@H_301_5@{{text2}}301_5@>@H_301_5@
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
这通常很有用，因为在 type="number" 时 HTML 中输入的值也总是会返回字符串类型。
="number"@H_301_5@ v-model.number@H_301_5@="num"@H_301_5@>@H_301_5@{{num}}{
num:@H_301_5@0@H_301_5@>@H_301_5@
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：
我好像没成功……
全选与取消全选：
="check"@H_301_5@="checked"@H_301_5@ @change@H_301_5@="changeAll()"@H_301_5@>@H_301_5@{{checked?'取消全选':'全选'}}
@H_301_5@/>@H_301_5@
="mylist"@H_301_5@="checkedList"@H_301_5@>@H_301_5@
false@H_301_5@301_5@301_5@item2@H_301_5@item3@H_301_5@]
}
},methods:{
changeAll(){
@H_301_5@(@H_301_5@.checked){
@H_301_5@.checkedList@H_301_5@.checkedArr;
}@H_301_5@else@H_301_5@{
@H_301_5@[];
}
}
},watch:{
checkedList(){
@H_301_5@.checkedList.length@H_301_5@===@H_301_5@.checkedArr.length){
@H_301_5@.checked@H_301_5@;
}@H_301_5@;
}
}
}
}
@H_301_5@>@H_301_5@
