vue的双向绑定Object.definedProperty(obj,key,{set,get})
vue的代码方式
引入vue
<script src="../src/vue.js"></script>
结构布局
<div id="app"><h1>{{msg}}</h1><h1>{{reverseStr}}</h1><button v-on:click="changeMsg">变化</button>
</div>
vue的结构
let app=new Vue({el:"#app",//虚拟节点绑定的元素 ""是选择器data:{msg:"hello world",//数据 双向的数据},//计算属性 他是属性 属性就是一种值 和method是有区别的//计算属性会进行缓存 不会多次执行computed: {reverseStr(){return this.msg.split("").reverse().join("")}},// 这里面 通常都是事件函数 根据事件例如click进行响应的操作methods: {changeMsg(){this.msg="我是双向数据修改的"}},//监听数据 就是把这里的操作 放到 set当中//类似于发布定于的模式watch: {msg(newVal,oldVal){console.log("数据监听 发现变化了");}},})
vue双向数据绑定的原理Object.defineProperty
// vue双向数据绑定的原理let VueObj={data:{msg:"hello world"}
}
Object.defineProperty(VueObj,'msg',{get(){console.log("获取数据msg"+ this.data.msg);return this.data.msg},set(val){console.log("修改数据msg"+val);this.data.msg=val}
})//当我们获取Vue.msg 就会访问data.msg
/*
Vue={msg:"",//双向绑定添加的 带有set和getdata:{msg:""}
}
*/
console.log(VueObj.msg);//获取 执行get 返回的是this.data.msg//修改
VueObj.msg="我是大帅逼"修改 执行set 把this.data.msg修改了
//再次获取
console.log(VueObj.msg);//总体来说就是把 data的属性 都映射到Vue的上面 并设置get set
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- vue的引入 --><!-- <script src="@2/dist/vue.js"></script> --><script src="../src/vue.js"></script>
</head>
<body><div id="app"><h1>{{msg}}</h1><h1>{{reverseStr}}</h1><button v-on:click="changeMsg">变化</button></div><script>let app=new Vue({el:"#app",//虚拟节点绑定的元素 ""是选择器data:{msg:"hello world",//数据 双向的数据},//计算属性 他是属性 属性就是一种值 和method是有区别的//计算属性会进行缓存 不会多次执行computed: {reverseStr(){return this.msg.split("").reverse().join("")}},// 这里面 通常都是事件函数 根据事件例如click进行响应的操作methods: {changeMsg(){this.msg="我是双向数据修改的"}},//监听数据 就是把这里的操作 放到 set当中//类似于发布定于的模式watch: {msg(newVal,oldVal){console.log("数据监听 发现变化了");}},})// vue双向数据绑定的原理let VueObj={data:{msg:"hello world"}}Object.defineProperty(VueObj,'msg',{get(){console.log("获取数据msg"+ this.data.msg);return this.data.msg},set(val){console.log("修改数据msg"+val);this.data.msg=val}})//当我们获取Vue.msg 就会访问data.msg/*Vue={msg:"",//双向绑定添加的 带有set和getdata:{msg:""}}*/console.log(VueObj.msg);//获取 执行get 返回的是this.data.msg//修改VueObj.msg="我是大帅逼"修改 执行set 把this.data.msg修改了//再次获取console.log(VueObj.msg);//总体来说就是把 data的属性 都映射到Vue的上面 并设置get set</script>
</body>
</html>
vue的双向绑定Object.definedProperty(obj,key,{set,get})
vue的代码方式
引入vue
<script src="../src/vue.js"></script>
结构布局
<div id="app"><h1>{{msg}}</h1><h1>{{reverseStr}}</h1><button v-on:click="changeMsg">变化</button>
</div>
vue的结构
let app=new Vue({el:"#app",//虚拟节点绑定的元素 ""是选择器data:{msg:"hello world",//数据 双向的数据},//计算属性 他是属性 属性就是一种值 和method是有区别的//计算属性会进行缓存 不会多次执行computed: {reverseStr(){return this.msg.split("").reverse().join("")}},// 这里面 通常都是事件函数 根据事件例如click进行响应的操作methods: {changeMsg(){this.msg="我是双向数据修改的"}},//监听数据 就是把这里的操作 放到 set当中//类似于发布定于的模式watch: {msg(newVal,oldVal){console.log("数据监听 发现变化了");}},})
vue双向数据绑定的原理Object.defineProperty
// vue双向数据绑定的原理let VueObj={data:{msg:"hello world"}
}
Object.defineProperty(VueObj,'msg',{get(){console.log("获取数据msg"+ this.data.msg);return this.data.msg},set(val){console.log("修改数据msg"+val);this.data.msg=val}
})//当我们获取Vue.msg 就会访问data.msg
/*
Vue={msg:"",//双向绑定添加的 带有set和getdata:{msg:""}
}
*/
console.log(VueObj.msg);//获取 执行get 返回的是this.data.msg//修改
VueObj.msg="我是大帅逼"修改 执行set 把this.data.msg修改了
//再次获取
console.log(VueObj.msg);//总体来说就是把 data的属性 都映射到Vue的上面 并设置get set
完整代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- vue的引入 --><!-- <script src="@2/dist/vue.js"></script> --><script src="../src/vue.js"></script>
</head>
<body><div id="app"><h1>{{msg}}</h1><h1>{{reverseStr}}</h1><button v-on:click="changeMsg">变化</button></div><script>let app=new Vue({el:"#app",//虚拟节点绑定的元素 ""是选择器data:{msg:"hello world",//数据 双向的数据},//计算属性 他是属性 属性就是一种值 和method是有区别的//计算属性会进行缓存 不会多次执行computed: {reverseStr(){return this.msg.split("").reverse().join("")}},// 这里面 通常都是事件函数 根据事件例如click进行响应的操作methods: {changeMsg(){this.msg="我是双向数据修改的"}},//监听数据 就是把这里的操作 放到 set当中//类似于发布定于的模式watch: {msg(newVal,oldVal){console.log("数据监听 发现变化了");}},})// vue双向数据绑定的原理let VueObj={data:{msg:"hello world"}}Object.defineProperty(VueObj,'msg',{get(){console.log("获取数据msg"+ this.data.msg);return this.data.msg},set(val){console.log("修改数据msg"+val);this.data.msg=val}})//当我们获取Vue.msg 就会访问data.msg/*Vue={msg:"",//双向绑定添加的 带有set和getdata:{msg:""}}*/console.log(VueObj.msg);//获取 执行get 返回的是this.data.msg//修改VueObj.msg="我是大帅逼"修改 执行set 把this.data.msg修改了//再次获取console.log(VueObj.msg);//总体来说就是把 data的属性 都映射到Vue的上面 并设置get set</script>
</body>
</html>