VUE-01 HelloWorld

 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>