Vue學(xué)習(xí)筆記之一 - 入門(mén)

BLUE 發(fā)布于2019-08-20 13:49 / 468人閱讀

摘要：而在頁(yè)面中，在之內(nèi)的元素只需寫(xiě)一個(gè)。但是元素的內(nèi)容被更改之后，控件中的內(nèi)容并不會(huì)同步更新。下面的代碼，在中遍歷實(shí)例中屬性里的每一項(xiàng)，并將每個(gè)與綁定。而在定義組件的代碼中，接收傳入的，并在元素中顯示中的字符串。

URL：Introduction - Vue.js

注意

所演示的示例，都是在JS中將Vue實(shí)例綁定至HTML中的指定元素，然后再通過(guò)Vue實(shí)例中data內(nèi)的屬性或者methods中的方法，來(lái)對(duì)所綁定元素的子元素進(jìn)行操作的，而不是對(duì)指定ID元素本身進(jìn)行操作。


    {{ message }}

有時(shí)候代碼正常，但是Vue會(huì)報(bào)如下的錯(cuò)誤，可能是因?yàn)樵贖TML頁(yè)面中，JS腳本的載入在HTML頁(yè)面的渲染之前執(zhí)行了，解決方法就是把相關(guān)的script標(biāo)簽移動(dòng)至body標(biāo)簽內(nèi)最后的部分。

[Vue warn]: Cannot find element: #element-id

聲明式渲染 - Declarative Rendering 簡(jiǎn)單的文本渲染

在HTML的元素內(nèi)寫(xiě)上{{ message }}，然后在JS中為data內(nèi)的message屬性指定值，即可顯示所指定的文本，這是最基礎(chǔ)的顯示文本的方式。

在JS中，el用于定位HTML元素，Vue實(shí)例中的message屬性與HTML中的字段同名，其值則會(huì)被渲染在最終的HTML頁(yè)面中。

如果在控制臺(tái)中手動(dòng)更改app1.message的值，則能夠看到HTML頁(yè)面中顯示的文本也會(huì)即時(shí)更新。


    {{ message }}

var app1 = new Vue({
    el: "#app1",
    data: {
        message: "Hello Vue!"
    }
})

HTML元素屬性綁定

在HTML中，通過(guò)v-bind這個(gè)指令來(lái)綁定至元素的指定屬性，如v-bind:title就會(huì)將Vue實(shí)例綁定至HTML元素的title屬性上。

帶v-前綴的指令用于對(duì)所渲染的DOM執(zhí)行響應(yīng)式操作。

下面的代碼實(shí)現(xiàn)的效果是：當(dāng)鼠標(biāo)懸浮至span元素所顯示的文本上時(shí)，就會(huì)顯示JS中message的值，即：

"You loaded this page on " + new Date()


    
        Hover your mouse over me for a few seconds to see my dynamically bound title!

var app2 = new Vue({
    el: "#app2",
    data: {
        message: "You loaded this page on " + new Date()
    }
})

如果用下面第一行的寫(xiě)法，那么最終渲染出來(lái)的HTML源代碼則為第二行中的樣子，而不是期望中的：將innerHTML屬性綁定至message字段即可顯示指定的文本。

 // original code
 // rendered content

條件判斷與循環(huán) 條件判斷

Vue不僅可以將數(shù)據(jù)綁定至屬性，還能夠綁定到DOM的結(jié)構(gòu)上。

通過(guò)設(shè)置Vue實(shí)例中任意屬性值為true或者false，可以生成或刪除該元素。

查看最終的HTML源代碼可知，Vue刪除元素并不是更改其display屬性，而是直接將整個(gè)HTML元素替換為這段字符串，這樣更安全，用戶將無(wú)法通過(guò)查看源代碼的方式來(lái)拿到元素原本的內(nèi)容。


    Now you see me :)

var app3 = new Vue({
    el: "#app3",
    data: {
        seen: true
    }
})

循環(huán)

v-for指令用于循環(huán)遍歷數(shù)組中的元素。

在下面的示例中，Vue實(shí)例的todos屬性包含三個(gè)元素，元素字段名為text，字段值為字符串。

而在HTML頁(yè)面中，在ol之內(nèi)的li元素只需寫(xiě)一個(gè)。通過(guò)v-for指令，能夠根據(jù)Vue實(shí)例中對(duì)應(yīng)屬性里的元素個(gè)數(shù)，直接生成指定個(gè)li元素，其中不包含HTML原始代碼里的那個(gè)li元素。

對(duì)于每個(gè)生成的li元素，設(shè)置其文本為所綁定todos屬性中所對(duì)應(yīng)的text字段的值。即第一個(gè)li元素的值，為todos屬性中第一個(gè)text字段的值，第二個(gè)li元素的值為第二個(gè)text字段的值，以此類(lèi)推。


    
        
            {{ todo.text }}

