vuejs API總結

vuejs總結：

vm指new Vue獲取的實例

 

（1）當dom標簽里的值和data里的值綁定后，更改data對應的值可以實時更新標簽里的值；

 

但后續添加的值是無效的（綁定失敗）。

 

（2）將可以將對象直接作為data的一個屬性，是有效的（因為對象按值傳遞）；

所以該屬性和該對象是全等的；

 

（3）vm的接口有：

vm.$data是vm的data屬性；

vm.$el是el屬性指向的dom結點；

vm.$watch是監視屬性變化（比如data里的值）（參照（九））

 

（4）vue實例的聲明周期，有幾個關鍵函數：

created：事件綁定結束后，函數直接在聲明vue實例的時候，作為vue實例中的一個屬性，下同。

vm.$mount：掛載dom結點；

beforeCompile：加載模板之前；

compiled：加載模板之后；

ready：完成之后（我猜的）；

beforeDestroy：摧毀之前；

destroyed：摧毀之后；

 

（5）vm.$mount(掛載的id或者類名)

在new Vue實例的時候，不加el，則表示不掛載只生成，生成之后，可以通過該方法來手動掛載到某個地方，如果符合條件的有多個，則掛載到第一個地方；

 

（6）v-for遍歷數組、對象，可以創建多個標簽；比如用於創建表格；

 

（7）轉義：{{}} 兩個大括號，不會轉義值的html標簽；

{{{}}}  三個大括號，會將值的html標簽轉義，即變為html文本；

不能在值內再放入綁定數據（除非使用partials，但我還不會）；

 

（8）在插值的大括號內，可以放入表達式（不能放函數）；

 

（9）在插值的大括號內，加入管道符|，可以使用過濾器；

       capitalize就是將首字母大寫的過濾器；

       過濾器只能放在表達式最后，不能成為表達式的一部分；

       過濾器可以加參數；

       過濾器可以自定義（但目前還不知道自定義的方法）；

 

（10）指令：

v-if=”變量名”           當某個值為true時存在；

       v-bind:屬性名=”變量名”             將等號后的變量名（指向vm的data屬性里的同名屬性），和該標簽的html屬性綁定在一起。

       v-on:事件類型=”函數名”            觸發事件類型時，執行methods里的函數；

 

       v-on的縮寫是@；v-bind的縮寫是:（冒號）；

 

（11）計算屬性computed

       這里的屬性，可以當做data屬性里的使用；優點是data里的數值變更時，這里會跟着一起改變；

       可以使用更復雜的表達式（插值里只能使用簡單的表達式）；

 

（12）計算屬性的setter和getter

默認是getter（對象的get屬性），即當某個值改變時，觸發回調函數（或get方法）；

當計算屬性改變時，需要改變某些值（比如改變10個值，在其他地方寫監聽這個值就不好），那么則需要設置setter（對象的set屬性），即當計算屬性改變時，觸發set方法；

 

（13）監視屬性vm.$watch(被監視的屬性, 回調函數)

       監視的是data屬性；

回調函數的第一個參數是改變后的值，第二個參數是改變前的值；

       屬性的值改變時觸發；

 

（14）class綁定：

       用v-bind:class

       class使用對象形式，key為class類名，值表示是否顯示這個class類；

       可以直接將一個object對象放置在v-bind:class的值中，並將這個對象放置在data屬性中，這樣設置這個object對象的屬性即可；

       class的數組寫法：數組里的成員為變量名，如果該變量不是object對象，則變量的值為類名；如果是對象時，對象的key是類名，值表示是否顯示；

      

（15）style綁定：

       用v-bind:style

       形式是一個對象，對象的key是樣式名（如fontSize，注意樣式名需要采用駝峰式而不是css式），值是樣式的值；

       可以直接將對象名放在v-bind:style的等式右邊；

       對象的值改變，將實時影響內聯樣式；

       對於某些樣式，可以針對瀏覽器加前綴（但某些不能對所有瀏覽器兼容）；

（16）①簡單來說，假如data里面有屬性a=1，然后你需要一個變量跟着a變化，例如b=a+1，那么就需要用到計算屬性，Vue實例的computed屬性中，設置b為其屬性，其表現為一個函數，返回值是b的值。

具體見代碼：

