vue.js學習（二）

前言

繼續前面的學習，上文連結

正文

繼續指令和事件的學習

指令

vue執行個體化

下面的示例都用到這個執行個體化的vue.

var a={
    a:
    }
var vm=new Vue({
    el:"#box",
    data:{
        url:"img/home.jpg",
        data:a,
        seen:false,
        url:'img/img1.jpg'，
        message:'<p>插入标簽</p>'
        }，
    methods:{
        show:function(e){
            console.log(e)
            }
        }，
        show1:function(e){
        console.log(e.keyCode)}

})
           

4.v-bind

v-bind指令可以在其名稱後面帶一個參數，中間放一個冒号隔開，這個參數通常是HTML元素的屬性，例如：

5.v-if

v-if是條件渲染指令，它根據表達式的真假來删除和插入元素（PS：不是隐藏），它的基本文法如下：v-if=”exp”，exp是一個傳回bool值的表達式，表達式可以是一個bool屬性，也可以是一個傳回bool的運算式。例如：

<div id="box1"><div class="" v-if="seen">顯示</div></div>
           

6.v-show

v-show也是條件渲染指令，和v-if指令不同的是，使用v-show指令的元素始終會被渲染到HTML，它隻是簡單地為元素設定CSS的style屬性，用法和v-if類似。

7.v-else

可以用v-else指令為v-if“else塊”。v-else元素必須立即跟在v-if的後面——否則它不能被識别。例：

//當seen的值為true是，v-else的标簽不顯示；反之，顯示
<div id="box1">
    <div class="aa" v-show="seen">顯示</div>
    <div class="bb" v-else>隐藏</div>
</div>
           

8.v-html

添加html，例：

<div id='box'>
    <div v-html='message'></div>
</div>
           

常用指令到這兒就學的差不多了，接下來學習事件。

事件

前面已經提到過事件可以用指令v-on來進行綁定，這兒就不做介紹了。一提到事件，首先想到的應該是事件對象，事件冒泡和事件阻止了。下面依次介紹。

1.事件對象

事件對象中儲存了目前被觸發事件的一些相關的屬性資訊，如事件源、事件發生時的滑鼠位置、事件按鍵等。

原生js擷取方法：

IE中可以window.event直接擷取，而Firefox中則不可以，可通過如下方法擷取：

1）var event = window.event || arguments.callee.caller.arguments[0];

2）通過參數傳。function(e) { var event = window.event || e; }

vue擷取方法：

@click="show($event)//$event即為事件對象

           

2.事件冒泡

在預設情況下，發生在一個子元素上的單擊事件（或者其他事件），如果在其父級元素綁定了一個同樣的事件，此時點選子元素，click事件會首先被子元素捕獲，執行綁定的事件程式，之後會被父級元素捕獲，再次激發一段腳本的執行，這就是所謂的“事件冒泡”。

3.事件阻止

原生js實作事件阻止：

在IE裡使用 window.event.cancelBubble = true;

在Firefox裡使用 event.stopPropagation();

vue實作事件阻止：

1.原生js中的方法依然可以用。

2.vue特有的方法

<div id="box" @click="show1()">
    <input type="button" id="" value="點選" @click.stop="show()" />       
</div>
           

鍵盤事件-鍵碼

例如通過方向鍵來觸發事件時，可以進行如下書寫。up,down,left,right.

<input type="text" id="" value="" @keydown.left="show()" />
<input type="text" id="" value="" @keydown="show()" />
           

今天就到這兒~