2016 年 8 月 21 日

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

本篇目錄

對於前端框架目前有許多的選擇,比方說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社團裡提問,我會盡快解決你的問題的!

2 comments on “[教學] Vue js快速上手 (一) Hello World!”

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

相關推薦文章

希望您會喜歡
2011 年 9 月 2 日
[網站]White Angel 天使白時尚美學診所

負責內容:元素與部分單元內頁設計+前端架構+AS3動畫程式+部分內頁Flash動畫  White A […]

Read More
2011 年 5 月 22 日
[免費]本週免費App 遊戲軟體下載看這裡

Jean's Boutique 2 (遊戲推薦下載) 這款遊戲是以經營精品店為遊戲主軸,你必須妥善經營才能獲得 […]

Read More
2010 年 1 月 9 日
[免費]Alchemist 等多款免費App 遊戲下載

Alchemist (遊戲推薦下載) 這是一款記憶消除遊戲,你必須按照遊戲上方的顏色提示從下方彩色化學罐中找出 […]

Read More
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram