1、vue数据双向绑定(v-model)
主要实现依赖于数据的劫持，及观察订阅者模式的使用，其中Object.defineProperty()为核心
作用：定义或修改一个对象上的相关属性及其相关的操作
语法: Object.defineProperty(obj, prop, descriptor)
其中：
obj: 需要被操作的目标对象
prop: 目标对象需要定义或修改的属性的名称
descriptor: 将被定义或修改的属性的描述符，分为数据描述符or存取描述符；
用bject.defineProperty(),简单实现输入框与数据的绑定：
<body>
<div>
<input type="text" id="input">
<span id="data"></span>
</div>
<script>
var obj = {};
console.log(obj);
Object.defineProperty(obj, 'value', {
get: function() {
console.log('调用了get方法');
},
set: function(newValue) {
console.log('调用了set方法，值为:' + newValue);
value = newValue;
document.getElementById('input').value = value;
document.getElementById('data').innerText = value;
}
})
document.getElementById('input').onkeyup = function(e) {
obj.value = e.target.value; //e.target相当于触发事件的dom节点
}
</script>
</body>关于vue中双向绑定可以分为：1、data数据与输入框及显示的文本节点绑定 2、输入框修改影响data和文本节点的数据 3、data中数据的改变影响输入框及文本节点。
2、vue中数据绑定（v-bind）
vue常用指令之一，单向绑定数据，常用与标签属性的绑定：<input type="text" id="input" :value="data">
其中value为input标签的一个属性，v-bind会使其内容变为js表达式，相当于把‘data‘变成一个变量，修改data的值会同步到标签属性中。
原文地址：https://www.cnblogs.com/Zxq-zn/p/12252366.html
时间： 2024-11-13 08:55:27