第二个版本 封装vue 在第一个版本上面添加了v-on: <div id="app"> <p id="display">{{name}}</p> <p>{{age}}</p> <p>{{blo}}</p> <button v-on:click="blo()">点击</button> <input type="text" v-model="name" id="namea"> <input type="text" v-model="age" id="nameaa"> <input type="text" v-model="blo"> </div> var SelfVue = new SelfVue({ el: '#app', data: { name: 12 }, methods: { blo: function () { alert(this.data.name) }, name: function () { } } }) // 现存问题 获取元素必须通过this.data获取 function SelfVue(options) { // 三个 data是参数 el 是父元素 第三个临时放着 var _this = this this.el = options.el this.data = data(options.data) this.methods = options.methods this.Doctor = this.deepCopy(this.data); // 方法 var el = document.querySelector(this.el) // 向页面的内容添加初始值 this.forEachks(el, this) } //变量data function data(data) { this.data = data return data } SelfVue.prototype = { forEachks: function (el, _this) { // 正则表达式 内容的 {{}} var reg = /\{\{(.*)\}\}/ // 正则表达式 切割v-on var on = /v-on:(\S*)"/ el.childNodes.forEach(function (key) { if (key.setAttribute) { // v-model的数据绑定 var model = key.getAttribute('v-model') model ? _this.vModel(key, model) : '' var vOn = key.outerHTML.match(on) vOn ? _this.oNc(key, vOn[1].split('="')[0], vOn[1].split('="')[1]) : '' } if (reg.test(key.innerHTML)) { // 最笨的切割方法 临时凑合用 切出来里面的内容 var el = key.innerHTML.split('{{')[1].split('}}')[0] // key是 元素 el是名字 _this.proxyKeys(key, el) } }) }, proxyKeys: function (el, key) { // el是元素 key是值名字 var _this = this el.innerHTML = this.data[key] ? this.data[key] : '' Object.defineProperty(this.data, key, { // 必须是true的时候才会被改变和删除 默认是false configurable: true, enumerable: false, // get是读取 set是写入 get: function (age) { return _this.Doctor[key] }, set: function (setter) { el.innerHTML = setter _this.Doctor[key] = setter } }) }, vModel: function (key, ke) { key.addEventListener('input', (event) => { this.data[ke] = key.value }) }, deepCopy: function (p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; }, // 三个参数 1，元素 2，事件 3，对应的函数 oNc: function (el, ev, val) { el.addEventListener(ev, (event) => { this.methods[val.split('()')[0]].call(this) }) } } console.log(decodeURI("%25c%E4%B8%80%E5%BC%A0%E7%82%B9%E5%8F%AF%E4%BB%A5%E7%94%BB%E4%B8%80%" + "E5%85%B1%E5%9C%86.%0A%20%20%E4%B8%80%E4%B8%AA%E4%BD%A0%E5%8F%AF%E4%BB%A5%E6%92%91%E8%B5%B7%E4%B8%8" + "0%E7%89%87%E5%A4%A9.%0A%20%20%20%20%E6%9D%A5%E6%9D%A5%E6%9D%A5%E5%B9%B2%E4%BA%86%E8%BF%99%E7%A2%97%E6%AF%92%E9%B" + "8%A1%E6%B1%A4%0A%20%20%20%20%20%20%E6%9D%A5%E7%94%9F%E8%BF%98%E5%81%9A%E7%A8%8B%E5%BA%8F%E7%8C%BF%0A%20%20%20%20%20%20%20%20---" + "%E5%8A%AA%E5%8A%9B%E5%A5%8B%E6%96%97%E7%9A%84%E5%B0%8F%E7%99%BD") , decodeURI("color:#9900ff;line-height:%2018px;")); 下面试完整的代码 点击运行就可以看到效果 <div id="app"> <p id="display">{{name}}</p> <p>{{age}}</p> <p>{{blo}}</p> <button v-on:click="blo()">点击</button> <input type="text" v-model="name" id="namea"> <input type="text" v-model="age" id="nameaa"> <input type="text" v-model="blo"> </div> <script> // 现存问题 获取元素必须通过this.data获取 function SelfVue(options) { // 三个 data是参数 el 是父元素 第三个临时放着 var _this = this this.el = options.el this.data = data(options.data) this.methods = options.methods this.Doctor = this.deepCopy(this.data); // 方法 var el = document.querySelector(this.el) // 向页面的内容添加初始值 this.forEachks(el, this) } //变量data function data(data) { this.data = data return data } SelfVue.prototype = { forEachks: function (el, _this) { // 正则表达式 内容的 {{}} var reg = /\{\{(.*)\}\}/ // 正则表达式 切割v-on var on = /v-on:(\S*)"/ el.childNodes.forEach(function (key) { if (key.setAttribute) { // v-model的数据绑定 var model = key.getAttribute('v-model') model ? _this.vModel(key, model) : '' var vOn = key.outerHTML.match(on) vOn ? _this.oNc(key, vOn[1].split('="')[0], vOn[1].split('="')[1]) : '' } if (reg.test(key.innerHTML)) { // 最笨的切割方法 临时凑合用 切出来里面的内容 var el = key.innerHTML.split('{{')[1].split('}}')[0] // key是 元素 el是名字 _this.proxyKeys(key, el) } }) }, proxyKeys: function (el, key) { // el是元素 key是值名字 var _this = this el.innerHTML = this.data[key] ? this.data[key] : '' Object.defineProperty(this.data, key, { // 必须是true的时候才会被改变和删除 默认是false configurable: true, enumerable: false, // get是读取 set是写入 get: function (age) { return _this.Doctor[key] }, set: function (setter) { el.innerHTML = setter _this.Doctor[key] = setter } }) }, vModel: function (key, ke) { key.addEventListener('input', (event) => { this.data[ke] = key.value }) }, deepCopy: function (p, c) { var c = c || {}; for (var i in p) { if (typeof p[i] === 'object') { c[i] = (p[i].constructor === Array) ? [] : {}; deepCopy(p[i], c[i]); } else { c[i] = p[i]; } } return c; }, // 三个参数 1，元素 2，事件 3，对应的函数 oNc: function (el, ev, val) { el.addEventListener(ev, (event) => { this.methods[val.split('()')[0]].call(this) }) } } console.log(decodeURI("%25c%E4%B8%80%E5%BC%A0%E7%82%B9%E5%8F%AF%E4%BB%A5%E7%94%BB%E4%B8%80%" + "E5%85%B1%E5%9C%86.%0A%20%20%E4%B8%80%E4%B8%AA%E4%BD%A0%E5%8F%AF%E4%BB%A5%E6%92%91%E8%B5%B7%E4%B8%8" + "0%E7%89%87%E5%A4%A9.%0A%20%20%20%20%E6%9D%A5%E6%9D%A5%E6%9D%A5%E5%B9%B2%E4%BA%86%E8%BF%99%E7%A2%97%E6%AF%92%E9%B" + "8%A1%E6%B1%A4%0A%20%20%20%20%20%20%E6%9D%A5%E7%94%9F%E8%BF%98%E5%81%9A%E7%A8%8B%E5%BA%8F%E7%8C%BF%0A%20%20%20%20%20%20%20%20---" + "%E5%8A%AA%E5%8A%9B%E5%A5%8B%E6%96%97%E7%9A%84%E5%B0%8F%E7%99%BD") , decodeURI("color:#9900ff;line-height:%2018px;")); </script> <script> var SelfVue = new SelfVue({ el: '#app', data: { name: 12 }, methods: { blo: function () { alert(this.data.name) }, name: function () { } } }) </script> 一天更新了两个版本，其中有一些错误的思想会在下一个版本改正，例如：获取元素的时候是this.name 并不需要加data 这里存在一点点的this指向问题 等等
评论 (1 )
最新评论
有点累 现存问题：v-on:函数不能传参，否则报错 this指向的问题。现在发现了部分问题暂未解决 有好思路的朋友求推荐