下面這裡是我自己寫的乙個小型的vue,原理就是proxy:
//proxy天生沒有prototype,因此要加上,不然extends會報錯
proxy.prototype = proxy.prototype ||object.prototype
class myvue extends proxy
super(data,
else
'`) }
},set(target, name, value, proxy)
})//不能夠在constructor裡面設定data的值,因此公共變數只能在constructor裡面定義,通過函式呼叫傳遞
//this.$el = document.queryselector(options.el)
//data被類本身**,而其他options經過初步處理後我們儲存在乙個變數物件_container中
let _container ={}
window.onload = function
()
//特殊地我們需要乙個重新渲染el的內部方法也要存在_container裡面
//繫結_container本身是為了render函式能夠使用存在_container裡面的options的內容
_container.render =render.bind(_container)
_container.render()}}
//get只能get到data物件裡面的值,所以在內部定義的函式也沒辦法用
//zzz()
}function
render()
return
val }
//先把dom上的替換成「備份」
this.el.parentnode.replacechild(this.oldel, this
.el);
//"備份"切換到this.el上等待被渲染
this.el = this
.oldel
//再複製乙份留「備份」
this.oldel = this.oldel.clonenode(true
)
//處理花括號
this.el.innerhtml = this.el.innerhtml.replace(/\]+\}\}/, (str) =>)
//處理:屬性
let nodes = this.el.getelementsbytagname('*')
array.from(nodes).foreach(node =>
else
if (attr.nodename.startswith('@')) '`)
}node.addeventlistener(attr.nodename.substring(1),function
().bind(
this),false
) node.removeattribute(attr.nodename)}})
})}
對應呼叫的html:
doctype html
>
<
html
>
<
head
>
<
title
>myvue
title
>
<
script
src="my-vue.js"
>
script
>
<
script
>
let vm
=new
myvue(,
methods:}})
console.log(vm.aaa)
script
>
head
>
<
body
>
<
div
id>
}
<
span
:title
="bbb"
@click
="sayhello"
>
hahaha
span
>
div>
body
>
html
>
寫乙個自己的簡易版vue
剛到家疫情就開始爆發,恰巧家裡沒有網,手機網路在老家的速度就像拖拉機,每天躲在家裡,還好剛到老家時搞了些口罩,不至於返程時沒有口罩可帶。手機的網路速度到底什麼樣呢,用vue cli建個專案就在那一直install,還有可能中途失敗,哎。沒法練習vue了就把自己寫好的簡易版vue拿出來又擼了擼,還有點...
自己寫乙個LIST
pragma once forward declarations templateclass clistnode templateclass clist template class clistnode void insertafter t data template void clistnode ...
自己寫乙個框架
自己寫乙個框架 單入口mvc 類 庫 屬於擴充套件 乙個好的配置檔案和讀取功能 db介面 dispather.php index.php dispather 分析controller action 根據分析controller action 動態載入 引入乙個自動載入機制 controller.ph...