<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Javascript setter, getter</title>
</head>
<body>
<input type="text" id="inputUsername" v-model="data.username">
<input type="text" id="inputPassword" onkeyup="setValueByKey('password', this.value)">
<div id="username">admin</div>
<div id="password"></div>
<script>
function scanElementsByAttr(tag, attr) {
var aElements = document.getElementsByTagName(tag);
for (var i = 0; i < aElements.length; i++) {
var value = aElements[i].getAttribute(attr);
if (!value) {
continue;
}
aElements[i].onkeyup = function() {
var value = this.getAttribute(attr);
var arr = value.split('.');
if (arr.length == 1) {
window[arr[0]] = value;
return;
}
var data = window;
for (var i=0; i<arr.length-1; i++) {
data = data[arr[i]];
console.log(arr[i])
}
data[arr[i]] = this.value;
}
}
}
scanElementsByAttr('input', 'v-model');
var data = {
username: '',
password: '',
get username() {
return 'username:' + this.username;
},
get password() {
return 'password:' + this.password;
},
set username(value) {
document.getElementById('username').innerHTML = value;
},
set password(value) {
document.getElementById('password').innerHTML = value;
}
};
data.username = 'admin';
data.password = '123456';
function setValueByKey(k, v) {
console.log(k, v)
data[k] = v;
}
</script>
</body>
</html>
分享到：
相关推荐
在实际开发中，理解Vue.js的双向绑定原理不仅有助于更加高效地利用框架提供的功能，还可以帮助开发者在遇到问题时能够迅速定位和解决。通过上述介绍的原理和代码实现，相信开发者可以对Vue.js的双向绑定有了更深层次...
通过带着读者手写简化版的vue双向绑定，了解vue双向绑定的核心原理; 从零开始实现vue的双向绑定，让大家可以更好的理解双向绑定的逻辑走向； 本项目依次实现了下面的功能 1、自定义的vue类 2、模板解析 Compile 类 3...
下面我们将深入探讨Vue双向绑定的原理及其实现。 双向绑定在Vue中主要通过`v-model`指令实现。当你在模板中使用`v-model`指令时，它会自动创建一个数据绑定，将表单控件的值与数据模型关联起来。当表单控件的值改变...
先声明，该代码是网上一位大佬提供的，但是学习它的代码过程中...该压缩文件内容是vue数据双向绑定的实现与原理解析，提供核心完整代码，并有我的代码注释，浅显易懂，但是需要es6的学习和有一定的javascript基础才行。
vue双向绑定原理
Vue 双向数据绑定原理解析 Vue 双向数据绑定是 Vue 框架中的一种核心机制，实现数据和视图之间的双向绑定。下面是对 Vue 双向数据绑定原理的详细解析。 基本原理 Vue 采用数据劫持结合发布者-订阅者模式的方式，...
下面我们将深入探讨Vue双向数据绑定的原理。 一、MVVM模式 Vue的双向数据绑定基于MVVM（Model-View-ViewModel）设计模式。MVVM模式由ViewModel作为桥梁，连接数据Model和视图View。在Vue中，ViewModel负责监听Model...
通过 Proxy(defineProperty)来实现对数据的监听，通过给数据和方法形成一种绑定
### Vue.js 数据双向绑定原理与组件化开发详解 #### 一、数据双向绑定概念与原理 数据双向绑定是Vue.js框架的核心特性之一，它使得数据模型（Model）和视图（View）之间的同步变得非常简单且高效。在传统的前端...
Vue 2.0 的双向绑定实现原理是其核心特性之一，这一机制使得数据模型与视图之间保持同步，极大地简化了前端开发。本文将深入探讨 Vue 如何利用数据劫持和发布-订阅者模式实现这一功能。 首先，我们需要理解前端MVVM...
在vue 中想要知道 vue 双向数据绑定原理
web前端面试题汇总-精美桌面-vue双向绑定原理，把面试题设置成桌面，每天打开电脑就学习一遍，加强记忆。会不断更新，不断上传！
下面我们将详细讨论Vue如何实现双向绑定和响应式数据。 首先，我们来看对象的响应式实现。Vue在初始化时，通过`Object.defineProperty()`这个ES5提供的API来定义对象的setter和getter。setter用于在数据改变时执行...
Vue双向绑定原理主要依赖于数据劫持和发布者-订阅者模式。数据劫持是通过JavaScript内置的Object.defineProperty()方法来实现的。这个方法可以定义一个对象的新属性，或修改一个对象的现有属性，并返回这个对象。...
本文实例讲述了Vue 的双向绑定原理与用法。分享给大家供大家参考，具体如下： Vue 中需要输入什么内容的时候，自然会想到使用 <input v-model=xxx /> 的方式来实现双向绑定。下面是一个最简单的示例 <h2>...
本文将详细介绍Vue中双向绑定的实现原理和方法，并通过实例分析来加深理解。 首先，双向绑定的核心在于将数据的变化自动反映到视图上，并且将视图中的变化自动更新到数据中。Vue实现双向绑定主要依赖于三个关键技术...
【Vue.js 双向绑定实现原理】 Vue.js 是一款基于 MVVM 架构的前端框架，它的核心特性之一就是响应式的数据绑定系统。双向绑定使得数据模型(model)和视图(view)之间能实时同步，无需手动操作 DOM。下面将详细解释 ...
`bindModel` 处理 `w-model` 指令，实现数据和表单元素的双向绑定。 ```javascript init: function() { this.bindText(); this.bindModel(); } ``` 3. `bindText` 方法遍历所有带有 `w-text` 指令的元素，将其...