Vue学习之把手沾湿

介绍

什么是Vue.js

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
注意我们不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。

除了文本插值，我们还可以像这样来绑定元素 attribute：

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

这里我们遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 message property 保持一致”。

条件与循环

条件

<div id="app-3">
  <p v-if="seen">现在你看到我了</p>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

循环

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

事件监听

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('')
    }
  }
})

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核心最基本的功能，接下来步入正题。

设计模式

为什么会出现MVVM

• 传统的做法缺乏组织性
• 类库缺乏业务分居
• 维护性、拓展性差
• 性能（dom操作）

设计理念

通过对虚拟 DOM 的数据进行数据劫持，当虚拟 DOM 中数据发生改变，劫持的 setter 和 getter 就会通知 watcher ，可以理解为消息队列的模式，Object.defineProperty 作为发布者去发布消息通知订阅者(watcher)，这时候订阅者会触发新的 DOM渲染 。

Virtual DOM

虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所作的任何改动，都会被自动切高效的同步到虚拟DOM，最后再批量同步到DOM中。

• 通过h函数创建，提供与真实DOM节点所对应的虚拟节点vnode
• 将虚拟节点vnode和旧虚拟节点oldVnode进行diff（精细化比较），算出应该如何最小量更新，最后更新视图

Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的。
一个 Vue 应用由一个通过 new Vue 创建的根 Vue 实例，以及可选的嵌套的、可复用的组件树组成。举个例子，一个 todo 应用的组件树可以是这样的：

根实例
└─ TodoList
   ├─ TodoItem
   │  ├─ TodoButtonDelete
   │  └─ TodoButtonEdit
   └─ TodoListFooter
      ├─ TodosButtonClear
      └─ TodoListStatistics

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。

生命周期

vue生命周期共分为四个阶段：

1. 实例创建
2. DOM渲染
3. 数据更新
4. 销毁实例

共有八个基本钩子函数：

1. beforeCreate --创建前
   触发的行为：vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
   在此阶段可以做的事情：加loading事件
2. created --创建后
   触发的行为：vue实例的数据对象data有了，$el还没有
   在此阶段可以做的事情：解决loading，请求ajax数据为mounted渲染做准备
3. beforeMount --渲染前
   触发的行为：vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换
4. mounted --渲染后
   触发的行为：vue实例挂载完成，data.filter成功渲染
   在此阶段可以做的事情：配合路由钩子使用
5. beforeUpdate --更新前
   触发的行为：data更新时触发
6. updated —更新后
   触发的行为：data更新时触发
   在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7. beforeDestroy —销毁前
   触发的行为：组件销毁时触发
   在此阶段可以做的事情：可向用户询问是否销毁
8. destroyed —销毁后
   触发的行为：组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在
   在此阶段可以做的事情：组件销毁时进行提示