.svg){kind=logo}
[教學] Vue js快速上手 (一) Hello World!
21, May早期Vue.js 第一版出來之後，我就寫了這一系列的教學，結果寫完沒多久Vue.js 第二版就出來了，於是我又花時間改了這一系列文章，結果沒想到我還沒改完Vue.js 第三版出來了！心裡想著我等下一版在改吧，結果就一直沒有下一版了......，人生真的是很難預料，所幸這次換Blog 系統，我也打算重寫文章，所以就乾脆在從頭來一次吧！
Vue.js的優點呢，主要就是專注在web技術上，支援html template、pug (jade)、coffeescript，甚至可與sass、less等加強版CSS做整合，而擴充性質的plugin也是頗多的，所以對於專注web技術研發的朋友呢，這就真的值得學一下了，畢竟不像React專注跨平台，導致要學的東西就變很多，或是有很多新的架構概念要學習，當然Vue.js也是有缺點的，那就是太專注於web上了，其他平台就沒辦法好好使用了，不過反過來說，如果你主要是開發web，那你來說就沒什麼差了，而且Vue.js可以說是簡單版的Angular，當你學會Vue.js之後要轉到Angular反而可以讓你學習快速，神奇吧！趕快來看一下怎麼用Vue.js吧！
立即上手的安裝
仔細看官網文件你會發現有一堆安裝方式要看，感覺好像非常複雜，其實一點也不複雜，就跟你載入javascript檔案一樣：
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>只要把上面這一行放在html檔案裡就可以了，有沒有很簡單？當然你要下載下來放在網站目錄裡也是一個不錯的選擇！
按照寫程式慣例，我們就來示範一個Hello World吧！
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://unpkg.com/vue@3/dist/vue.global.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://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const { createApp, ref } = Vue
createApp({
setup() {
const message = ref('Hello World!')
return {
message
}
}
}).mount('#app')
</script>
</body>
</html>結束！有沒有超簡單！看不太懂？沒關係我來稍微解釋一下，在div#app裡面，你會看到{{ message }} 這樣的東西，如果你以前學過Smarty（PHP的樣板引擎），你會覺得有點熟悉，如果沒學過Smarty也沒關係，pug (jade)也類似{}的東西，簡單來說{{}}就是會幫你帶參數進去這個位置上。在javascript 裡的第一行const { createApp, ref } = Vue 其實是簡寫的概念，如果正常寫會是：
const createApp = Vue.createApp
const ref = Vue.ref第一行就是新增一個Vue app 的意思，而第二行則是新增一個會自動更新畫面數值的神奇變數，這個變數可以是布林值、數字、文字等等，都可以！所以當我下面的creatApp 回傳message時，就會去更新html裡面的{{ message }}，自然而然的畫面就會顯示Hello World!有沒有很簡單易懂呢？