Vue.js官方文档对于 v-on 这一常用指令提供了缩写方法，看看官网是怎么介绍的
|
1
2
3
4
5
|
<!-- 完整语法 -->
<
a
v-on:click
=
"doSomething"
></
a
>
<!-- 缩写 -->
<
a
@
click
=
"doSomething"
></
a
>
|
1、方法事件处理器
可以用 v-on 指令监听DOM事件
|
1
2
3
|
<
div
id
=
"box"
>
<
button
class
=
"btn btn-success"
v-on:click
=
"showMsg"
>`msg`</
button
>
</
div
>
|
绑定一个单机事件的处理方法showMsg到methods中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var
vm =
new
Vue({
el:
'#box'
,
//el指代选择器如 id，class，tagName
data:{
msg:
'点击按钮'
,
name:
'Vue.js'
},
methods:{
//在methods对象中定义方法
showMsg:
function
(e){
//方法中的this，指代new Vue这个实例对象，可以再次验证下
console.log(
this
);
//event 是原生DOM事件
console.log(e.target);
//打印出事件源对象button
console.log(
'Hello'
+
this
.name +
'!'
);
}
}
});
|
查看页面效果截图
2、内联语句处理器
除了直接绑定到一个方法里面，也可以用内联Javascript语句
|
1
2
3
4
5
|
<
div
class
=
"app"
>
<
button
class
=
"btn btn-default"
v-on:click
=
"say('hi')"
>Say Hi</
button
>
<!--尝试用下v-on的缩写方法 @click-->
<
button
class
=
"btn btn-primary"
@
click
=
"say('what')"
>Say What</
button
>
</
div
>
|
|
1
2
3
4
5
6
7
8
|
var
vm2 =
new
Vue({
el:
'.app'
,
methods:{
say:
function
(msg){
//把方法里面的参数打印出来
console.log(msg);
}
}
});
|
查看页面效果截图
有时也需要在内联语句处理器中访问原生DOM事件，比如阻止链接跳转。可以用特殊变量$event把它传入方法：
|
1
2
3
|
<
div
class
=
"app"
>
<
a
href
=
"http://cn.vuejs.org/guide/events.html"
@
click
=
"stop(test, $event)"
>打开Vue官网</
a
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
|
var
vm2 =
new
Vue({
el:
'.app'
,
data:{
test:
'阻止链接跳转'
},
methods:{
stop:
function
(test, e){
e.preventDefault();
alert(test);
}
}
});
|
点击a链接以后，页面还能跳转到vue官网吗？看看页面效果截图
3、事件修饰符
在事件处理器中经常需要调用event.preventDefault()或event.stopPropagation()。尽管在方法内可以轻松做到（如上例所示），不过让方法是纯粹的数据逻辑而不处理DOM事件细节会更好。
为了解决这个问题，Vue为v-on提供了两个事件修饰符：.prevent和.stop
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!-- 阻止单击事件冒泡 -->
<
a
v-on:click.stop
=
"doThis"
></
a
>
<!-- 提交事件不再重载页面 -->
<
form
v-on:submit.prevent
=
"onSubmit"
></
form
>
<!-- 修饰符可以串联 -->
<
a
v-on:click.stop.prevent
=
"doThat"
>
<!-- 只有修饰符 -->
<
form
v-on:submit.prevent></
form
>
<!-- 添加事件侦听器时使用 capture 模式 -->
<
div
v-on:click.capture
=
"doThis"
>...</
div
>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<
div
v-on:click.self
=
"doThat"
>...</
div
>
|
看一小段代码理解下上面的大段内容：
|
1
2
3
4
5
6
|
<
div
id
=
"container"
>
<!-- 阻止页面跳转 -->
<
a
v-on:click.prevent
=
"doThis"
href
=
"http://cn.vuejs.org/guide/events.html"
>doThis</
a
>
</
div
>
|
|
1
2
3
4
5
6
7
8
|
var
vm3 =
new
Vue({
el:
'#container'
,
methods: {
doThis:
function
() {
}
}
});
|
最终的实际结果就是，点击a链接，并不会跳转到Vue官网，完全实现了我们预期的效果。
再来看一个关于.self的例子
|
1
2
3
4
5
|
<
div
id
=
"app"
>
<
div
@
click.self
=
"test"
class
=
"a"
>a
<
div
class
=
"b"
>b</
div
>
</
div
>
</
div
>
|
|
1
2
3
4
5
6
7
8
9
10
11
|
var
vm4 =
new
Vue({
el:
'#app'
,
data:{
items:
'test'
},
methods:{
test:
function
(e){
console.log(e);
}
}
})
|
根据Vue的文档解释“只当事件在该元素本身（而不是子元素）触发时触发回调”，所以点class为a的div时触发了事件，点class为b的div时则不会
4、按键修饰符
http://dapengtalk.blog.51cto.com/11549574/1860203
在这边博文中，我专门复习了keycode的相关知识。在Vue中也专门为键盘监听事件提供了一系列的按键修饰符
|
1
2
3
4
|
<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
<
input
v-on:keyup.13
=
"submit"
>
<!-- 同上 -->
<
input
v-on:keyup.enter
=
"submit"
>
|
全部的按键别名：
-
enter
-
tab
-
delete
-
esc
-
space
-
up
-
down
-
left
-
right
5、为什么在HTML中监听事件？
（1）、扫一眼HTML模板便能轻松定位在Javascript代码里对应的方法。
（2）、因为你无需在Javascript里手动绑定事件，你的ViewModel代码可以是非常纯粹的逻辑，和DOM完全解耦，更易于测试。
（3）、当一个ViewModel被销毁时，所有的事件处理器都会被自动删除，你无需担心如何自己清楚它们
学习的过程中参考了以下文档，诚挚感谢
http://cn.vuejs.org/guide/events.html
http://blog.csdn.net/qq20004604/article/details/52413898
本文转自 frwupeng517 51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1861865
