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 Component 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

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範例