obj

实例化：
    var vm = new Vue({
        el:"#naki",
        data:{
            msg:"haha"
        }
    })
    vm.msg === vm.$data.msg  //true  ,msg ne?


双向数据绑定：将DOM与Vue实例的data数据绑定到一起，彼此之间相互影响
    数据的改变会引起DOM的改变
    DOM的改变也会引起数据的变化
原理：Object.defineProperty中的get和set方法
getter和setter：访问器
作用：指定读取或设置对象属性值的时候，执行的操作


/*  defineProperty语法 介绍 */
var obj = {}
Object.defineProperty(obj, 'msg', {
  // 设置 obj.msg = "1" 时set方法会被系统调用 参数分别是设置后和设置前的值
  set: function (newVal, oldVal) {  },
  // 读取 obj.msg 时get方法会被系统调用
  get: function ( newVal, oldVal ) {}
})


eg: //缺点是必须触发keyup，比如一直按一个键不松手，span的内容不会跟着变
    <input type="text" id="txt" />
    <span id="sp"></span>


    <script>
    var txt = document.getElementById('txt'),
        sp = document.getElementById('sp'),
        obj = {}


    // 给对象obj添加msg属性，并设置setter访问器
    Object.defineProperty(obj, 'msg', {
      // 设置 obj.msg  当obj.msg反生改变时set方法将会被调用
      set: function (newVal) {
        // 当obj.msg被赋值时 同时设置给 input/span
        txt.value = newVal
        sp.innerText = newVal
      }
    })


    // 监听文本框的改变 当文本框输入内容时 改变obj.msg
    txt.addEventListener('keyup', function (event) {
      obj.msg = event.target.value
    })
    </script>
动态添加数据的注意点
注意：只有data中的数据才是响应式的，动态添加进来的数据默认为非响应式
可以通过以下方式实现动态添加数据的响应式
1 Vue.set(object, key, value) - 适用于添加单个属性
2 Object.assign() - 适用于添加多个属性
var vm = new Vue({
  data: {
    stu: {
      name: 'jack',
      age: 19
    }
  }
})


/* Vue.set */
Vue.set(vm.stu, 'gender', 'male')


/* Object.assign 将参数中的所有对象属性和值 合并到第一个参数 并返回合并后的对象*/

vm.stu = Object.assign({}, vm.stu, { gender: 'female', height: 180 })

css问题，只有one进行了样式初始化与布局，这样直接刷新加载其他页面就造成了这种情况

按正常的先加载one，有了缓存是可以正常显示的