Vue入门指南（1）

什么是Vue？

1. Vue.js是一个构建数据驱动的web界面的库。技术上，它重点集中在MVVM模式的ViewModel层，因此它非常容易学习，非常容易与其它库或已有项目整合。
2. Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
3. Vue.js 的核心是一个响应的数据绑定系统，它让数据与DOM保持同步非常简单。
4. Vue.js 自身不是一个全能框架——它只聚焦于视图层。
5. 在与相关工具和支持库一起使用时，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>

3. 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>

1. el：element 需要获取的元素，一定是html中的根容器元素。
2. data：用于数据的存储。
3. methods：用于存储各种方法。
4. 一个Vue实例其实正是一个MVVM模式中所描述的ViewModel。
5. 在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项。

属性与方法

1. 每个 Vue 实例都会代理其 data 对象里所有的属性。
2. 被代理的属性是响应的，如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。
3. Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $ ，以便与代理的数据属性区分。
4. Vue 实例在创建时有一系列初始化步骤——例如，它需要建立数据观察，编译模板，创建必要的数据绑定。在此过程中，它也将调用一些生命周期钩子，给自定义逻辑提供运行机会。