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

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

我们常用的键盘事件有keydownkeyup等,通过键盘事件的事件对象可以获取触发该事件对应的键码信息。如下所示,

<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的写法。但是只有一些常用键才有这些设置好的别名,我们也可以通过自定义键盘信息来给任意键设置指定的别名,之后我们就可以用别名来代替键码来调用键盘事件。比如我们要给键码为17ctrl键取一个别名为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>
    原文作者:倩儿爱甜食
    原文地址: https://segmentfault.com/a/1190000011511886
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