掛載方法Vue.prototype.$mount = function(element) {const rootNode = document.getElementById(element)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁(yè) > 營(yíng)銷資訊 > 網(wǎng)站運(yùn)營(yíng) > web技術(shù)支持| 簡(jiǎn)單實(shí)現(xiàn)Vue第一章：模板編譯

web技術(shù)支持| 簡(jiǎn)單實(shí)現(xiàn)Vue第一章：模板編譯

時(shí)間：2023-06-07 02:15:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-07 02:15:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

web技術(shù)支持| 簡(jiǎn)單實(shí)現(xiàn)Vue第一章：模板編譯：

創(chuàng)建vue構(gòu)造函數(shù)

function Vue(option) {this.$option = option;}


掛載方法

Vue.prototype.$mount = function(element) {const rootNode = document.getElementById(element);if (rootNode) {this.$rootNode = rootNode;} else {throw new Error('$mount Receives an ID node');}if (this.$option.template) {this.$render();} else {throw new Error('The lack of the template');}return this;}Vue.prototype.$render = function render() {this.$AST = this.$templateCompilation(this.$option.template);}Vue.prototype.$templateCompilation = function templateCompilation(html) {const AST = {attrs: [],children: []};function start(AST) {let result = html.match(startReg.startTag);AST.tagName = result[0];cuttingHTML(result);while (html.match(startReg.endTag).index) {result = html.match(startReg.startAttrs);AST.attrs.push({key: result[0].split('=')[0],value: result[1]});cuttingHTML(result);}cuttingHTML(html.match(startReg.endTag));text(AST);return AST;}function text(parent) {while (html && html.match(textReg.endTag).index) {let result = html.match(textReg.startTag);if (result && !result.index) {parent.children.push(start(JSON.parse(JSON.stringify(AST))));} else {result = html.match(textReg.text);parent.children.push(result[0]);cuttingHTML(result);}}cuttingHTML(html.match(textReg.endTag));}function cuttingHTML(result) {html = html.substr(result.index + result[0].length);}return start(JSON.parse(JSON.stringify(AST)));}


創(chuàng)建reg.js

const startReg = {startTag: /[/w/d]+/,startAttrs: /[^/s=]+/s*=/s*('[^'>]*'|"[^">]*")/,endTag: //s*>/};const textReg = {startTag: //s*<[/w/d]+/,text: /[^<]+/,endTag: //s*<//[a-z0-9]+>/i};


使用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./reg.js"></script><script src="./vue.js"></script><style>.box {display: flex;}img {width: 200px;height: 100%;margin-right: 20px;}.content {line-height: 27px;font-size: 14px;}.content span {color: #000;font-weight: 600;}</style></head><body><div id="app"></div><script>const template = `<div class='box' style='width: 900px;height: 300px;border: 1px solid green;margin: 150px auto;padding: 20px;box-sizing: border-box'><img src='./touxiang.webp'></img><div class='content'>您好，我是 <span>{{ name }}</span>，畢業(yè)于 <span>{{ university.name }}</span> 大學(xué) <span>{{ university.professional }}</span> 專業(yè)。今天應(yīng)聘的是貴公司的xxxx崗位。在校期間，我在學(xué)校的學(xué)生會(huì)/團(tuán)總支/社團(tuán)/班級(jí)/寢室擔(dān)任xxxx職務(wù)。期間，我參加xxx活動(dòng)。課余，我還參加了xxxx的實(shí)踐活動(dòng)。我的興趣愛(ài)好是xxxx，擅長(zhǎng)xxxx。我對(duì)貴公司和xxxx這個(gè)崗位十分感興趣，希望您能給我一個(gè)機(jī)會(huì)。<br></br><br></br>您好，我是 <span>{{ name }}</span>，畢業(yè)于 <span>{{ university.name }}</span> 大學(xué) <span>{{ university.professional }}</span> 專業(yè)。今天應(yīng)聘的是貴公司的xxxx崗位。在校期間，我在學(xué)校的學(xué)生會(huì)/團(tuán)總支/社團(tuán)/班級(jí)/寢室擔(dān)任xxxx職務(wù)。期間，我參加xxx活動(dòng)。課余，我還參加了xxxx的實(shí)踐活動(dòng)。我的興趣愛(ài)好是xxxx，擅長(zhǎng)xxxx。我對(duì)貴公司和xxxx這個(gè)崗位十分感興趣，希望您能給我一個(gè)機(jī)會(huì)。</div></div>`;const vn = new Vue({template,data() {return {name: 'Jack',age: 23,university: {name: 'Shanghai Jiao Tong',professional: 'Computer information'}}}}).$mount('app');console.log(vn);</script></body></html>


效果截圖

注意：上述代碼無(wú)法實(shí)現(xiàn)以下效果，本章代碼只進(jìn)行了模板編譯，還沒(méi)有渲染真實(shí)DOM；














關(guān)鍵詞：模板,編譯,技術(shù),支持,簡(jiǎn)單,實(shí)現(xiàn)

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