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

2022-07-10 22:39:18 字數 1594 閱讀 7088

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

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

) }

}function

jvue(options)

//將模板結合資料得到html,加到頁面中

jvue.prototype.render

=function

()

//編譯:將dom和資料結合起來

jvue.prototype.compiler

=function

()

//更新:將修改後的模板加到頁面中去

jvue.prototype.update

=function

(real)

//思考一下怎麼用:

=new

jvue(

})script

>

body

>

html

>

說明:

VUE入門02 vue生命週期

網上有一些哥們分享的面試題有關於vue生命週期的 官方給出下面的圖來進行解釋,不過直接看還是不太明白,以下記錄是自己的理解和其他人的經驗總結 參考 圖中用紅色虛線指引的紅色框是 鉤子函式 在vue一整個的生命週期中會有很多鉤子函式提供給我們在vue生命週期不同的時刻進行操作,那麼先列出所有的鉤子函式...

02 Vue的插值操作

lang en charset utf 8 documenttitle head 測試成功 h3 h3 h3 h3 div src js vue.js script newvue script body html 1.mustache語法是什麼 就是 mustache 的標示符,花括號裡的 data...

構造器,建構函式,構造方法

student s1 new student 類名 物件名 new 構造方法 2 當定義乙個類時,即使類中什麼內容都沒有定義,其也預設的隱藏的存在乙個無參的構造器 預設無參構造器 編譯器提供的。當然我們也可以顯現的定義出來。如 class student 當我們把它顯現的定義出來 class stu...