vue 简介

什么是Vue ？官网介绍，vue 是一套用于构建用户界面的渐进式框架。vue被设计为自底向上逐层应用。SPA: 首先我们先了解SPA(Single Page Application) 单页面应用程序。多页面程序： 每次请求服务器返回的都是一个完整的页面。

1. vue.js 引用

  
    
    
    


  

    {{a}}
  
  

上面这段代码通过sdn地址加载vue.js 文件，也可以加载本地已经下载的vue.js 文件。重点来了，我们要使用vue.js 先要创建一个vue对象通过new 方法，这个方法需要传递两个参数，el：指定的是vue 对象引用的模板也就是dom对象，data：为vue的数据对象。引用的模板可以对data 数据进行渲染。

2. vue实现数据绑定的原理

vue 是构建的以数据为驱动的前端框架。vue 以数据为驱动，就要监听数据的变换，监听到数据变化后对模板进行渲染，查看如下代码：

  var obj  = {name: "xiaohong"}
  obj.name = "xiaohuang"

如何监听name 发生了改变这里用到Observer模块：
Observer：能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者。vue实例会便利data对象的所有property，并使用Object.defineProperty 把这些property全部转为getter/setter方法，然后在这些方法里进行监听。从而实现监听对象属性值发生变化的目的。下图为vue数据动渲染过程：

vue.png

vue 无法检测property的添加或移除。由于vue会在初始化实例时对property 执行getter/setter转化，所以property必须在data对象上存在才能让Vue 将它转换成响应式：

var vm = new Vue(
  data:{ name: ''xiaohong"}
)
vm.name = "小红" // 响应式
vm.age = 18 // 非响应式

解决这个问题需要用到:

Vue.set(object, propertyName, value) 
// 或者 
this.$set(this.someObject, propertyName, value)
// 通过这个方法向对象添加响应式property，这个方法很重要

如上图vue 监听到数据变化后触发页面重新渲染，从而实现以数据为驱动的页面动态响应。