最新 New

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

[教學] 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所呈現的結果:

留言

張貼留言