由于工作中經(jīng)常使用vue，所以對它的內(nèi)部構(gòu)造非常著迷，一直想探究其究竟。也看了不少文章，無奈水平所限并不能吃透、看透。所以運(yùn)用目前自己所學(xué)，寫了demo,本demo總共100行左右，實(shí)現(xiàn)v-model,v-bind,v-click等功能。

由于水平所限，本demo寫的不是很規(guī)范，考慮的不是很周全，程序設(shè)計不太合理。只能實(shí)現(xiàn)基本的功能，作為學(xué)習(xí)的一個記錄。還希望大神勿噴，歡迎批評指正。

第一次寫博客，語言組織能力有待加強(qiáng)。

?

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 并綁定相應(yīng)的值 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中找到相應(yīng)的key渲染到對應(yīng)的頁面上 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>

?

轉(zhuǎn)載于:https://www.cnblogs.com/muyu-Ting/p/9324259.html

《新程序員》：云原生和全面數(shù)字化實(shí)踐50位技術(shù)專家共同創(chuàng)作，文字、視頻、音頻交互閱讀

總結(jié)

以上是生活随笔為你收集整理的实现乞丐版vue的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。