>[warning]指令v-model實現 **** 1. 思路: 解析DOM屬性, 判斷是否有v-model屬性, 然后執行對應代碼 (比較復雜, 仔細看) 代碼如下: ~~~ <script> Compile.prototype = { nodeToFragment(el) { let fragment = document.createDocumentFragment(); let child = el.firstChild; while (child) { fragment.appendChild(child); child = el.firstChild; } return fragment; }, compileElement(el) { let childNodes = el.childNodes; let self = this; [].slice.call(childNodes).forEach(function (node) { let reg = /\{\{(.*)\}\}/; let text = node.textContent; // 1. 判斷當前DOM是否是標簽 if (self.isElementNode(node)) { self.compile(node); } else if (self.isTextNode(node) && reg.test(text)) { self.compileText(node, reg.exec(text)[1]); } if (node.childNodes && node.childNodes.length) { self.compileElement(node); } }) }, compileText(node, exp) { let self = this; let initText = this.vm[exp]; self.updateText(node, initText); new Watcher(this.vm, function (val) { self.updateText(node, val); }, exp); }, updateText(node, value) { node.textContent = typeof value === 'undefined' ? '' : value; }, isTextNode: function (node) { return node.nodeType == 3; }, // 2. 判斷是否是標簽節點 isElementNode: function (node) { return node.nodeType == 1; }, // 3. 解析虛擬DOM節點屬性值 compile(node) { // 拿到這個標簽所有屬性 let nodeAttrs = node.attributes; let self = this; // 遍歷標簽屬性集合 Array.prototype.forEach.call(nodeAttrs, function (attr) { // 拿出每個屬性的名字 let attrName = attr.name; // 4. 判斷屬性是否是v-開頭的 if (self.isDirective(attrName)) { // 拿到屬性對應的值 let exp = attr.value; // 6. 截取掉v-開頭2個字符 let dir = attrName.substring(2); // 7. 看看是否剩下model字符串 if (self.isModelDirective(dir)) { // 9. 注冊watcher監聽器 self.compileModel(node, self.vm, exp); } // 15. 刪除v-model屬性 node.removeAttribute(attrName); } }); }, // 5. 判斷是否以v-開頭字符串 isDirective: function (attr) { return attr.indexOf('v-') == 0; }, // 8. 判斷是否是model開頭的字符串 (v-model) isModelDirective: function (dir) { return dir.indexOf('model') === 0; }, // 10. v-model指令解析 // 標簽, Vue實例, key值 compileModel: function (node, vm, exp) { let self = this; let val = this.vm[exp]; // 監聽的value是多少 // 11. 初始化表單的值 this.modelUpdater(node, val); // 13. 注冊監聽器 new Watcher(this.vm, function (value) { // 監聽器觸發, 則更新表單的值 self.modelUpdater(node, value); }, exp); // 14. 給表單標簽綁定input事件(這也是為什么不是所有標簽都可以使用v-model的原因) node.addEventListener('input', function(e) { // 獲取表單最新的值 let newValue = e.target.value; if (val === newValue) { return; } // 同步model里的值 self.vm[exp] = newValue; val = newValue; }); }, // 12. model更新表單的值 modelUpdater: function(node, value) { node.value = typeof value == 'undefined' ? '' : value; }, }; function Vue(options, exp) { this.data = options.data(); let self = this; Object.keys(this.data).forEach(function (key) { self.proxyKeys(key); }); observe(this.data); // 8. 操作DOM部分交給Compile處理 new Compile(options.el, this); // 9. 給Vue掛載mounted方法 options.mounted.call(this); } Vue.prototype = { proxyKeys: function (key) { let self = this; Object.defineProperty(this, key, { get: function () { return self.data[key]; }, set: function (newVal) { self.data[key] = newVal } }) } } </script> <div id="app"> <h1>{{userName}}</h1> <input type="text" v-model="userName"> </div> <script> new Vue({ el: "#app", data() { return { "userName": "hello VueJS" } }, mounted() { setTimeout(() => { this.userName = "漂亮"; }, 2000); } }); </script> ~~~ [當前頁源代碼](https://github.com/lidongxuwork126com/ldx_vue/tree/master/%E4%BB%BFVue%E6%BA%90%E7%A0%81) 接下來我們再講講事件綁定, 怎么回事吧, 看下個文章