1
从手动操作 DOM 到数据驱动视图 — MVVM 的那些事
source link: http://misaka.im/index.php/archives/67/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
从手动操作 DOM 到数据驱动视图 — MVVM 的那些事
提到 MVVM ，首先要单向绑定和双向绑定。
MVVM 模式
MVVM 模式通过关联 View 和 Model ，开发者无需关心 DOM 的结构，只关心数据结构和存储的值。
传统模式下的 DOM 操作
count: <span id="count">0</span>
<button id="btn">count +1</button>var countNum = 0
var countDom = document.querySelector('#count');
var btn = document.querySelector('#btn');
btn.addEventListener('click', function (e) {
countNum += 1
countDom.innerText = countNum
}, false)JavaScript
传统情况下更新页面内容，要操作变量和对应的 DOM，才算完成。又或者直接读取 DOM 内容，赋值后写入到 DOM 中。
使用 Vue 展示单向绑定
采用单向绑定的模式，将计数值 count 和 DOM 捆绑在一块，只需更新 count 的值 ，即可完成页面上内容的更新。
为演示单向绑定模式，使用 Vue 框架演示这一实现。
<div id="app">
<p>count: <span>{{ count }}</span> </p>
</div>
<button id="btn">count +1</button>
<script src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>var vm = new Vue({
el: '#app',
data: {
count: 0,
}
});
window.vm = vm;
var btn = document.querySelector('#btn');
btn.addEventListener('click', function (e) {
vm.count += 1
}, false)JavaScript
按钮事件处理函数不变，只控制 count 的值实现 DOM 的更新。由于 Vue 暴露了 data 变量，对 count 进行赋值，框架即可知道变量有变化且与原来的值不同，促使框架更新 DOM 页面上的内容。
单向绑定意味着数据的值与视图有绑定关系，仅在值有变化时才更新视图。
数据的值变化能驱动视图更新，反过来，如果视图触发的事件，能直接的反应到数据上的实现，称为双向绑定。
简单的例子就是表单
<div id="app">
type your name: <input type="text" v-model="name">
<p>my name is {{ name }}</p>
</div>
<script src="https://cdn.staticfile.org/vue/2.6.12/vue.min.js"></script>var vm = new Vue({
el: '#app',
data: {
name: '',
}
});
window.vm = vm;JavaScript
v-model 语法它责监听用户的输入事件以更新数据。键盘输入会触发 DOM input 事件，框架捕获时间获取 DOM 值。由于依赖变量 name 已存在，赋值即可，视图内容也会随之更新。
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK