_observe(obj)
// 訂閱(key)資料
if (!this._binding[key]) ;
let binding = this._binding[key]
// 重寫getter, setter
object.defineproperty(obj, key, ,
set(newval) );}})
}}
}
_proxydata(data, vm) ,
set(newval) })}
}
_compile(root)))
}if (hasdirective(attributes, 'v-on')) )
}if (node.hasattribute('v-model') && node.tagname === 'input' || node.tagname === 'textarea') ))
node.addeventlistener('input', e=> )
node.value = this.$data[attrval]
}// 遞迴接著處理
if (node.haschildnodes())
}// 文字節點
if (node.nodetype === 3) }，用正則去匹配；watcher去觀察}(包裹元素)，
let newtext = text.replace(/\\}/g, (match, p0)=> )
node.textcontent = newtext;
// 把整個文字節點進行監控}-----}；新增到訂閱到陣列裡等待通知
keyarr.foreach(key => ))})}
})}
class
watcher
) // 更新text,或更新屬性
update()
this.el[this.attr] = this.vm.$data[this.exp]
}// 文字節點
else }，用正則去匹配；watcher去觀察}(包裹元素)，
vue實現title>
style>
head>
}h2>
}p>
type="text"
v-model="number">
v-on:click="increase">增加button>
v-on:click="decrease">減少button>
我點的時候就會變化
}---
}h2>
div>
// 構造watcher類，用來觀察資料變化來（本質更新dom的指令屬性或innertext)
/** * vm: vue例項
* name: 指令名
* el: 節點
* exp: 指令對應的引數
* attr: 指令值（繫結的屬性名）
**/class
watcher
) // 更新text,或更新屬性
update()
this.el[this.attr] = this.vm.$data[this.exp]
}// 文字節點
else }
，用正則去匹配；watcher去觀察
}(包裹元素)，
let newtext = text.replace(/\\}/g, (match, p0)=> )
this.el.textcontent = newtext;}}
}function
hasdirective(attrs, dir)
function
getdirectiveparams(attrs, dir)
function
getdirectivevalue(node, attrs, dir)
class
duvue
_init(options)
this._observe(this.$data)
// **所有資料
this._proxydata(this.$data, this)
this._compile(this.$el)
}_observe(obj)
// 訂閱(key)資料
if (!this._binding[key]) ;
let binding = this._binding[key]
// 重寫getter, setter
object.defineproperty(obj, key, ,
set(newval) );}})
}}
}// 例項**資料
_proxydata(data, vm) ,
set(newval) })}
}_compile(root)))
}if (hasdirective(attributes, 'v-on')) )
}if (node.hasattribute('v-model') && node.tagname === 'input' || node.tagname === 'textarea') ))
node.addeventlistener('input', e=> )
node.value = this.$data[attrval]
}// 遞迴接著處理
if (node.haschildnodes())
}// 文字節點
if (node.nodetype === 3) }
，用正則去匹配；watcher去觀察
}(包裹元素)，
let newtext = text.replace(/\\}/g, (match, p0)=> )
node.textcontent = newtext;
// 把整個文字節點進行監控
}-----
}；新增到訂閱到陣列裡等待通知
keyarr.foreach(key => ))})}
})}
}window.onload = function()
},methods: ,
decrease() }})
console.log(duvue)
}script>
body>
html>
VUE的MVVM框架解析
view 也很簡單，就是展現出來的使用者介面。基本上，絕大多數軟體所做的工作無非就是從資料儲存中讀出資料，展現到使用者介面上，然後從使用者介面接收輸入，寫入到資料儲存裡面去。所以，對於資料儲存 model 和介面 view 這兩層，大家基本沒什麼異議。但是，如何把model展現到view上，以及如何...
VUE的MVVM框架解析
view 也很簡單，就是展現出來的使用者介面。基本上，絕大多數軟體所做的工作無非就是從資料儲存中讀出資料，展現到使用者介面上，然後從使用者介面接收輸入，寫入到資料儲存裡面去。所以，對於資料儲存 model 和介面 view 這兩層，大家基本沒什麼異議。但是，如何把model展現到view上，以及如何...
Vue中的MVVM框架
viewmodel 資料雙向繫結 場景 針對具有複雜互動邏輯的前段應用 提供基礎的架構抽象 通過ajax資料持久化，保證前端使用者體驗 什麼是vue.js？是乙個輕量級的mvvm框架 資料驅動 元件化的前端開發 github超過25k 的star數，社群完善 vue對比angular，react v...