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

1、事件对象

凡是触发在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即表明该事件对应的事件对象。

一、阻止事件冒泡

事件冒泡是指发生在子元素身上的事件，会冒泡至父元素身上。如咱们在子元素身上点击后，也会触发父元素的点击事件，若不及时阻止，该事件还会一级一级冒上去。事件冒泡这个行为是默认存在的，故须要咱们进行及时的阻止。

<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>

方式二这种简写的方式，更为推荐。

二、阻止默认事件（默认行为）

咱们在执行某些事件时，可能会触发浏览器的一些默认行为，这也是咱们所不须要的，一样须要对其进行阻止。以下列代码所示：

<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()"便可阻止该点击事件的默认行为，即不会再弹出右键菜单。
方式二这种简写的方式，更为推荐。

2、键盘事件及自定义键盘信息

咱们经常使用的键盘事件有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
        };

3、属性绑定

咱们能够经过数据绑定来把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>