vue+nodejs框架学习+实战（持续更新）
程序员文章站
2022-03-05 07:49:37
...
vue框架
MV*
Model和View绑定，数据驱动，状态管理，组件化
数据驱动：传统的jQuery需要获取DOM节点，通过click事件或者addclass改变DOM节点的内容,DOM和JS是耦合的。vue不关注怎么获取DOM节点，改变DOM节点，只关注怎么将数据放在data里面。
组件化：公共部分抽离出来，可以放到任何一个界面使用。
通过MVVM的数据绑定实现自动同步。
Object.defineProperty()函数模拟双向数据绑定
<body>
<input type="text" id="userName">
<br>
<span id="uName"></span>
</body>
<script>
var obj = {};
Object.defineProperty(obj,"userName",{
value:"Jack"
});
document.getElementById("userName").addEventListener("keyup",function (event) {
// event是一个鼠标事件对象
document.getElementById("uName").innerText = event.target.value;
})
</script>
//-------------------自动触发---------------------------------
Object.defineProperty(obj,"userName",{
get: function () {
console.log("get init ");
},
set: function (val) {
console.log("set init ");
document.getElementById("uName").innerText = val;
document.getElementById("userName").value = val;
}
});
document.getElementById("userName").addEventListener("keyup",function (event) {
// event是一个鼠标事件对象
obj = event.target.value;
})