Vue.js 學習過程一 起步

什麼是Vue.js

    用於構建用戶界面的漸進式框架，可以自底向上逐層應用

最基礎開始：

聲明式渲染

    Vue.js的核心是一個允許採用簡潔的末班語法來聲明式的將數據渲染進DOM系統

案例：

    html:

    <div id="app">{{message}}</div>

    js:

    var app = new Vue({

        el:'#app',

        data:{

               message:'hello vue'

        }

    })

通過聲明將數據渲染到HTML上，頁面中會顯示hello vue，並且他們是響應式的

    即如果message發生改變，會自動渲染到HTML上

也可以用來綁定元素特性：

案例：

    HTML:

       <div id="app">

            <span v-bind:title="message">

                鼠標懸停查看信息

            </span>    

       </div>

    JS:

        var app = new Vue({

            el:'#app',

            data:{

                message:"頁面加載於" + new Date().toLoacleString()

             }

        })

將span的title屬性綁定爲message

v-bind：指令，指令帶有前綴v-，以表示他們是特殊的特性

條件與循環

    控制切換一個元素是否顯示：

    HTML：

        <div id="app">

            <p v-if="seen">這段文字目前是顯示的</p>

        </div>

    JS：

        var app = new Vue({

            el:'#app',

            data:{

                seen:true

            }

        })

    不僅可以吧數據綁定到DOM文本或者特性上，還可以綁定到DOM結構中

    此處的文字是顯示的，當seen爲false時，p自動隱藏

v-for

v-for指令可以綁定數組的數據用來渲染項目列表

    HTML：

        <div id="app">

            <ol>

                <li v-for="todo in todos">{{todo}}</li>

            </ol>

        </div>

    JS：

        var app = new Vue({

            el:'#app',

            data:{

                todos:[

                "第一條數據",

                "第二條數據",

                "第三條數據"

                ]

            }  

         })

    v-for指令會自動把todos中的每一條數據渲染到HTML中

    輸入app.todos.push("第四條數據")會自動將數據插入

處理用戶輸入

    爲了實現交互，可以使用v-on指令添加事件監聽

案例：

    HTML：

        <div id="app">

            <p>{{message}}</p>

            <button v-on:click="reverseMessage">逆轉消息</button>

        </div>

    JS:   

        var app = new Vue({

            el:"#app",

            data:{

                    message:"Hello Vue.js"

            },

            methods:{

                reverseMessage:function(){

                this.message = this.message.split("").reverse().join(" ")

                }

            }        

})

    在reverseMessage中，更新了應用的狀態，但是沒有使用DOM，所有的DOM操

    作都由Vue來進行處理。

v-model

實現表單輸入和應用狀態之間的雙向綁定

案例：

    HTML:

        <div id="app">

            <p>{{message}}</p>

            <input v-model="message">

        </div>

    JS：

        var app = new Vue({

            el:"#app",

            data:{

                message:"Hello Vue"

            }

        })

當輸入框輸入數據的時候，p中顯示的數據隨之變化

組件化應用構建

    組件系統是Vue的重要概念，允許我們使用小型，獨立和通常可服用的組件構建大

型應用，可以將任何類型的應用界面抽象爲一課組件樹

    在Vue總，一個組件的本質是擁有預定義選項的Vue實例

在Vue中註冊組件：

    Vue.component("todo-item",{

        template: "<li>這是一個待辦項"</li>

    })

可以用它構建另一個組件模板：

    <ol>

        <todo-item></todo-item>

    </ol>

如果這樣，每個待辦項都會顯示相同文本，修改組件定義，使它能夠接受一個prop

    Vue.component("todo-item",{

        props:["todo"],

        template: "<li>這是一個待辦項"</li>

    })

現在，可以使用v-bind指令將待辦項傳到循環輸出的每個組件中：

HTML：

<div id="app">

    <ol>

   <todo-item

    v-for="item in groceryList"

    v-bind:todo="item"

    v-bind:key="item.id"

    >

   </todo-item>

     </ol>

</div>

JS：

    Vue.component("todo-item",{

        props:["todo"],

        template:'<li>{{todo.text}}</li>'

    })

    var app = new Vue({

        el:"#app",

        data:{

            groceryList:[

                {id:0,text:'蔬菜'},

                {id:1,text:'奶酪'},

                {id:2,text:"吃啥都行"}

            ]

        }

    })

這個例子是刻意設計的，設法將應用分割爲兩個小的單元，子單元通過props解構與

父單元進行了良好的降低耦合，現在刻意進一步改進<todo-item>組件，提供更爲復

雜的邏輯和模板，而不會影響到父單元