实现乞丐版vue

由于工作中经常使用vue，所以对它的内部构造非常着迷，一直想探究其究竟。也看了不少文章，无奈水平所限并不能吃透、看透。所以运用目前自己所学，写了demo,本demo总共100行左右，实现v-model,v-bind,v-click等功能。

由于水平所限，本demo写的不是很规范，考虑的不是很周全，程序设计不太合理。只能实现基本的功能，作为学习的一个记录。还希望大神勿喷，欢迎批评指正。

第一次写博客，语言组织能力有待加强。

 

1、HTML部分 　

<div id="app"><span style="display: inline-block" v-bind="num"></span><span style="display: block" v-bind="input"></span><span style="display: block" v-bind="test"></span><span style="display: block" v-bind="input2"></span><input style="display: block" type="text" v-model="input"><input style="display: block" type="text" v-model="test"><input style="display: block" type="text" v-model="input2"><button @click="handleClick">click</button> </div>

2、javascript部分

<script>function Vue (options) {this.initValue = Object.assign({},options.data)this.data = options.datathis.methods = options.methodsthis.el = document.getElementById(options.el)this.bindList = [] this._init(this.el) } Vue.prototype._init = function (d) { this.render(d.children) this.definedProprtyInt (this.data) } //遍历dom树 Vue.prototype.render =function (nodeList) { Array.prototype.forEach.call(nodeList,(item) => { let childNode = item.children let len = childNode.length //匹配v-model或者@model let model = item.getAttribute('v-model')||item.getAttribute('@model') let type = item.tagName.toLocaleLowerCase() if (model) { item.value = this.initValue[model] this.data[model] = "" if (type === 'input') { item.onkeyup = function (e) { this.data[model] = e.target.value }.bind(this) } } //匹配v-bind 并绑定相应的值 let bind = item.getAttribute('v-bind')||item.getAttribute('@bind') if(bind && (bind in this.data)) { //收集依赖 item.innerHTML = this.initValue[bind] this.bindList.push({ key:bind, d:item }) } //匹配v-click或者@click let eventName = item.getAttribute('v-click')||item.getAttribute('@click') if(eventName) { item.onclick = function (e) { this.methods[eventName].bind(this.data)(e) }.bind(this) } if(len>0) { this.render(childNode) } },this) } Vue.prototype.definedProprtyInt = function (o){ let _this = this for(let key in o) { Object.defineProperty(o,key,{ set:function (v) { //在data中找到相应的key渲染到对应的页面上 this.bindList.forEach((item) => { if(key == item.key) { item.d.innerHTML = v } }) _this.initValue[key] = v }.bind(this), get:function (v) { // console.log(_this.initValue[key]) return _this.initValue[key] }, }) } } new Vue({ el:"app", data:{ input:"input", test:"test", input2:"input2", num:1 }, methods:{ handleClick:function (e) { this.num ++ } } }) </script>

 

转载于:https://www.cnblogs.com/muyu-Ting/p/9324259.html

《新程序员》：云原生和全面数字化实践50位技术专家共同创作，文字、视频、音频交互阅读

总结

以上是生活随笔为你收集整理的实现乞丐版vue的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。