1.demo1.html 



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <!--
  1.js 内置观察者模式 对象的属性(描述对象)
  -->

  <script type="text/javascript">
    var obj = {name:"max",age:30};
    console.log(obj.name); // name是一个属性
    // 描述对象（针对对象的属性）
    // Object.defineProperty 是 Object 的静态方法
    Object.defineProperty(obj,"name",{ // 参数：观察对象  属性名 描述对象
      get:function(){ // 获取 阻截访问属性  钩子函数
        // console.log("max is max");
        // return "yangyang"
        return this.value;
      }, // 将钩子函数的返回值作为 访问属相的返回值(集对象的属性值)
      set:function(val){ // 设置
        console.log(val); // 属性值
        console.log("设置属性值");

        //桥接模式 扩展对象属性的方式
        this.value = val;
      }
    }) // 内置的观察者模式

    obj.name = "yangyang"; // 调用set
    console.log(obj.name); // 调用get

    console.log(obj.value); // yangyang

    console.log(obj); // vuejs
  </script>
</body>
</html>


 

demo2.html :



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input v-model="message" />
    <p v-model="message"></p></div>
  </div>

  <script>
    // app 当前的模板
    var model = { // 作为模型数据
      // 设置message属性
      message:"xxxxxxxxxxxxx"
    }

    // 通过当前查找 通过属性查找子元素
    var elments = app.querySelectorAll("[v-model=message]"); // 返回一个数组的集合
    console.log(elments.length);
    // 遍历
    for(var i=0;i<elments.length;i++){
      elments[i].onkeyup = function() {
        // 获取 this.value
        // console.log(this.value);
        // 将值给model.message
        model[this.getAttribute("v-model")] = this.value;
        console.log(model.message);
      }
    }

    // Object.defineProperty 是 Object 的静态方法
    Object.defineProperty(model,"message",{ // 参数：观察对象  属性名 描述对象
      get:function(){ // 获取 阻截访问属性  钩子函数
        // console.log("max is max");
        // return "yangyang"
        return this.value;
      }, // 将钩子函数的返回值作为 访问属相的返回值(集对象的属性值)
      set:function(val){ // 设置
        var models = app.querySelectorAll("[v-model=message]");
        for(var i=0;i<models.length;i++){
          models[i].value = val;
          models[i].innerHTML = val;
        }
        this.value = val;
      }
    }); // 内置的观察者模式

    // 数据双向绑定
    // 模板引擎
    // 响应式原理
    // observer模块
    // 数据追踪
    // 路由
    // 状态管理
    // 虚拟DOM
    // 自定义指令
    // 服务端渲染
  </script>
</body>
</html>


 

demo3.html :



<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input v-model="message" />
    <p v-model="message"></p>
  </div>

  <script src="js/vue-1.1.0.js"></script>
  <script>
    var model = {
      message:"",
      data:model
    }

    var app = new Vue({
      el:"#app", // 绑定模块DOM结构 
      data:{
        message:"",
        text:""
      }// 配置
    })

    //
  </script>
</body>
</html>


 

模仿vue

vue-1.1.0.js :



// 自运行函数
(function(root,factory){ // 创建作用域  命名空间
  // 调用工厂函数
  root.Vue = factory(); // 返回vue 在window下扩展了vue的属性
})(this,function(){
  // 默认配置
  var _DEFALUT_ = { //用户没有传值,默认优先,用户传值,配置覆盖
    el:"body",
    data:{}
  }
  var Vue = function(option){ // 构造函数
    // console.log(this.el); // body 扩展
    this.extend(this,_DEFALUT_,option); // 合并 this实例对象
    this.el = document.querySelectorAll(this.el); // 转换成element对象
    // console.log(this.el);
    // console.log(this.data);

    // 增加观察观察者模式
    this.observer();

    // 通过当前查找 通过属性查找子元素
    var elments = this.el.querySelectorAll("[v-model]"); // 返回一个数组的集合
    // 遍历
    for(var i=0;i<elments.length;i++){
      elments[i].onkeyup = function() {
        // 获取 this.value
        // console.log(this.value);
        // 将值给model.message
        model[this.getAttribute("v-model")] = this.value;
        console.log(model.message);
      }
    }
  }
  // 创造extend,用于扩展
  Vue.prototype = {
    extend:function(){ // 扩展
      // 从第二个对象开始循环
      for(var i=1;i<arguments.length;i++){ // 2 arguments[1]
        for(var name in arguments[i]){ // for in 循环当前对象的可枚举属性,例如name
          // console.log(name);
          // 开始扩展
          this[name] = arguments[i][name]
        }
      }
    },
    observer:function(){
      var el = this.el;
      // let 定义块作用域
      for(let key in this.data){
        Object.defineProperty(this.data,key,{ // 参数：观察对象  属性名 描述对象
          }get:function(){ // 获取 阻截访问属性  钩子函数
            return this.value;
          }, // 将钩子函数的返回值作为 访问属相的返回值(集对象的属性值)
          set:function(val){ // 设置
            console.log(key);
            var models = el.querySelectorAll("[v-model]=" + key + "]");
            for(var i=0;i<models.length;i++){
              models[i].value = val
              models[i].innerHTML = val
            }
            this.value = val;
          }
        }) // 内置的观察者模式
      }
    }
  }

  return Vue;
});  // this 代表window对象 function 工厂函数  this也可以理解为根作用域

// console.log(Vue); // 拿到工厂函数中定义的构造函数

// 通过new方法,创建vue的实例


.