vue.js 双向数据绑定的实现
1.首先定义构造函数
var Vue = function (params) { this.el = document.getElementById(params.el) this.data = params.data this.init() } Vue.prototype = { init: function () { this.updateView() this.bindData() this.bindModel() } }
2.在初始化方法中先定义一个视图的更新方法。这样一个简单的单向绑定就已经实现了。
Vue.prototype.updateView = function () { // v-text 视图更新 var doms = this.el.querySelectorAll('[v-text]') for (var i = 0; i < doms.length; i++) { var bindName = doms[i].getAttribute('v-text') doms[i].innerHTML = this.data[bindName] } // v-model 视图更新 var modelDoms = this.el.querySelectorAll('[v-model]') for (var i = 0; i < modelDoms.length; i++) { var modelBindName = modelDoms[i].getAttribute('v-model') modelDoms[i].value = this.data[modelBindName] || '' } }
3.然后要建立数据层到视图层的单向联系。
Vue.prototype.bindData: function () { var data = this.data for (var key in data) { this.defineObject(data, key, data[key]) } } Vue.prototype.defineObject: function (obj, prop, value) { var value = value || '' var _that = this Object.defineProperty(obj, prop, { get: function () { return value }, set: function (newVal_) { value = newVal_ _that.updateView() } })
4.建立视图层到数据层的联系。也就是v-model的实现。
// model数据绑定 Vue.prototype.bindModel = function () { var data = this.data var _that = this var doms = this.el.querySelectorAll('[v-model]') for (var i = 0; i < doms.length; i++) { var bindName = doms[i].getAttribute('v-model') doms[i].value = data[bindName] || '' if (document.addEventListener) { doms[i].addEventListener('keyup', function (event) { e = event || window.event data[bindName] = e.target.value }, false) } else { doms[i].attachEvent('onkeyup', function (event) { e = event || window.event data[bindName] = e.target.value }, false) } } }
至此一个简单的双向数据绑定就已经实现了。
附上链接
