html：
doctype html
>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
title
>document
title
>
<
style
>
.ulclass
#ulclass
style
>
head
>
<
body
>
<
div
id>
<
input
type
="text"
v-model
="name"
>
<
p :id
="cls"
> }
p>
<
div>姓名：} 年齡：} 我是}
div>
<
ul v-bind:class
="cls"
>
<
li v-text
="user.gionlee.name"
>1
li>
<
li v-html
="user.gionlee.html"
>2
li>
<
li v-text
="name"
>3
li>
ul>
<
button
v-on:click
="test"
>v-on點選
button
>
<
button
@click
="test"
>@點選
button
>
div>
body
>
<
script
src="./observer.js"
>
script
>
<
script
src="./mvvm.js"
>
script
>
<
script
>
let vm
=new
mvvm(}},
methods: }})
script
>
html
>
js：mvvm.js
const compileutil =,vm.$data)},setvalue (expr,vm,value)
return
data[val]
},vm.$data)
},//獲取文字物件 批量處理 單個標籤內使用多個變數如： 姓名：}年齡:}
getcontext(expr,vm) \}/g, (...arg) =>)
return
value
},//渲染 v-text 、 }
text(node,expr,vm) \}/g, (...arg) =>)
return
this.getvalue(arg[1],vm)
})}
else
) }
this
.updater.textupdater(node,value)
},//渲染 v-html
html(node,expr,vm) )
this
.updater.htmlupdater(node,value)
},//渲染 v-model
model(node,expr,vm) )
//輸入時對v-model繫結的值進行更新
node.addeventlistener('input',(e)=>)
this
.updater.modelupdater(node,value)
},//繫結事件
on(node,expr,vm,event),
//渲染 v-bind
bind(node,expr,vm,attrname) ,
//更新函式
updater: ,
htmlupdater(node,value) ,
//更新 v-model 繫結的變數
modelupdater(node,value)
}}class mvvm
}//**this
proxydata(data) ,
set(newvalue) })}
}}class compile
iselementnode(node)
compile(fragment)
else
//遞迴遍歷節點
if (element.childnodes &&element.childnodes.length)
});}
compileelement(node) =attr
if(this
.isdirective(name))
else
if (this.iseventname(name))
else
if (this.isattrname(name)) })}
}compiletext(node) \}/.test(content))
}isattrname(attrname)
iseventname (eventname)
isdirective (attrname)
nodetofragment(el)
return
fragment
}}
observer.js
//觀察者 監聽資料變化
class watcher
getoldvalue ()
update ()
}}//
收集依賴
class dep
//收集觀察者
addsub(watcher)
//通知觀察者更新
notify() )
}}class observer
observe(data) )}}
definereactive(obj,key,value) ,
set :(newvalue) =>
//通知dep變化
dep.notify()}})
}}
vue路由實現原理
路由需要實現的功能 1.改變url且不讓瀏覽器向伺服器發出請求 2.監測 url 的變化 3.截獲 url 位址，並解析出需要的資訊來匹配路由規則。前端目前只有2種模式 1.hash模式 ie8 用a標籤或者window.location.hash設定雜湊值。window.addeventliste...
Vue2 x 響應式原理 簡單實現
根據上圖的概要邏輯，進行簡單實現 vue模擬實現 class myvue 4.建立compile newcompiler this el,this 對vue例項中的data物件進行 proxy attr get 觀察者 觀察,監聽 class watcher getoldval update 發布者...
vue雙向繫結實現原理
當我們學會使用乙個東西的時候，就開始想要去知道這個東西是怎麼實現的，這個也是我們一直繼續 下去的動力，博主學了vue的時間也比較長了，自己也寫了乙個demo，還在不定時更新，有興趣的小夥伴可以去看看，如果這個專案能讓您有所收穫，那也是博主希望看到的，接下來也是聊聊自己開始學習vue一些實現原理的過程...