Vue.js是什麼?

Vue.js是近年來蠻流行的前端框架，也是一個包裝好的語言，使用上會比較便利。用於建立使用者介面的JavaScript框架，有效的組織與簡化Web開發，也可以用Vue-cli建立單頁應用的Web應用框架。

• 特點:

1. Vue 提供了漸進式的方法來撰寫網頁內容，依照自己所需要的工具再行載入，若想更加瞭解可以參考這篇文章
2. 元件化:可以把 Vue 和 HTML 做整合，就像幫HTML的特定區塊訂製他們適合的衣服，並創造可以重複使用的網頁內容。
3. 相對平緩的學習曲線，不需要求太高的 JavaScript 能力
4. 簡潔易懂的語法
5. 提高維護品質
   補充:類似語言:react、angular(使用數據來驅動內容)

• Vue.js核心功能

1. 聲名式渲染
   在HTML(模板)呈現JavaScript(資料)，當狀態和資料被更新後，就會同步更新HTML，將資料渲染到DOM。
2. 元件系統
   元件 (Component) 的最小單位為節點，而好幾個節點組成稱為元件，元件有屬於各自的模板、邏輯、樣式，這些元件可以重複的被使用。

• 開發環境準備

1.使用線上編譯器
https://peterhpchen.github.io/vue-dojo/

2. 使用CDN載入Vue(先創建一個HTML檔案，並載入Vue.js)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

• 試著創立第一個Vue專案

<div id="app"><h1>{{ message }}</h1></div>
<script>
        new Vue({
            el: '#app',
            data: {
                message: 'Hello!This is your project 1'
            }
        })
</script>

將會跑出以下結果:

結語

如果以上的環境已經建置好，下一篇就正式的開始來認識vue的功能吧!