var app4 = new Vue({
    el: "#app-4",
    data: {
        todos: [
            { text: "Learn JavaScript" },
            { text: "Learn Vue" },
            { text: "Build something awesome" }
        ]
    }
})

app4.todos.push({ text: "You made it!"})語(yǔ)句會(huì)在app4這個(gè)Vue實(shí)例的todos屬性的最后再添加一個(gè)text字段。

處理用戶輸入 調(diào)用函數(shù)

v-on指令用于綁定事件監(jiān)聽(tīng)至指定的HTML元素上，這樣可以調(diào)用所關(guān)聯(lián)的Vue實(shí)例中的方法。

在下面的示例中，通過(guò)Vue實(shí)例中的reverseMessage方法，來(lái)將message屬性中的文本逆序排列。


    {{ message }}

var app5 = new Vue({
    el: "#app-5",
    data: {
        message: "Hello Vue!"
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split("").reverse().join("")
        }
    }
})

雙向數(shù)據(jù)綁定

v-model實(shí)現(xiàn)雙向數(shù)據(jù)綁定的效果。

在下面的示例中，v-model="message"實(shí)現(xiàn)對(duì)message的雙向綁定。

在input控件中輸入的內(nèi)容會(huì)同步更新至p元素。

但是！p元素的內(nèi)容被更改之后，input控件中的內(nèi)容并不會(huì)同步更新。（那應(yīng)該如何理解這個(gè)雙向數(shù)據(jù)綁定呢？）


    {{ message }}

var app6 = new Vue({
    el: "#app-6",
    data: {
        message: "Hello Vue!"
    }
})

組件系統(tǒng)

在Vue中，組件 - Component，是一個(gè)非常重要的概念。

編寫(xiě)大型應(yīng)用時(shí)，很多地方是通用的，可以劃分為若干個(gè)體積小的、自包含的（啥意思？）、可重用的組件。比如以列表形式展示內(nèi)容的模塊，就可以編寫(xiě)為一個(gè)大組件，而列表中的每個(gè)內(nèi)容，又是一個(gè)小組件。

本質(zhì)上，Vue中的組件就是一個(gè)帶預(yù)定義設(shè)置的Vue實(shí)例。下面的代碼示范了如何注冊(cè)一個(gè)Vue組件：

Vue.component("todo-item", {
    template: "This is a todo"
})

注冊(cè)完組件之后，在HTML中，就可以用下面的方式創(chuàng)建一個(gè)組件的實(shí)例：

但是以上面的方式來(lái)簡(jiǎn)單地定義一個(gè)組件的話，如果創(chuàng)建多個(gè)組件的實(shí)例，生成的文本都是相同的。為了讓各個(gè)組件有不同的內(nèi)容，可以通過(guò)props屬性，來(lái)將父級(jí)域的值，傳遞給子組件。

Vue.component("todo-item", {
    props: ["todo"],
    template: "{{ todo.text }}"
})

然后就可以通過(guò)v-bind指令，在HTML中將父元素的值傳遞給各個(gè)子組件。

下面的代碼，在HTML中遍歷Vue實(shí)例中groceryList屬性里的每一項(xiàng)item，并將每個(gè)item與todo綁定。

而在定義組件的JS代碼中，接收傳入的todo，并在li元素中顯示todo中的字符串。

// 定義Vue組件todo-item
// 組件中通過(guò)名為todo的props屬性
// 來(lái)從父級(jí)域向子組件中傳遞數(shù)據(jù)
// 下面的代碼即是將傳遞給todo屬性的text字段渲染至"li"元素中
Vue.component("todo-item", {
    props: ["todo"],
    template: "{{ todo.text }}"
}

// Vue實(shí)例中定義屬性數(shù)組groceryList
new Vue({
    ...
    data: {
        groceryList: [
            { text: "..." },
            { text: "..." },
            { text: "..." }
        ]
    }
})

// HTML中創(chuàng)建todo-item組件
// 遍歷屬性數(shù)組groceryList中的每一項(xiàng)item
// 并將其與todo綁定
// 如此便可將每個(gè)todo中的數(shù)據(jù)傳至各個(gè)組件中

再總結(jié)一下上面的例子：

在Vue實(shí)例中定義屬性數(shù)組，數(shù)組中的元素用于在前端頁(yè)面上以有序列表形式顯示；

定義Vue組件，設(shè)置好所綁定的props屬性的名稱(chēng)，以及Vue實(shí)例中屬性數(shù)組元素的顯示格式；

在前端HTML頁(yè)面中，寫(xiě)一個(gè)組件，用v-for遍歷屬性數(shù)組，并用v-bind將實(shí)例中的數(shù)據(jù)傳遞給前臺(tái)。