/** * 将字符串处理为dom元素 * @param el * @returns {Element|*} */ function query (el) { if (typeof el === 'string') { return document.querySelector(el); } return el; } function initMixin (Vue) { Vue.prototype._init = function (options) { const vm = this; vm.$options = options; initState(vm); const { el } = options; // el选项存在，会将el通过vm.$mount方法进行挂载 // el选项如果不存在，需要手动调用vm.$mount方法来进行组件的挂载 if (el) { vm.$mount(el); } }; Vue.prototype.$mount = function (el) { el = query(el); const vm = this; const options = vm.$options; if (!options.render) { // 有render函数，优先处理render函数 let template = options.template; // 没有template,使用el.outerHTML作为template if (!template && el) { template = el.outerHTML; } options.render = compileToFunctions(template); } }; }

export function compileToFunctions (template) { // 将html解析为ast语法树 const ast = parseHtml(template); // 通过ast语法树生成代码字符串 const code = generate(ast); // 将字符串转换为函数 return new Function(`with(this){return $[code]}`); }

 hh 
hello {{name}} world

const ast = { tag: 'div', // 标签名 attrs: [{ name: 'id', value: 'app' }], // 属性数组 type: 1, // type:1 是元素，type: 3 是文本 parent: null, // 父节点 children: [] // 孩子节点 }

// 删除匹配的字符串 function advance (length) { html = html.slice(length); } 

export function parseHtml (html) { function parseStartTag () { const start = html.match(startTagOpen); if (start) { const match = { tag: start[1], attrs: [] }; // 开始解析属性，直到标签闭合 advance(start[0].length); let end = html.match(startTagClose); let attr = html.match(attribute); // 循环处理属性 while (!end && attr) { match.attrs.push({ name: attr[1], value: attr[3] || attr[4] || attr[5] }); advance(attr[0].length); end = html.match(startTagClose); attr = html.match(attribute); } if (end) { advance(end[0].length); } return match; } } // 注意：在template中书写模板时可能开始和结束会有空白 html = html.trim(); while (html) { // 开始和结束标签都会以 < 开头 const textEnd = html.indexOf('<'); if (textEnd === 0) { // 处理开始标签 const startTag = parseStartTag(); if (startTag) { start(startTag.tag, startTag.attrs); } // some code ... } // some code... } return root; }

// 树 + 栈 function createASTElement (tag, attrs) { return { tag, type: 1, attrs, children: [], parent: null }; } let root, currentParent; const stack = []; function start (tag, attrs) { const element = createASTElement(tag, attrs); if (!root) { root = element; } else { // 记录父子关系 currentParent.children.push(element); element.parent = currentParent; } currentParent = element; stack.push(element); }

 hello world  xxx 

export function parseHtml (html) { // 树 + 栈 let root, currentParent; const stack = []; function char (text) { // 替换所有文本中的空格 text = text.replace(/\s/g, ''); if (currentParent && text) { // 将文本放到对应的父节点的children数组中，其type为3，标签type为1 currentParent.children.push({ type: 3, text, parent: currentParent }); } } while (html) { // some code ... // < 在之后的位置，说明要处理的是文本内容 if (textEnd > 0) { // 处理文本内容 let text = html.slice(0, textEnd); if (text) { char(text); advance(text.length); } } } return root; }

export function parseHtml (html) { // 树 + 栈 let root, currentParent; const stack = []; // 每次处理好前一个，最后将所有元素作为子元素push到root节点中 function end (tag) { // 在结尾标签匹配时可以确立父子关系 stack.pop(); currentParent = stack[stack.length - 1]; } while (html) { // 开始和结束标签都会以 < 开头 const textEnd = html.indexOf('<'); if (textEnd === 0) { // some code ... // 处理结尾标签 const endTagMatch = html.match(endTag); if (endTagMatch) { end(endTagMatch[1]); advance(endTagMatch[0].length); } } // some code ... } return root; }

 hh 
hello {{name}} world

const code = `_c("div",{id:"app"},_v("hh"),_c("div"),{id:"aa",style:{color: "red"}},_v("hello"+_s(name)+"world"))`

function genAttrs (attrs) { if (attrs.length === 0) { return 'undefined'; } let str = ''; for (let i = 0; i < attrs.length; i++) { const attr = attrs[i]; if (attr.name === 'style') { const styleValues = attr.value.split(','); // 可以对对象使用JSON.stringify来进行处理 attr.value = styleValues.reduce((obj, item) => { const [key, val] = item.split(':'); obj[key] = val; return obj; }, {}); } str += `${attr.name}:${JSON.stringify(attr.value)}`; if (i !== attrs.length - 1) { str += ','; } } return `{${str}}`; } // some code ... export function generate (el) { const children = genChildren(el.children); return `_c("${el.tag}", ${genAttrs(el.attrs)}${children ? ',' + children : ''})`; }

function gen (child) { if (child.type === 1) { // 将元素处理为代码字符串并返回 return generate(child); } else if (child.type === 3) { ret
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：Vue中的全局指令防止按钮重复点击_vue.js_
                                                                
下一篇：vue中element-ui使用axios上传文件_vue.js_