現(xiàn)成MVVM
菜單教程
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script></head><body> <div id="app"> <input type="text" v-model="message"> <p>{{ message }}</p> </div> <script> let vm = new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script></body></html>視圖影響數(shù)據(jù)
數(shù)據(jù)影響視圖
項(xiàng)目構(gòu)架
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body></body></html><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title> <script src="./js/mvvm.js"></script> <script src="./js/compile.js"></script></head><body> <div id="app"> <input type="text" v-model="message"> <div>{{message}}</div> <ul> <li></li> </ul> {{message}} </div> <script> let vm = new MVVM({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script></body></html>mvvm.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title></head><body></body></html><!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Vue 測(cè)試實(shí)例 - 菜鳥教程(runoob.com)</title> <script src="./js/mvvm.js"></script> <script src="./js/compile.js"></script></head><body> <div id="app"> <input type="text" v-model="message"> <div>{{message}}</div> <ul> <li></li> </ul> {{message}} </div> <script> let vm = new MVVM({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script></body></html>mvvm.js
class MVVM { constructor(options) { this.$el = options.el; this.$data = options.data; if (this.$el) { new Compile(this.$el); } }}compile把dom節(jié)點(diǎn)，放在內(nèi)存中操作(到35分鐘)
class Compile { constructor(el, vm) { this.el = this.isElementNode(el) ? el : document.querySelector(el); this.vm = vm; if (this.el) { let fragment = this.node2frament(this.el); this.compile(fragment); } } //輔助方法 isElementNode(node) { return node.nodeType === 1; } //核心方法 compile(fragment) { let childNodes = fragment.childNodes; console.log(childNodes) } node2frament(el) { let fragment = document.createDocumentFragment(); let firstChild; while (firstChild = el.firstChild) { fragment.appendChild(firstChild); } return fragment }}分類元素節(jié)點(diǎn)和文本節(jié)點(diǎn)(52分鐘)
class Compile { constructor(el, vm) { this.el = this.isElementNode(el) ? el : document.querySelector(el); this.vm = vm; if (this.el) { let fragment = this.node2frament(this.el); this.compile(fragment); } } //輔助方法 isElementNode(node) { return node.nodeType === 1; } isDirective(name) { return name.includes('v-') } //核心方法 compileElement(node) { let attrs = node.attributes; Array.from(attrs).forEach(arrt => { let attrName = attr.name; if (this.isDirective(attrName)) { let expr = attr.value; } }) } compileText(node) { let text = node.textContent; let reg = //{/{([^}]+)/}/}/g; if (reg.test(text)) { } } compile(fragment) { let childNodes = fragment.childNodes; Array.from(childNodes).forEach(node => { if (this.isElementNode(node)) { this.compile(node) } else { console.log('text', node) } }) } node2frament(el) { let fragment = document.createDocumentFragment(); let firstChild; while (firstChild = el.firstChild) { fragment.appendChild(firstChild); } return fragment }}元素節(jié)點(diǎn)
文本節(jié)點(diǎn)
把data中的數(shù)據(jù)，顯示在視圖上(到1:16分)
class Compile { constructor(el, vm) { this.el = this.isElementNode(el) ? el : document.querySelector(el); this.vm = vm; if (this.el) { let fragment = this.node2frament(this.el); this.compile(fragment); this.el.appendChild(fragment) } } //輔助方法 isElementNode(node) { return node.nodeType === 1; } isDirective(name) { return name.includes('v-') } //核心方法 compileElement(node) { let attrs = node.attributes; Array.from(attrs).forEach(attr => { let attrName = attr.name; if (this.isDirective(attrName)) { let expr = attr.value; let [, type] = attrName.split('-'); CompileUtil[type](node, this.vm, expr) } }) } compileText(node) { console.log(node) let expr = node.textContent; let reg = //{/{([^}]+)/}/}/g; if (reg.test(expr)) { CompileUtil['text'](node, this.vm, expr) } } compile(fragment) { let childNodes = fragment.childNodes; Array.from(childNodes).forEach(node => { if (this.isElementNode(node)) { this.compileElement(node) this.compile(node) } else { this.compileText(node) } }) } node2frament(el) { let fragment = document.createDocumentFragment(); let firstChild; while (firstChild = el.firstChild) { fragment.appendChild(firstChild); } return fragment }}CompileUtil = { getVal(vm, expr) { // 獲取實(shí)例上對(duì)應(yīng)的數(shù)據(jù) expr = expr.split('.'); // [message,a] return expr.reduce((prev, next) => { // vm.$data.a return prev[next]; }, vm.$data); }, getTextVal(vm, expr) { // 獲取編譯文本后的結(jié)果 return expr.replace(//{/{([^}]+)/}/}/g, (...arguments) => { return this.getVal(vm, arguments[1]); }) }, text(node, vm, expr) { //文本處理 let updateFn = this.updater['textUpdater']; let value = this.getTextVal(vm, expr); updateFn && updateFn(node, value) }, model(node, vm, expr) { let updateFn = this.updater['modelUpdater']; updateFn && updateFn(node, this.getVal(vm, expr)); }, updater: { textUpdater(node, value) { node.textContent = value; }, modelUpdater(node, value) { node.value = value; } }}v-model類型
modelUpdater(node, value) { node.value = value; console.log(node) console.log(value) console.log(node.value) }
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
