第一：安装过程可以参考官方地址：官方地址
第二：Vue.js是什么？
Vue是一套用于构建用户界面的渐进式框架 。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
怎么理解Vue是渐进式框架？
和其它框架相比，Vue主张最少，对开发者的要求很少，只做自己关心的事情，很容易嵌入其它工程。可以参看知乎里面一个回答：链接
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="app">
{{ message }}
</div>var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})现在数据和 DOM 已经被建立了关联，里面如何进行关联的就是Vue做的了，所有东西都是响应式的。
条件与循环
直接上代码：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了
处理用户输入
用 v-on 指令添加一个事件监听器
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})点击按钮 单词出现逆序输出
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})当你输入的时候 显示的文字 和 输入框里面的内容都可以进行改变
组件化应用构建
组件在Vue里面是一个很重要的概念，因为它的抽象性，我们可以使用组件构建各种复杂的页面。
在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。注册组件的方法：
// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
var app = new Vue(...)<ol>
<!-- 创建一个 todo-item 组件的实例 -->
<todo-item></todo-item>
</ol>上面就是定义一个简单的组件
从父作用域将数据传到子组件才对。让我们来修改一下组件的定义，使之能够接受一个 prop
Vue.component('todo-item', {
// todo-item 组件现在接受一个
// "prop"，类似于一个自定义特性。
// 这个 prop 名为 todo。
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})现在，我们可以使用 v-bind 指令将待办项传到循环输出的每个组件中
<div id="app-7">
<ol>
<!--
现在我们为每个 todo-item 提供 todo 对象
todo 对象是变量，即其内容可以是动态的。
我们也需要为每个组件提供一个“key”，稍后再
作详细解释。
-->
<todo-item
v-for="item in groceryList"
v-bind:todo="item"
v-bind:key="item.id"
></todo-item>
</ol>
</div>Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {
groceryList: [
{ id: 0, text: '蔬菜' },
{ id: 1, text: '奶酪' },
{ id: 2, text: '随便其它什么人吃的东西' }
]
}
})与自定义元素的关系
差别：
Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成
