vue2.0学习笔记（第二讲）（事件对象、键盘事件及自定义键盘信息、属性绑定）

一、事件对象

凡是触发在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>