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的实例
.