v-model双向数据绑定

2024-06-12 01:56:33

双向数据绑定

主要用于给表单元素创建双向数据绑定。
即：
1.视图发生改变→数据发生对应的改变。即用户在视图（网页）上通过输入等操作，改变原数据。
2.数据改变→视图发生对应的改变。即在js中的数据本身发生改变（不由视图层面的操作导致的），视图要显示出最新的数据。
如：

Vue的绑定方式

Vue一般通过v-model指令进行双向数据绑定:
1.视图发生改变→对应的数据发生改变：用户在输入框里输入的内容会被message变量接下来，改变了app.message的值。
2.被改变的app.message同时也将动态更新在p标签的内容里。

<input type="text" id="app" v-model="message">
<p>{{message}}</p>

const app = new Vue({el:'#app',data:{message:'hello',}
})

Dom实现双向数据绑定（即v-model指令源码）

1.视图发生改变→对应数据发生改变：为标签注册事件监听属性，监听视图上的变化，然后重新为data.message赋值。

const app = {message:'hello world !'
}
var inp = document.querySelector('input');
var text = document.querySelector('p');
text.innerHTML = app.message;
inp.value = app.message;
inp.oninput = function() {app.message = inp.value;text.innerHTML = inp.value;
}

2.数据发生改变→视图发生改变（重难点）
需要用到方法：Object.defineProperty(对象名,‘属性名’，对象)：

const app = {message:'hello world !'
};
const temp = app.message;  //  保存原数据到temp变量里
Object.defineProperty(app,'message',{get:function() {   //  在获取app.message属性值时调用return temp;},set:function(value) {   //  在设置app.message属性值时调用temp = value;   //  将被劫持下来的最新数据存在temp，以供get函数返回使用，这样就改变了原数据text.innerHTML = value;  //  将被劫持下来的最新数据显示在视图上}})

**注意1：**调用对象的defienProperty()方法时，get函数会在访问app.message时被调用，并劫持所获得的值存入temp。此时再访问app.message得到的值其实是get函数的返回值temp，虽然值与原先的2相等（因为事先存入了），但其实是不同的两个变量：app.message和temp。

v-model双向数据绑定相关推荐

Vue中从v-model，model，.sync到双向数据传递，再到双向数据绑定
前面的话虽然v-model和.sync之间的区别,是非常明显的,但是通过这个去研究下去,就有点意思了.首先说明v-model是.sync的一种特殊情况,也就是当prop是value,vm.$emit ...
js 取得input绑定的datalist中的值_javascript基础修炼(9)——MVVM中双向数据绑定的基本原理...
[小宅按] 开发者的javascript造诣取决于对[动态]和[异步]这两个词的理解水平. 一. 概述 1.1 MVVM模型 MVVM模型是前端单页面应用中非常重要的模型之一,也是Single Pag ...
Vue双向数据绑定 ~ 非常详细哦
Vue的双向数据绑定可以帮助我们更好的实现底层数据与页面数据的交互. 下面是对Vue的双向数据绑定的具体整理,希望可以帮助到有需要的小伙伴~ 双向数据绑定什么是双向数据绑定实现交互用户在页面中改 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...
Vue v-model双向数据绑定和一个简单的整数计算器
一.v-model双向数据绑定方法 v-bind - 单向数据绑定(从M到V) v-model - 双向数据绑定例子 <input type="text" v-bind: ...
vue的v-model的双向数据绑定原理
vue的双向数据绑定是一个很有意思的特性:知道其原理方能运用自如 <div id="demo"><h1>双向绑定机制</h1><!--表单 ...
手写简单的双向数据绑定
github.com/logictuLuoq- 简单介绍一下MVVM MVVM是Model-View-ViewModel的简写 MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI ...
4.AngularJS四大特征之二：双向数据绑定
AngularJS四大特征之二: 双向数据绑定 (1)方向一:把Model数据绑定到View上--此后不论何时只要Model发生了改变,则View中的呈现会立即随之改变!实现方法: {{ }}.ngB ...
vue 双向数据绑定的实现学习（一）
前言:本系列学习笔记从以下几个点展开什么是双向数据绑定双向数据绑定的好处怎么实现双向数据绑定实现双向数据数据绑定需要哪些知识点数据劫持发布订阅模式先看看我们要实现的目标是什么,如下动图: ...
利刃 MVVMLight 3：双向数据绑定
利刃 MVVMLight 3:双向数据绑定原文:利刃 MVVMLight 3:双向数据绑定上篇我们已经了解了MVVM的框架结构和运行原理.这里我们来看一下伟大的双向数据绑定. 说到双向绑定,大家比 ...

最新文章

热门文章