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

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

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

URL：Introduction - Vue.js

注意

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


    {{ message }}

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

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

聲明式渲染 - Declarative Rendering 簡單的文本渲染

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

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

如果在控制臺中手動更改app1.message的值，則能夠看到HTML頁面中顯示的文本也會即時更新。


    {{ message }}

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

HTML元素屬性綁定

在HTML中，通過v-bind這個指令來綁定至元素的指定屬性，如v-bind:title就會將Vue實例綁定至HTML元素的title屬性上。

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

下面的代碼實現(xiàn)的效果是：當(dāng)鼠標(biāo)懸浮至span元素所顯示的文本上時，就會顯示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()
    }
})

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

 // original code
 // rendered content

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

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

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

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


    Now you see me :)

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

循環(huán)

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

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

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

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


    
        
            {{ 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!"})語句會在app4這個Vue實例的todos屬性的最后再添加一個text字段。

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

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

在下面的示例中，通過Vue實例中的reverseMessage方法，來將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實現(xiàn)雙向數(shù)據(jù)綁定的效果。

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

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

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


    {{ message }}

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

組件系統(tǒng)

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

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

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

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

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

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

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

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

下面的代碼，在HTML中遍歷Vue實例中groceryList屬性里的每一項item，并將每個item與todo綁定。

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

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

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

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

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

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81260.html

發(fā)表評論

登陸后可評論

0條評論

BLUE

男|高級講師

我要關(guān)注我要私信

TA的文章

tensorflow2.4.0

閱讀 2432·2023-04-26 00:46
tensorflow函數(shù)

閱讀 593·2023-04-25 21:36
如何使用OPA實現(xiàn)多云策略和流程可移植性

閱讀 737·2021-11-24 10:19
#私藏項目實操分享# 什么是 SAP enhancement package

閱讀 2282·2021-11-23 09:51
hostxen，雙11，注冊贈送20元代金券，充值多送25%，VPS可選中國香港/洛杉磯/日本/新加

閱讀 1028·2021-10-21 09:39
教你如何在低成本、有限的時間里策劃裂變100社群_怎么做微信防封群

閱讀 841·2021-09-22 10:02
賦值運算符重載函數(shù)不加&為什么會出錯？

閱讀 1677·2021-09-03 10:29
前端每日實戰(zhàn)：54# 視頻演示如何用純 CSS 創(chuàng)作一副國際象棋

閱讀 2707·2019-08-30 15:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章