<div id="app">
    <table>
        <tr>
            <td>a</td>
            <td>b=a+1</td>
        </tr>
        <tr>
            <td>{{a}}</td>
            <td>{{b}}</td>
        </tr>
    </table>
    <button @click="add">a = a + 1</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            a: 1
        },
        methods: {
            add: function () {
                this.a++;
            }
        },
        computed: {
            b: function () {
                return this.a + 1;
            }
        }
    })
</script>

 

效果：

初始a的值為1，b的值為2。

點擊按鈕，會讓a的值增加1（注意，沒有動b的值）。

但由於b和a是相關的（這里的this.a指的是a），因此，在a的值改變后，b的值也會跟着改變。

 

之所以這么做，回想一下，Vuejs禁止在變量綁定時輸入一個函數，因此如果表達式比較復雜，那么就必須這么做，好處是可以防止模板太重（放很大的表達式在模板中）。

 

 

 

②vm.$watch(“屬性”, function(newVal, oldVal){

//回調函數的具體內容

})

用於觀察Vue實例上的數據變動；

【1】可以監視data屬性中的某個屬性（比如上面的a）；

【2】可以監視computed屬性中，某個屬性的值，例如上面的b；支持字符串的變化，如代碼：

var vm = new Vue({
    el: "#app",
    data: {
        a: 1
    },
    methods: {
        add: function () {
            this.a++;
        }
    },
    computed: {
        b: function () {
            var str = "";
            for (var i = 0; i < this.a; i++) {
                str += String(i);
            }
            return str;
        }
    }
})
vm.$watch("b", function (val) {
    alert(val);
})

 

這里的監視b是有效的。

但假如b返回的是一個固定的字符串，或者值，那么則不會觸發（因為值沒有改變）

 

【3】另外，在$watch的回調函數中，第一個參數val的值是新值（即變動后的值），他也可以有第二個參數，而第二個參數的值是舊值（即變動前的值）。

 

【4】watch的回調函數里，this指向的是vm這個對象；

 

 

 

③setter

計算屬性默認是getter（寫作get），可以這么理解，他監視某個值，那個值變化時會觸發這個回調函數；

但也可以設置為setter（寫作set），setter和getter的區別在於，setter是當computed這個屬性的值變化時所觸發的。例如：

<div id="app">
    <input v-model="firstName"/>
    <input v-model="lastName"/>
    <input v-model="fullName"/>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            firstName: 'Foo',
            lastName: 'Bar'
        },
        computed: {
            fullName: {
                // getter
                get: function () {
                    return this.firstName + ' ' + this.lastName
                },
                // setter
                set: function (newValue) {
                    var names = newValue.split(' ')
                    this.firstName = names[0]
                    this.lastName = names[names.length - 1]
                }
            }
        }
    })
</script>

 

我們修改前兩個輸入框的值，將影響第三個輸入框的值；

我們也可以修改第三個輸入框的值，來影響前兩個輸入框的值。

 

另外，由於這種綁定形式，我們將無法讓fullName的名字是三個單詞，原因在於，set觸發了lastName的改變（獲取最后一個單詞），而lastName的改變又會觸發getter（將firstName和lastName拼接起來），因此只會保留第一個單詞和最后一個單詞。

 

 

（17）①簡單來說，就是用一個變量來控制某個class是否存在與dom之中，這樣不需要直接操縱dom的class屬性。

 

如果不想要他影響某個屬性，那么就將他放在class里面，而不是綁定的class里面。

 

具體方法如下，將以下內容放到html標簽里：

v-bind:class="{'green':a,'red':b}"

效果是，假如變量a的值是true（或者可以被隱式轉換為true），那么class屬性里則添加green，如果b為true，那么red也會被添加。注意，這二者不是互斥的。

 

 

如代碼：

<style>
    .green {
        background-color: green;
    }
    .red {
        background-color: red;
    }
</style>
<div id="app">
    <div v-bind:class="{'green':a,'red':b}">背景顏色</div>
    <button @click="change">變色</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            a: true,
            b: false
        },
        methods: {
            change: function () {
                this.a = !this.a;
                this.b = !this.b;
            }
        }
    })
</script>

效果：

點擊按鈕可以變換a和b的值，從而可以帶動class的變化，於是背景顏色也會變。

 

 

②另外一種綁定方法，將class的值放置在data里。

方式：

<div v-bind:class="itsClass">背景顏色</div>
//略
data: {
    itsClass: {
        green: true
    }
},

即將變量名放在指令里，然后通過修改屬性的值來控制class

 

優點：

