首先建立乙個 html 檔案
<
!doctype html>
簡易vue雙向繫結<
/title>
"./twoway-bingding.js"
>
<
/script>
// 引入實現vue的檔案
document.
addeventlistener
("domcontentloaded"
,function
(event)})
settimeout
(function()
,3000)}
);<
/script>
<
/head>
>
"str"
>
<
/input>
content of str is:
}<
/p>
<
/div>
<
/body>
<
/html>
function
vue(option)
,set
:function()
})watch
(this
.data)
;// @:監聽資料變化
newcompile
(this
)// @:建立dom和資料間的連線
}function
watch
(data)
object.
keys
(data)
.foreach
(function
(key))}
function
definereactive
(data, key, value)
,set
:function
(newval)})
}// 主題
function
subject()
subject.prototype =
, removeobserver:
function
(obs));
this
.observerlist.
splice
(index);}
, notify:
function()
)}}// 訂閱者
function
observer
(vm, key, cb)
observer.prototype =
, register:
function()
}/**
* 編譯物件
* * @param el - 根節點
* @param vm - vue物件
*/function
compile
(vm)
compile.prototype =
\}$/
for(
var i =
0; i < el.childnodes.length; i++
)}的文字節點
node.textcontent.
replace
(reg,
function
(str, key)
}"替換為data[key]的值
// @:將node註冊為key的觀察者，以便在資料變化時得到通知並作出響應
newobserver
(_this.vm, key,
function
(newval, oldval))}
)}else
if(node.tagname ==
'input'
&& node.
hasattribute
('v-model'))
// @:將node註冊為key的觀察者，以便在資料變化時得到通知並作出響應
newobserver
(_this.vm, key,
function
(newval, oldval))}
}else})
(this)}
},}
08 使用vue實現簡易計算器
charset utf 8 meta 簡易計算器title src script head type text v model n1 v model opration value option value option value option value option select type te...
仿照vue實現簡易的MVVM框架（二）
實現文字插值與s for迴圈模版。對於文字插值的實現，我採用正則去匹配還原這個dom節點，以插值 形式為分界，將這個dom節點的文字分割成多個字串，儲存在this.muscha中，再者，將普通文字字串以陣列形式儲存在string屬性中，將插值存放在text屬性值。當然，拼接的時候要明白先從strin...
仿照vue實現簡易的MVVM框架（一）
主要的方法有 compile 深度遍歷前端介面的節點，將其複製進乙個addquene佇列中 pasers 遍歷所有的節點，並將節點包裝成乙個含有本節點 自定義屬性及屬性值的物件。要想實現雙向繫結，重要的一步是，為自定義s model的節點繫結事件 input框的雙向繫結，監聽oninput事件 ob...