1.什麼是Vue.js

官方的定義
現在網頁前端開發的時候，都希望做到可以把前端互動效果做到模組化。模組化的目的是希望在需求修改的時候，不需要對前端架構修改太多。而做到模組化效果的其中一種方式，為使用前端框架。Vue.js 就是能夠讓網頁前端的互動可以模組化的一種框架，其他類似的前端框架還有React.js, Angular。

2.為何選擇Vue.js

2.1 漸進式的框架

官方文件
漸進式是因為Vue.js本身只著重在view的管控，所以其他的功能可以根據自己的需求來逐步增加。

2.2 學習曲線比較平緩

其他相關論點
這點比較偏個人看法。主要也是跟第一點有關，由於Vue.js的設計偏向漸進式輕便，因此在學習各種不同的前端議題時，可以採取比較漸進式的學習。

3. 鐵人30天將會介紹的內容

接下來，進入 30天的介找主題
會參考以下文件的主題
官方Vue.js介紹
逐步介紹
1 Vue Basic Component
2 Vue Instance
3 Vue Data Binding
4 Vue Instance lifecycle
5 Vue Component Register
6 Vue render Process
7 Vuex State management
8 Vue.js how to work with this
9 Vue-i18n example
10 Vue-cli usage
11 Vue.directive define custom component event
12 Vue-Router dynamic route

4. Vue.js Component 介紹

Vue.js基礎單位就一個Component，Component內部包含data，以及需要呈現的template
以下範例 定義一個名稱是hello-world的Vue Component,data為message:'Hello World'

Vue.component('hello-world', {
  data:()=>{
    return {
      message: 'Hello World'  
    }
  },
  template: `<div>{{message}}</div>`
});

而需要把這個component render到html上就需要用Vue Instance
把element連接到DOM上面
首先要在html上宣告一個div

<div id="#app">
</div>

然後在一個Vue Instance 內部宣告要render的component name

new Vue({
    el: '#app',
    template: `<hello-world/>`
});

HelloWorld範例