先了解如何實(shí)現(xiàn)綁定，見http://www.reibang.com/p/e9b81fec00b8
然后要實(shí)現(xiàn)
首先將該任務(wù)分成幾個(gè)子任務(wù)：
1、輸入框以及文本節(jié)點(diǎn)與 data 中的數(shù)據(jù)綁定
2晨雳、輸入框內(nèi)容變化時(shí)烙懦，data 中的數(shù)據(jù)同步變化秩命。即 view => model 的變化波俄。
3、data 中的數(shù)據(jù)變化時(shí)缆娃，文本節(jié)點(diǎn)的內(nèi)容同步變化捷绒。即 model => view 的變化。
要實(shí)現(xiàn)任務(wù)一贯要，需要對 DOM 進(jìn)行編譯暖侨，這里有一個(gè)知識點(diǎn)：DocumentFragment。
DocumentFragment
DocumentFragment（文檔片段）可以看作節(jié)點(diǎn)容器郭毕，它可以包含多個(gè)子節(jié)點(diǎn)它碎，當(dāng)我們將它插入到 DOM 中時(shí)，只有它的子節(jié)點(diǎn)會(huì)插入目標(biāo)節(jié)點(diǎn)显押，所以把它看作一組節(jié)點(diǎn)的容器。使用 DocumentFragment 處理節(jié)點(diǎn)傻挂，速度和性能遠(yuǎn)遠(yuǎn)優(yōu)于直接操作 DOM乘碑。Vue 進(jìn)行編譯時(shí)，就是將掛載目標(biāo)的所有子節(jié)點(diǎn)劫持（真的是劫持金拒，通過 append 方法兽肤，DOM 中的節(jié)點(diǎn)會(huì)被自動(dòng)刪除）到 DocumentFragment 中套腹，經(jīng)過一番處理后，再將 DocumentFragment 整體返回插入掛載目標(biāo)资铡。
var dom = nodeToFragment(document.getElementById('app'));
console.log(dom);
function nodeToFragment(node){
var flag = document.createDocumentFragment();
var child;
while (child = node.firstChild){ // 給child賦值,然后判斷child是否為真
flag.append(child); // 劫持node的所有子節(jié)點(diǎn)
}
return flag;
}
document.getElementById('app').appendChild(dom);
