對於前端框架目前有許多的選擇，比方說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社團裡提問，我會盡快解決你的問題的！
請問是否有將元件寫在另外一隻Js然後再引入執行的方式呢
當然可以,vue.js 本身也是javascript, 所以 javascript可以做的事 vue.js 也可以