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>