1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 <!--moustache 小胡子语法 表达式 可以赋值msg=2、取值、三元表达式 尽量少写逻辑（computed）--> 10 {{msg}} 11 12 </div> 13 <!--引入vue.js--> 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>Title</title> 6 </head> 7 <body> 8 <div id="app"> 9 {{msg}} 10 <!--表单元素 input CheckBox radio select textarea 可以更改，通过vue指令--> 11 <!--vue 指令 只是dom上的行间属性，vue给这类属性赋予了一定的意义实现特殊的功能，所有指令以 v- 开头 12 value属性默认情况下会被vue忽略掉 selected checked 都没有意义--> 13 14 <!--v-model 会将msg的值赋予输入框，输入框的值改变了会影响数据msg 实现双向绑定--> 15 <input type="text" v-model="msg"/> 16 </div> 17 <!--引入vue.js--> 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>Title</title> 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>