国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Vue學習筆記之一 - 入門

Ververica / 586人閱讀

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

URL：Introduction - Vue.js

注意

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


    {{ message }}

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

[Vue warn]: Cannot find element: #element-id
聲明式渲染 - Declarative Rendering 簡單的文本渲染

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

在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執行響應式操作。

下面的代碼實現的效果是：當鼠標懸浮至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
條件判斷與循環 條件判斷

Vue不僅可以將數據綁定至屬性，還能夠綁定到DOM的結構上。

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

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


    
Now you see me :)


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

v-for指令用于循環遍歷數組中的元素。

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

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

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


    
    
        
  1. 
            {{ todo.text }}
        
    2. 
    


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字段。

處理用戶輸入 調用函數

v-on指令用于綁定事件監聽至指定的HTML元素上，這樣可以調用所關聯的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("")
        }
    }
})
雙向數據綁定

v-model實現雙向數據綁定的效果。

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

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

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


    
{{ message }}

    

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

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

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

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

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

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

    但是以上面的方式來簡單地定義一個組件的話，如果創建多個組件的實例，生成的文本都是相同的。為了讓各個組件有不同的內容，可以通過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屬性
// 來從父級域向子組件中傳遞數據
// 下面的代碼即是將傳遞給todo屬性的text字段渲染至"li"元素中
Vue.component("todo-item", {
    props: ["todo"],
    template: "
  • {{ todo.text }}
    • "
}

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

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

    再總結一下上面的例子：

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

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

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

    文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

    轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50387.html

    相關文章

    • Vue學習筆記之一 - 入門

      摘要：而在頁面中，在之內的元素只需寫一個。但是元素的內容被更改之后，控件中的內容并不會同步更新。下面的代碼，在中遍歷實例中屬性里的每一項，并將每個與綁定。而在定義組件的代碼中，接收傳入的，并在元素中顯示中的字符串。 URL：Introduction - Vue.js 注意 所演示的示例，都是在JS中將Vue實例綁定至HTML中的指定元素，然后再通過Vue實例中data內的屬性或者method...

      BLUE 評論0 收藏0

    • (原創)vue 學習筆記

      摘要：菜鳥教程這是一個屬性其值是字符串菜鳥教程同上這是一個屬性其值是字符串用于定義的函數，可以通過來返回函數值。它們都有前綴，以便與用戶定義的屬性區分開來。 開篇語 我最近學習了js,取得進步,現在學習vue.js.建議新手學習,請不要用npm的方式(vue-cli,vue腳手架),太復雜了. 請直接下載vue.js文件本地引入,就上手學習吧參照菜鳥教程網站的vue.js教程http://...

      layman 評論0 收藏0

    • react入門學習筆記（一）

      摘要：選擇的主要原因大概是因為該框架出現較早，感覺上會相對成熟，日后學習中遇到問題想要查找答案相對簡單一些，對，就是這么簡單。多說無益，接下來開始的學習，我按照我學習中帶著的問題來一一解答，完成我的入門筆記。主要是針對前端的組件化開發。 這兩天得空，特意來折騰了以下時下火熱的前端框架react，至于為什么選react,作為一個初學者react和vue在技術上的優劣我無權評論，也就不妄加評論了...

      leon 評論0 收藏0

    • Vue.js資源分享

      摘要：中文官網英文官網組織發出一個問題之后，不要暫時的離開電腦，如果沒有把握先不要提問。珍惜每一次提問，感恩每一次反饋，每個人工作還是業余之外抽出的時間有限，充分準備好應有的資源之后再發問，有利于問題能夠高效質量地得到解決。 Vue.js資源分享 更多資源請Star：https://github.com/maidishike... 文章轉自：https://github.com/maid...

      vpants 評論0 收藏0

    • 學習實踐 - 收藏集 - 掘金

      摘要：官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章，一直想有機會再次實踐下。 2道面試題：輸入URL按回車&HTTP2 - 掘金通過幾輪面試，我發現真正那種問答的技術面，寫一堆項目真不如去刷技術文章作用大，因此刷了一段時間的博客和掘金，整理下曾經被...

      mikyou 評論0 收藏0

    發表評論

    0條評論

    Ververica

    男|高級講師

    TA的文章

    閱讀更多
    最新活動
    閱讀需要支付1元查看
    <