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...