最新 New

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

[教學] Vue js快速上手 (一) Hello World!

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ,將於3秒後自動跳轉
對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或Angular低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或Angular的同學們來說,簡直是一道曙光!

Vue.js的優點呢,主要就是專注在web技術上,支援html template、pug (jade)、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值得學一下了,畢竟不像React、Angular專注跨平台、跨載具,導致要學的東西就變很多,或是有很多新的架構概念要學習,當然Vue.js也是有缺點的,那就是太專注於web上了,其他平台就沒辦法好好使用了,不過反過來說,如果你主要是開發web,那你來說就沒什麼差了,而且Vue.js可以說是簡單版的Angular,當你學會Vue.js之後要轉到Angular反而可以讓你學習快速,神奇吧!趕快來看一下怎麼用Vue.js吧!

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
只要把上面這一行放在html檔案裡就可以了,有沒有很簡單?當然你要下載下來放在網站目錄裡也是一個不錯的選擇!

按照寫程式慣例,我們就來示範一個Hello World吧!

第一步,非常簡單,建立空白的html頁面。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Hello World</title>
    </head>
    <body>

    </body>
</html>

第二步,引入Vue.js,並建立一個div命名id為app。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>0 Hello World</title>
    </head>
    <body>

        <div id="app">
            
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </body>
</html>

第三步,建立Vue執行的function,在div#app寫入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>
            new Vue({
                el:'#app',
                data:{
                    message:'Hello World!'
                }
            });
        </script>
    </body>
</html>

結束!有沒有超簡單!看不太懂?沒關係我來稍微解釋一下,在div#app裡面,你會看到{{ message }} 這樣的東西,如果你以前學過Smarty(PHP的樣板引擎),你會覺得有點熟悉,如果沒學過Smarty也沒關係,pug (jade)也類似{}的東西,簡單來說{{}}就是會幫你帶參數進去這個位置上,而在new Vue裡面我指定在id名稱為app的這個element(通常會翻成元素)裡帶進message參數,而message我在這裡指定預設值為Hello World! ,以上就是示範Hellow world的寫法,有沒有很簡單!很簡單吧!讓我們用jsfiddle把這一篇的code來執行一下看看:
如果你還搞不懂,沒關係,可以在本篇或Facebook社團裡提問,我會盡快解決你的問題的!

留言

  1. 請問是否有將元件寫在另外一隻Js然後再引入執行的方式呢

    回覆刪除
    回覆
    1. 當然可以,vue.js 本身也是javascript, 所以 javascript可以做的事 vue.js 也可以

      刪除

張貼留言