第二个版本
封装 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 指向问题 等等
来源: http://www.qdfuns.com/article/38308/33822fdf64bb70257f0723c1fb8f3982.html