01 vue的模板替換簡單實現

vue是如何使用的：

編寫頁面模板

建立vue例項在vue建構函式中提供：data、methods、computed...

將vue掛載到頁面中（mount）

下面是乙個**例項：

doctype html

>
<
html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
script 
src=""
>
script
>
head
>
<
body
>
<
div 
id="root"
>
<
h1>姓名：}——年齡：}
h1>
div>
<
script
>
//第二步：建立vue例項
=new
vue(
})//第三步：掛載。這種用法的掛載在vue.js中幫我們實現了
script
>
body
>
html
>

獲得模板：模板中有預留的坑（如}、:等）

利用vue建構函式中所提供的資料來填補預留的坑，就可以在頁面上顯示標籤 了

將標籤替換頁面中原來有坑的標籤

vue利用我們提供的資料和頁面中的模板，生成了乙個新的html標籤，替換到了頁面中放置模板的位置。

比如：在上面那個例子中列印那個root標籤：

<

script
>
console.log(root);
=new
vue(
})console.log(root);
script
>

這個部分的作用是把頁面模板上帶有花括號的內容全部替換成具體的資料：

doctype html

>

<

html 
lang
="en"
>
<
head
>
<
meta 
charset
="utf-8"
>
<
meta 
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
head
>
<
body
>
<
div 
id="root"
>
<
div>
<
div>
<
h1>姓名：}——年齡：}
h1>
div>
div>
<
h2>姓名：}
h2>
<
h2>年齡：}
h2>
div>
<
script
>
let r =/
\\}/
g        /**
* 步驟拆解：
* 1.拿到模板
* 2.拿到資料（data）
* 3.將資料與模板結合，得到的是html元素（dom元素）
* 4.放到頁面中
* *///
1 let tempnode 
=document.getelementbyid(
'root')
//2let data 
=        
//3.將資料放到模板中：一般都是使用遞迴
//在這個案例中，template是乙個dom元素
//在真正的vue原始碼中是將dom元素轉換成字串模板 -> 轉換成抽象語法樹 -> 轉換成虛擬dom(vnode) -> 轉換成真正的dom
function
compiler(template, data) } 插值
let txt 
=childnodes[i].nodevalue 
//nodevalue該屬性只有文字節點才有意義
//有沒有}呢
txt 
=txt.replace(r, 
function
(_, g) }用這個值（data中對應的值）替換
return
value
})//注意：txt現在和dom元素是沒有關係的，需要將修改後的值放回去
childnodes[i].nodevalue 
=txt
} else
if(type 
===1
)             }
}//我們此時是沒有生成新的template，所以這裡看到的是直接在頁面中就更新的資料，因為dom是引用型別
//但是我們這麼處理的話，原來帶}的模板就沒有了。無法再更新了
// 利用模板生成乙個需要被渲染的html標籤（準·真正在頁面中顯示的標籤）
let generatenode 
=tempnode.clonenode(
true
)  //
注意這裡是dom元素，可以直接這麼用
console.log(
1, tempnode);
compiler(generatenode, data)
console.log(
2, generatenode);
//4.將渲染好的html加到頁面當中
root.parentnode.replacechild(generatenode, root)
//到此為止：上面的思路有比較大的問題
使用的是虛擬dom，而這裡用的是真實的dom
//2.只考慮了單屬性}，而vue中大量的使用了層級（}）
//3.**沒有整合
script
>
body
>
html
>

說明：這個實現的大致理論：

Vue學習筆記之01 Vue的特點

0.準備工作 vue的基本使用 new vue box 輸出50 輸出xiaolam div 以前的js做法 程式設計正規化 命令式程式設計 建立乙個div元素,設定id屬性 定義乙個變數message 將這個變數插入div元素中 如果修改了message的資料 就要重新將修改後的資料重新插入div...

vue從0 1的實現

在看這篇文章之前，希望你熟悉html5 css vue的語法 1 環境安裝 安裝node.js cmd檢測安裝是否正確 node v 安裝npm cmd檢測安裝是否正確 npm v 安裝 映象 npm install g cnpm registry 安裝vue npm install vue 安裝c...

02 vue建構函式方法實現模板替換與渲染

doctype html html lang en head meta charset utf 8 meta name viewport content width device width,initial scale 1.0 title document title head body div i...