Vue之数据的双向绑定

在vue中实现数据双向绑定的核心在于v-model
示例：

 <input type="text" name=" " v-model="userName">

当输入框中的内容发生变化时，如用户在视图view输入hello world 此时我们在model层即用js处理逻辑代码的地方就会获取用户输入的值。
反之在model层给与userName一个值时，view层的值也会进行同步，简而言之双向指的是view层和model层，数据绑定即model上的数据，在view和model是同步绑定关系的。
用原生js模拟数据双向绑定
用js监听数据的变化并将变化的数据同步到页面，为了实现这个功能我们需要用到js的一个方法
Object.defineProperty
定义：Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
语法：Object.defineProperty(obj,prop,descriptor)

参数	说明
obj	目标对象
prop	需要定义的属性或方法的名字
descriptor	目标属性所拥有的特性

descriptor有以下取值
value
属性的值。可以是任何有效的 JavaScript 值（数值,对象,函数等）。默认为 undefined。
 var a= {};Object.defineProperty(a,"b",{value:123})console.log(a.b);//打印123
writable
writable 值为 true 时,属性的值(value)才能被赋值运算符改变。如果为false,属性的值就不能被重写,只能为只读了。默认为 false。
 var a = {};Object.defineProperty(o, "b", {value : 123,writable : false});console.log(a.b); // 打印 37a.b = 25; // 没有错误抛出（在严格模式下会抛出，即使之前已经有相同的值）console.log(o.a); // 打印 37， 赋值不起作用。
configurable
configurable 值为 true 时，该属性的描述符才能够被改变，同时该属性也能从对应的对象上被删除。
一旦为false，就不能再设置它的（value，writable，configurable）默认为 false。
 var a= {}Object.defineProperty(a,"b",{configurable:false})Object.defineProperty(a,"b",{configurable:true})//error: Uncaught TypeError: Cannot redefine property: b
enumerable
enumerable 键值为 true 时，该属性才会出现在对象的枚举属性中。默认为 false。
 var a= {};Object.defineProperty(a,"b",{value:3445,enumerable:true//注意是false时，打印输出[]})console.log(Object.keys(a));// 打印["b"]
set和get
在 descriptor 中不能同时设置访问器（get 和 set）和 wriable 或 value，否则会出错，也就是说想用
get 和 set，就不能用 wriable 或 value 中的任何一个。
 var a= {}Object.defineProperty(a,"b",{set:function(newValue){console.log("要赋值给我,我的新值是"＋newValue)},get:function(){console.log("取我的值")return 2 //返回2}})a.b =1 //打印出 你要赋值给我,我的新值是1console.log(a.b) //打印 你取我的值   2

实例效果

实现代码

通过创建一个obj对象，然后设置一个访问器属性hello，然后监听文本框的一个keyup事件，调用回调函数，重新设置obj.hello属性，其实际上是去调用内部属性set方法，在set方法更改文本框的value和p标签的innerHTML,从而达到数据的绑定。

 <body><input type="text" placeholder="你的名字" id="input"/><h1>你好，<span id="a"></span></h1><script>var obj = {};Object.defineProperty(obj,'hello',{set:function(val){document.getElementById('input').value = val;document.getElementById('a').innerHTML = val;}});document.addEventListener('keyup',function(e){obj.hello = e.target.value;})</script></body>

Vue之数据的双向绑定相关推荐

【Vue】—数据的双向绑定v-model
[Vue]-数据的双向绑定v-model
vue单向数据流与双向绑定两者区别
1.Vue 在不同组件间强制使用单向数据流,父组件可以向子组件传递数据,但是子组件不能直接修改父组件的状态. 2.数据的双向绑定主要由MVVM框架实现,主要由三部分组成View.ViewModel和 ...
vue3数据的双向绑定
vue3关于数据的双向绑定一.script setup 现在,没必要把数据写到data里面,或者是写一个setup函数,再进行return出去. import进来的组件,可以直接在页面中使用,不再需 ...
React入门---事件与数据的双向绑定-9
上一节中,我们是从父组件给子组件传送数据,要实现事件与数据的双向绑定,我们来看如何从子组件向父组件传送数据; 接触之前,我们看一些里面函数绑定的知识: 例:通过点击事件改变state的age属性值: ...
AngularJS数据的双向绑定
数据的双向绑定 Angular实现了双向绑定机制.所谓的双向绑定,无非是从界面的操作能实时反映到数据,数据的变更能实时展现到界面. 一个最简单的示例就是这样: <div ng-controlle ...
【Vue2 组件间数据的双向绑定】
组件间数据的双向绑定一.通过自定义事件二.通过v-model 三.通过.sync修饰符四.provide和inject 代码中的p-8,mt-8等,都是自己写的工具类,复制代码的同学,可以自行删 ...
Vue中实现父子组件的数据的双向绑定（vue.sync的用法）
项目场景: 前两天日常开发时,遇到需要父子组件双向绑定的问题,出现了一些BUG,但是考虑到组件的可维护性,vue中是不允许子组件改变父组件传的props值的问题描述: 问题场景就是子组件传递数据给父 ...
【进阶玩法】Angular用emit()实现类似Vue.js的v-model双向绑定[(ngModel)]功能
app.component.html <app-sizer [(ngModel)]="fontSizePx"></app-sizer> <p [sty ...
vue生命周期及双向绑定
这篇文章不是原创,看了其他人的分析贴,记录下自己学到的.本篇主要记录一下vue内部流程,以及双向绑定原理.Vue的可爱之处在于他的双向绑定及Virtual DOM的思想. vue内部流程如图所示,实 ...

Vue之数据的双向绑定

Vue之数据的双向绑定相关推荐

最新文章

热门文章