[教學] Vue js快速上手(一) Hello World! | vue js app教學
對於前端框架目前有許多的選擇,比方說React、Angular,以及還有今天要介紹的Vue.js!Vue.js有人說它像React,也有人說它像Angular,Vue.js主要是View跟Model的部分,但是效能、速度以及學習門檻都比React或Angular低,所以上手簡單,對於javascript苦手,或是一直遲遲無法學會React或Angular的同學們來說,簡直是一道曙光!Vue.js的優點呢,主要就是專注在web技術上,支援htmltemplate、pug(jade)、coffeescript,甚至可與sass、less等加強版CSS做整合,而擴充性質的plugin也是頗多的,所以對於專注web技術研發的朋友呢,這就真的值...
對於前端框架目前有許多的選擇,比方說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://i1.wp.com/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><...