如果需要添加一個class時，只需要在變量里添加屬性，並設置該屬性為true即可。相對來說更加自由。

 

如代碼：

<div id="app">
    <div v-bind:class="itsClass">背景顏色</div>
    <button @click="change">變色</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            itsClass: {
                green: true
            }
        },
        methods: {
            change: function () {
                this.itsClass.green = false;
                this.itsClass.red = true;
            }
        }
    })
</script>

 

點擊按鈕，雖然原本itsClass這個變量並沒有red這個屬性，但后續添加這個屬性也會在該div里添加red這個class類名。所以，背景顏色從綠色變為紅色。

 

 

進階使用：

假如需要當一個值存在時，擁有特殊的樣式，那么這個值的變量名可以和樣式名一致，並通過這樣的方式，當該值存在時，其被隱式轉換為true，因此樣式為我們需要的樣式。

 

 

 

③class的數組語法和表達式：

寫法：

<div v-bind:class="[g,r?r:s]">顏色</div>

效果：

g、r、s都是變量名，使用的時候取該變量的值；

 

如代碼：

<style>
    .fontGreen {
        color: green;
    }

    .backRed {
        background-color: red;
    }

    .fontSize {
        font-size: 50px;
    }

</style>
<div id="app">
    <div v-bind:class="[g,r?r:s]">顏色</div>
    <button @click="change">變換</button>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            g: "fontGreen",
            r: "backRed",
            s: "fontSize"
        },
        methods: {
            change: function () {
                this.r = false;
            }
        }
    })
</script>

首先他是數組，因此第一個g存在，因此他有樣式名fontGreen，其次，是一個三元表達式，他會判斷r的值，如果為true（或隱式轉換為true），那么就繪將r的值添加到數組，否則添加s的值。

因此，初始表現是綠色紅色背景；點擊按鈕后，顯示的是綠色的大字體。

 

 

④在1.0.19+版本里，可以在數組語法中使用對象。

數組格式如下：

<div v-bind:class="[classG, {R:classR,S:classS}]">顏色</div>

data屬性如下：

data: {
    classG: "G",
    classR: true,
    classS: true
},

解釋：

【1】    數組形式（如classG），需要放置的是變量名，類名是變量名的值；

【2】    對象形式（如{R:classR,S:classS}），對象的key是類名，value用於控制該類是否存在（true或者false）；

 

 

⑤綁定內聯樣式：

格式：

<div v-bind:style="{fontSize:TheSize}">內聯樣式</div>

【1】    首先，其內是一個對象，key為樣式名（如fontSize），value為樣式的值（如TheSize，他是data里面的一個變量）；

【2】    其不是css，因此不能像css那樣寫，事實上是一個js的對象，需要采用駝峰寫法（教程說可以用短橫分隔符命名，但我失敗了，例如font-size是不行的）；

【3】    可以直接將變量（如果是一個有效對象）放置在這里，例如：

<div id="app">
    <div v-bind:style="TheStyle">內聯樣式</div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            TheStyle: {
                fontSize: "30px",
                color: "red",
                backgroundColor: "#aaa"
            }
        }
    })
</script>

 

渲染結果是：

<div style="font-size: 30px; color: red; background-color: rgb(170, 170, 170);">內聯樣式</div>

 

【4】    另外，假如綁定的對象的值被更改，那么內聯樣式也會被實時更改。

 

 

 

⑥內聯樣式的數組寫法：

非常簡單，使用數組，然后把對象放在其中即可。

例如：

<div v-bind:style="[TheStyle, AnotherStyle]">內聯樣式</div>
//略
data: {
    TheStyle: {
        fontSize: "30px"
    },
    AnotherStyle: {
        color: "red",
        backgroundColor: "#aaa"
    }
},

該div會自動合並兩個對象的值並添加到標簽中。

 

唯一需要注意的是，假如有一個對象的值是無效的，那么這個標簽的其他對象的值也無法作用到標簽上。

 

 

⑦內聯樣式的自動添加瀏覽器前綴適應：

最簡單的例子，濾鏡功能在chrome下是必須添加-webkit-前綴的，否則無效，但IE下無需添加。

<div v-bind:style="TheStyle">內聯樣式</div>
//略
TheStyle: {
    filter: "grayscale(1)"
}

在chrome瀏覽器下，變為：

    -webkit-filter: grayscale(1);

在Edge瀏覽器下變為：

filter: grayscale(1)