[Vue] Vue初探

2017-07-07

初步認識Vue

什麼是Vue？ (以下引用自https://cn.vuejs.org/v2/guide/)

Vue.js（读音 /vjuː/，类似于 view）是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

Vue的初探

****以下範例皆參照https://cn.vuejs.org/v2/guide/內的範例，有些內容會有小調整****

渲染

Vue渲染頁面的撰寫方式其實跟AngularJS很類似，

一樣有用雙大括號{{}}與直接在html裡面使用v-bind的方式(AngularJS是ng-)

以下面例子來說，v-bind:title即代表span內的title屬性要綁定message的值，

雙大括號綁定不可使用在html tag內，即<span title="{{message}}">AAAA</span>是無效果的

#v-bind

<div id="app">{{message}}</div>
<div id="app2">
  <span v-bind:title="message">滑鼠移動到此暫停查看隱藏訊息</span>
  <span title="{{message}}">AAAA</span> <!--錯誤，不能在attribute使用雙大括弧綁定-->
</div>

<script>
        var app = new Vue({
            el: "#app",  // 需要執行動作的div的id，該div內的所有element都會被此物件所監控
            data: {  // 資料部分
                message: "Hello Vue!",  // 資料綁定的名稱跟值
            },
            methods: {
                // 事件部分，會在後面詳解
            }
        });

        var app2 = new Vue({
            el: "#app2",
            data: {
                message: "頁面加載於:" + new Date(),  // 可由其他函數取值並填入內容
            }
        });
</script>

條件

條件的部分也與AngularJS類似

在v-if內的值為true時則顯示元素，反之則隱藏

<div id="app3">
    <span v-if="seen">看不到</span> <!--v-if為true時顯示，fale時隱藏-->
    <button v-on:click="show">{{(seen==true)?"隱藏":"顯示"}}</button> <!--{{}}內可以填入javascript表達式-->
</div>

<script>
        var app3 = new Vue({
            el: "#app3",
            data: {
                seen: true,
            },
            methods:{
                show: function () {
                    this.seen = !this.seen; // 改變狀態
                }
            }
        });
</script>

迴圈

v-for內填入來源陣列todos並設立todo變數(類似for-each迴圈)，再將值綁定到li內{{todo.text}}

在陣列內容被異動時，會根據設定v-for的元素將之做增加或刪減

<div>
    <div id="app4" style="width: 40%;display: inline-flex;">
        <ol>
            <li v-for="todo in todos">{{todo.text}}</li>
        </ol>
    </div>
    <div style="width: 10%;display: inline-flex;">
        <button onclick="move('left')">←</button>
        <button onclick="move('right')">→</button>
    </div>
    <div id="app41" style="width: 40%;display: inline-flex;">
        <ol>
            <li v-for="todo in todos">{{todo.text}}</li>
        </ol>
    </div>
</div>

<script>
        var app4 = new Vue({
            el: "#app4",
            data: {
                todos: [
                    { id:0, text: "大阪" },
                    { id:1, text: "東京" },
                    { id:2, text: "札幌" },
                ]
            }
        });

        var app41 = new Vue({
            el: "#app41",
            data: {
                todos: [],
            }
        });

        function move(side) {
            // 移動事件
            var from = side === "left" ? app41 : side === "right" ? app4 : null,
                to = side === "left" ? app4 : side === "right" ? app41 : null;

            if (from == null || to == null) return;

            if (from.todos.length > 0) {
                to.todos.push(from.todos.pop()); // 取得from的pop元素並push到to的陣列內
            }
        };
</script>

事件綁定

Vue的事件綁定參照以下格式v-on:事件='function名稱'

例如：v-on:click='fnClick'就表示這個element在被click的時候執行fnClick這個function

<div id="app5">{{message}}<button type="button" v-on:click="reverseMessage">反轉</button></div>

<script>
        var app5 = new Vue({
            el: "#app5",
            data: {
                message: "Hello Vue!",
            },
            methods: {
                reverseMessage: function () {
                    // 執行反轉動作
                    this.message = this.message.split(" ").reverse().join(" ");
                }
            }
        });
</script>

雙向繫結(Two-way Binding)

現在前端框架中最火紅的不外乎就是雙向繫結了

幾乎每個框架都會有這個功能

(以框架是用來處理問題的角度來看，資料的繫結應該是前端開發人員最頭大的問題了)

input的部分使用v-model來綁定資料模型，div則用{{}}將資料顯示

當使用者在輸入框內輸入任何值時，div會即時顯示使用者輸入的值

<div id="app6">{{message}}<input type="text" v-model="message" /></div>

<script>
        var app6 = new Vue({
            el: "#app6",
            data: {
                message: "Two way binding",
            }
        });
</script>

樣板(Template)

當頁面越來越龐大，功能越來越多時

程式會變得越趨複雜，並且難以維護

這個時候就需要利用樣板來做分割切版

當把一個個的元件都分出來為獨立模組時

系統在進行調整或功能抽換都會變得更容易

    <div id="app7">
        <ol>
            <todo-item v-for="item in items" v-bind:todo="item" v-bind:key="item.id"></todo-item>
        </ol>
    </div>

<script>
        Vue.component("todo-item", {
            props: ['todo'],
            template: "<li>{{todo.text}}</li>",
        });
        var app7 = new Vue({
            el: "#app7",
            data: {
                items: [
                    { text: "大阪" },
                    { text: "東京" },
                    { text: "札幌" },
                ]
            }
        });
</script>

以上就是我初次接觸Vue所做的練習

練習內容皆參照https://cn.vuejs.org/v2/guide/index.html

jsbin即時練習https://jsbin.com/hekaxic/1/edit?html,js,output

Write By Charley Chang

新手發文，若有錯誤還請指教，
歡迎留言或Mail✉給我