什么是Vue？
- Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。
- Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
- Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。
- Vue.js 自身不是一个全能框架——它只聚焦于视图层。
- 在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
响应数据绑定
image.png
QQ图片20180312150424.png
组件系统
几乎任意类型的应用的界面都可以抽象为一个组件树：
image.png
1.组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。
2.实际上，一个典型的用Vue.js构建的大型应用将形成一个组件树。
看看使用了组件的应用模板是什么样的：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>
- Vue.js 组件非常类似于自定义元素，它是 Web 组件规范的一部分，其组件语法参考了Web 组件规范。
构造器
每个 Vue.js 应用的起步都是通过构造函数 Vue 创建一个 Vue 的根实例：
<div>{{ greet("morning") }}</div>
<script src="vue.js"></script>
<script>
var app = new Vue({
// 选项
el: "div",
data: {
name: "赛斯特惠"
},
methods: {
greet: function (time) {
return "Good " + time + " 赛斯特惠"
}
}
})
</script>
- el：element 需要获取的元素，一定是html中的根容器元素。
- data：用于数据的存储。
- methods：用于存储各种方法。
- 一个Vue实例其实正是一个MVVM模式中所描述的ViewModel。
- 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。
属性与方法
- 每个 Vue 实例都会代理其 data 对象里所有的属性。
- 被代理的属性是响应的，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
- Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ，以便与代理的数据属性区分。
- Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。
