vue2.0学习笔记（第二讲）（事件对象、键盘事件及自定义键盘信息、属性绑定） - 个人文章 - SegmentFault 思否
一、事件对象
凡是触发在DOM元素上的事件，都会产生一个事件对象，这个对象包含着与这个事件相关的所有信息，如对于点击事件来说，通过事件对象我们可以得到该点击事件发生时鼠标的位置信息。在vue实例当中事件对象的调用如下所示：
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(ev.clientX);
}
}
});
};
</script>
<div id="box">
<button @click="show($event)">按钮</button>
</div>我们在该事件函数具体调用执行的地方传入实参$event（参数名固定），在声明事件函数的地方用形参ev来接收（形参名可以任取），此时ev即代表该事件对应的事件对象。
1、阻止事件冒泡
事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如我们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故需要我们进行及时的阻止。
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show1:function(){
alert(1);
},
show2:function(){
alert(2);
}
}
});
};
</script>
<div id="box">
<div @click="show2()">
<button @click="show1()">按钮</button>
</div>
</div>事件冒泡的示例代码如上所示，当用户点击按钮时，会先触发show1事件，弹出数字1，然后点击事件冒泡至其父元素身上，触发父元素的点击事件，触发show2事件，再弹出数字2。阻止事件冒泡有如下两种方式：
方式一：
通过事件对象来阻止，在子元素的事件函数声明的地方，用ev这个形参来接收事件对象，在函数体的最后加上ev.cancelBubble=true;即可阻止发生在该事件冒泡。
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show1:function(ev){
alert(1);
ev.cancelBubble = true;
},
show2:function(){
alert(2);
}
}
});
};
</script>
<div id="box">
<div @click="show2()">
<button @click="show1($event)">按钮</button>
</div>
</div>
做如上处理后，阻止了事件冒泡，此时当用户点击按钮时，不再会触发父元素的点击事件，即只会弹出数字1，不会再弹出数字2。
方式二：
我们只需在子元素绑定事件，即子元素事件具体调用执行的地方进行更改，将@click="show1()"改为@click.stop="show1()"即可阻止该点击事件冒泡至父元素身上。
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show1:function(){
alert(1);
},
show2:function(){
alert(2);
}
}
});
};
</script>
<div id="box">
<div @click="show2()">
<button @click.stop="show1()">按钮</button>
</div>
</div>方式二这种简写的方式，更为推荐。
2、阻止默认事件（默认行为）
我们在执行某些事件时，可能会触发浏览器的一些默认行为，这也是我们所不需要的，同样需要对其进行阻止。如下列代码所示：
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
<div id="box">
<button @contextmenu="show()">按钮</button>
</div>
当我们在按钮身上单击右键时，会触发show事件，弹出数字1，同时也会触发点击右键所带来的默认行为，即弹出右键菜单。我们阻止默认行为同样也有两种方式。
方式一：
通过事件对象来阻止，在子元素的事件函数声明的地方，用ev这个形参来接收事件对象，在函数体的最后加上ev.preventDefault();即可阻止发生在该事件冒泡。
方式二：
我们只需在子元素绑定事件，即子元素事件具体调用执行的地方进行更改，将@contextmenu="show()"改为@contextmenu.prevent="show()"即可阻止该点击事件的默认行为，即不会再弹出右键菜单。
方式二这种简写的方式，更为推荐。
二、键盘事件及自定义键盘信息
我们常用的键盘事件有keydown、keyup等，通过键盘事件的事件对象可以获取触发该事件对应的键码信息。如下所示，
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show:function(ev){
alert(ev.keyCode);
}
}
});
};
</script>
<div id="box">
<input type="text" @keyup="show($event)">
</div>我们在文本框当中进行输入时，每敲击一个按键，都会弹出对应的键码。通过这种方式我们也可以获取键盘上每一个键所对应的键码。在键盘事件当中，我们可以设定当按下某个指定的键时才触发某个事件，可以通过@keyup.键码="show()"的方式。
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
<div id="box">
<input type="text" @keyup.13="show()">
</div>回车键对应的键码为13，故在上述代码执行过程中，当我们在文本框当中进行输入时，只有键入回车键时才会触发执行show函数。 vue还给一些常用键设置了别名，如回车(enter)、上(up)、下(down)、左(left)、右键(right)等，比如我们可以通过@keyup.enter来代替@keyup.13的写法。但是只有一些常用键才有这些设置好的别名，我们也可以通过自定义键盘信息来给任意键设置指定的别名，之后我们就可以用别名来代替键码来调用键盘事件。比如我们要给键码为17的ctrl键取一个别名为ctr，则我们可以通过如下代码来实现：
<script>
window.onload = function(){
Vue.config.keyCodes.ctr = 17;
var vm = new Vue({
el:'#box',
data:{
},
methods:{
show:function(){
alert(1);
}
}
});
};
</script>
<div id="box">
<input type="text" @keyup.ctr="show()">
</div>此时只有当键入ctrl键时，才会触发show事件。我们也可以同时给多个键码设置别名，如下代码所示：
Vue.config.keyCodes = {
ctr : 17,
a :65,
b :66
};三、属性绑定
我们可以通过数据绑定来把vue实例当中的data数据与html标签的class属性值进行关联。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.red{
color:red;
}
.blue{
background-color: skyblue;
}
</style>
<script src="vue.js"></script>
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
a:true,
b:false
}
});
};
</script>
</head>
<body>
<div id="box">
<div :class="{red:a,blue:b}">123</div>
</div>
</body>
</html> 此时在该标签对当中，只有red类名对应的样式可以生效，而blue类名对应的样式不能生效。也可以写成：
<script>
window.onload = function(){
var vm = new Vue({
el:'#box',
data:{
json:{
red:true,
blue:false
}
}
});
};
</script>
<div id="box">
<div :class="json">123</div>
</div>
原网址: 访问
创建于: 2018-10-13 19:31:05
目录: default
标签: 无
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论