自己寫的乙個Vue

2022-07-04 00:57:07 字數 2237 閱讀 9221

下面這裡是我自己寫的乙個小型的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...