VUE-01 HelloWorld
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 <div id="app"> 9 10 {{msg}} 11 12 div> 13 14 <script src="./node_modules/vue/dist/vue.js">script> 15 <script> 16 // 引入vue后会白给你一个vue构造函数 17 let vm = new Vue({// vm == viewModel 18 el:'#app', // 告诉vue能管理哪个部分（不能挂载html和body），querySelector Model 19 data:{ // data中的数据会被vm所代理 20 msg:'hello,data数据' // 可以通过vm.msg取到对应的内容 21 } 22 }); // Object.defineProperty 定义属性 23 24 25 script> 26 body> 27 html>
目前只能数据影响页面
实现双向绑定
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 <div id="app"> 9 {{msg}} 10 11 13 14 15 <input type="text" v-model="msg"/> 16 div> 17 18 <script src="./node_modules/vue/dist/vue.js">script> 19 <script> 20 let vm = new Vue({ 21 el:'#app', 22 data:{ 23 msg:'hello,world!' 24 } 25 26 }); 27 28 script> 29 body> 30 html>
原理 es5的Object.defineProperties 方法
1 DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Titletitle> 6 head> 7 <body> 8 <input type="text" id="input"/> 9 <script> 10 let obj = {}; 11 let temp = {}; // 代理obj 12 Object.defineProperties(obj,'name',{ 13 // configurable:true,// 可配置的，可以删除，delet obj.name 14 // writable:true,// 可写，可以修改 obj.name = 100 15 // enumerable:true,// 可枚举，循环 for(let key in obj){console.log(key);} 16 // value:1, 17 get(){ // 取obj的name属性会触发 18 return temp['name']; 19 }, 20 set(val){ // 给obj赋值会触发 21 temp['name'] = val; // 改变temp的结果 obj.name = val;会死循环 22 input.value = obj.name;// 再调get将值赋予input 23 } 24 25 }); 26 27 input.value = obj.name;// 1、页面加载时，会调用get方法，把数据赋予页面 28 // 加事件 29 input.addEventListener('input',function () { // 2、等待输入框的变化 30 obj.name = this.value;// 3、当值变化时调用set方法 页面变化更新数据 31 }) 32 script> 33 body> 34 html>