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

對於前端框架目前有許多的選擇,比方說React、AngularJS,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像AngularJS,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或AngularJS低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或AngularJS的同學們來說,簡直是一道曙光!

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

仔細看官網文件你會發現有一堆安裝方式要看,感覺好像非常複雜,其實一點也不複雜,就跟你載入jquery一樣:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.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://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.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://cdnjs.cloudflare.com/ajax/libs/vue/2.0.1/vue.min.js"></script>
        <script>
            new Vue({
                el:'#app',
                data:{
                    message:'Hello World!'
                }
            });
        </script>
    </body>
</html>

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

About Nowill Chang

從踏入網路世界的第一天開始就不斷熱衷研究網站的各種事宜,目的是讓台灣人製作的網站也可以追上國際設計潮流。目前是品禾全端網路工作室實習掃地僧,企圖用最少的資源創造最新的網路公司營運模式。公司的理念是“開發更有價值的跨平台網站與網路應用程式”,Line帳號:nowill,歡迎閒聊泡茶喝咖啡。
    Blogger Comment

0 位過客留言,我也要留言:

張貼留言