最新 New

[公告]草監網路更改網址至gratch.tw

0

[教學] Vue js快速上手 (二) 第一支Real-Time即時更新

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ，將於3秒後自動跳轉
在上篇我們教了Hello World的寫法，是不是非常簡單好懂，Vue.js其實還有許多不同的寫法是在輔助各種開發情況下，可以快速維護，減少前端人員來來回回找code的時間，而快速維護也變得是這一兩年來最重要的網站發展重點，不管是MVC、MVP或MVVM等等開發模式，其實主要的本質我覺得都在畫清職責、方便維護、提升效能，而這些寫法在後續的教學裡，如果有機會或者有好的例子，我會會盡量一一舉例讓大家可以了解。學習所有的寫法有助於您判斷、規劃一個好的開發架構，讓你日後維護或是開發類似的功能時可以事半功倍。本篇當然延續上篇，用“Hello World！”來做範例，不過會做一些修改與調整好來做展示。

首先在這裡我先提出一種與上篇不一樣的寫法，也是最簡單的變形，那就是將參數設定另外寫，也就是當你參數預設值非常複雜時，為了讓您可以發便維護，會建議你採用這種寫法。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

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

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>
接下來，我要在這裡介紹一個新的html擴充屬性，叫V-model，如果直接按照屬性名來翻譯大概就是呼叫vue裡面的model功能，所以其實還蠻直白的，在Angular也有所謂的ng-model屬性，功能上是差不多的。怎麼使用V-model？很簡單，我們將剛剛的“Hello World！”加上一個input，如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

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

         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>
我們將{{message}} 加上h1標籤，然後在下方新增一個文字的input輸入表單，接著v-model名稱是message，所以這個input就會自動帶入與{{message}} 相同的參數內容，而你只要變更inupt裡面的文字，頁面上的{{message}}參數也會立刻馬上一起更新，非常好玩，而且，恭喜你！你在不知不覺中寫了第一隻用Vue.js完成的Real-time即時更新頁面！真是太厲害了你！有沒有很簡單！

這到底是什麼原理呢？如果你上一篇有注意看，你會發現我在解釋data裡面的message時，我是說“預設值”是"Hello World!"，是的！它是預設值，所以當你在v-model裡面輸入文字或刪減文字時，你修改的其實就是data裡面message的參數值，既然參數值改變，vue.js就會自動幫你啟動model進而修改{{message}} 在頁面上呈現的內容，進而達到Real-time即時更新頁面的效果。

最後要來說一下一個簡單的debug方式，開頭我們有說將data另外寫可以避免參數過多時顯得混亂，那們我們要怎麼確定我們參數的內容是對的？最簡單得方式就是顯示在頁面上，我們只要多一行就可以達到我們要的效果：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

         <div id="app">
            <h1>{{ message }}</h1>
            <input type="text" v-model="message">
            
            <div>{{ $data | json }}</div>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            var data = {
                message:'Hello World!'
            }
            new Vue({
                el:'#app',
                data:data
            });
        </script>
    </body>
</html>
在這裡又看到{{}} 了，在裡面寫的是$data，也就是下面var data的內容，而|在這邊是filter的意思，也就是篩選，還蠻好用的，之後有時間會再好好的提一提，而最後的json就是大家可能還蠻熟悉的json格式，所以最後在畫面上你就可以看到用json格式組出來的data參數值了！

再試試看修改input內容看看，下方json格式的參數值是不是也會跟著改變？沒錯，你又再一次證明你真的完成了一個Real-Time即時更新頁面了！恭喜你！！

最後附上jsfiddle，讓各位可以在線上看到本篇教學最後一段code所呈現的結果：

留言

張貼留言