今天教大家如何用 js 封装一个简单的 vue 双向绑定 (v-model), 目前刚搞完, 分享一下, 有什么不懂的或者更好的建议下方留言
首先第一步肯定是写 html 了!
下面直接附代码.
v-model 不懂什么意思的去看下 vue 把. 本文章主要讲思路
- <div id="app">
- <p id="display">{{name}}</p>
- <p>{{age}}</p>
- <p>{{blo}}</p>
- <input type="text" v-model="name" id="namea">
- <input type="text" v-model="age" id="nameaa">
- <input type="text" v-model="blo">
- </div>
开始奔向 js
第一步创建 data 变量 跟 SelfVue 函数
- var data = {
- }
- var SelfVue = new SelfVue(data, '#app')
- function SelfVue(data, ele, exp) {
- // 三个 data 是参数 el 是父元素 第三个临时放着
- var _this = this
- this.data = data
- var reg = /\{\{(.*)\}\}/
- this.Doctor = this.deepCopy(data);
- // 获取最大层标签 app
- var el = document.querySelector(ele)
- el.childNodes.forEach(function (key) {
- if (key.setAttribute) {
- // v-model 的数据绑定
- var ke = key.getAttribute('v-model')
- ke ? _this.vModel(key, ke) : ''
- }
- if (reg.test(key.innerHTML)) {
- // 最笨的切割方法 临时凑合用 切出来里面的内容
- var el = key.innerHTML.split('{{')[1].split('}}')[0]
- // key 是 元素 el 是名字
- _this.proxyKeys(key, el)
- }
- })
- // 向页面的内容添加初始值
- }
- SelfVue.prototype = {
- proxyKeys: function (el, key) {
- // el 是元素 key 是值名字
- var _this = this
- el.innerHTML = data[key] ? data[key] : ''
- Object.defineProperty(this.data, key, {
- // 必须是 true 的时候才会被改变和删除 默认是 false
- configurable: true,
- enumerable: false,
- // get 是读取 set 是写入
- get: function () {
- return
- },
- set: function (setter) {
- el.innerHTML = setter
- _this.Doctor[key] = setter
- }
- })
- },
- vModel: function (key, ke) {
- key.addEventListener('input', (event) => {
- 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;
- }
- }
效果图
高潮来了, 最后是你们喜欢的效果
- <div id="app">
- <p id="display">{{name}}</p>
- <p>{{age}}</p>
- <p>{{blo}}</p>
- <input type="text" v-model="name" id="namea">
- <input type="text" v-model="age" id="nameaa">
- <input type="text" v-model="blo">
- </div>
- <script>
- function SelfVue(data, ele, exp) {
- // 三个 data 是参数 el 是父元素 第三个临时放着
- var _this = this
- this.data = data
- var reg = /\{\{(.*)\}\}/
- this.Doctor = this.deepCopy(data);
- var el = document.querySelector(ele)
- el.childNodes.forEach(function (key) {
- if (key.setAttribute) {
- // v-model 的数据绑定
- var ke = key.getAttribute('v-model')
- ke ? _this.vModel(key, ke) : ''
- }
- if (reg.test(key.innerHTML)) {
- // 最笨的切割方法 临时凑合用 切出来里面的内容
- var el = key.innerHTML.split('{{')[1].split('}}')[0]
- // key 是 元素 el 是名字
- _this.proxyKeys(key, el)
- }
- })
- // 向页面的内容添加初始值
- }
- SelfVue.prototype = {
- proxyKeys: function (el, key) {
- // el 是元素 key 是值名字
- var _this = this
- el.innerHTML = data[key] ? data[key] : ''
- Object.defineProperty(this.data, key, {
- // 必须是 true 的时候才会被改变和删除 默认是 false
- configurable: true,
- enumerable: false,
- // get 是读取 set 是写入
- get: function () {
- return
- },
- set: function (setter) {
- el.innerHTML = setter
- // 因为绑定以后我暂时获取不到他的数据了, 暂时不是很理解就找了个中间件
- _this.Doctor[key] = setter
- }
- })
- },
- // 添加输入事件 并且把输入的值赋值给 data
- vModel: function (key, ke) {
- key.addEventListener('input', (event) => {
- 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;
- }
- }
- // 创建一个 data 变量 == VUE({data:""}) 我这里暂时就拿出来了
- var data = {
- }
- // 第一个参数是 data 第二个是 最外层父元素 也就是 vue 的 el
- var SelfVue = new SelfVue(data, '#app')
- </script>
思路不是很清晰, 如果大佬们不懂或者暂时又不理解的, 等我稍后整理下, 重新发布下整体思路.
如果觉得本菜鸡封装的不好的, 或者有什么需要改进的地方, 请留言提出来, 我先谢过了
来源: http://www.qdfuns.com/article/38308/7b6a3211587505e82c82fcdf4150759c.html