vue解析指令compile源码层面使用解析_vue.js_

class MVue { constructor (options) { // 保存options this.$options = options this.$data = options.data // 将data进行响应式处理 observe(this.$data) // 代理 proxy(this) // 编译 /**核心部分**/ new Compile(options.el, this) } } class Compile { constructor (el, vm) { this.$vm = vm this.$el = document.querySelector(el) if (this.$el) { this.compile(this.$el) } } compile (node) { // 找到该元素的子节点 const childNodes = node.childNodes // childNodes是类数组对象 Array.from(childNodes).forEach(n => { // 判断类型 if (this.isElment(n)) { this.compileElement(n) // 递归 if (n.childNodes.length > 0) { this.compile(n) } } else if (this.isInter(n)) { // 动态插值表达式 编译文本 this.compileText(n) } }) } isElment (node) { return node.nodeType === 1 } isInter (n) { return n.nodeType === 3 && /\{\{(.*)\}\}/.test(n.textContent) } isDir (attrName) { return attrName.startsWith('m-') } isEvent (attrName) { return attrName.startsWith('@') } // 编译元素：遍历它的所有属性，看是否m-开头指令，或者@事件 compileElement (node) { const attrs = node.attributes Array.from(attrs).forEach(attr => { // m-text="XXX" // name = m-text, value=xxx const attrName = attr.name const exp = attr.value // 是指令 if (this.isDir(attrName)) { // 执行特定指令处理函数 const dir = attrName.substring(2) this[dir] && this[dir](node, exp) } else if (this.isEvent(attrName)) { //是事件 const event = attrName.substring(1) // 通过bind改变this指向为vm实例，以便方法内部访问vm.data中的数据 node.addEventListener(event, this.$vm.$methods[exp].bind(this.$vm)) } }) } compileText (n) { // 获取表达式 // n.textContent = this.$vm[RegExp.$1] n.textContent = this.$vm[RegExp.$1.trim()] } text (node, exp) { node.textContent = this.$vm[exp] || exp } html (node, exp) { node.innerHTML = this.$vm[exp] } model (node, exp) { node.value = this.$vm[exp] } }

{{ counter }}

 compileText (n) { // 获取表达式 // n.textContent = this.$vm[RegExp.$1] n.textContent = this.$vm[RegExp.$1.trim()] }