Vue的MVVM实现方法


Posted in Javascript onAugust 16, 2017

本文介绍了Vue的MVVM实现方法,分享给大家,具体如下:

1. Object.defineProperty() 定义属性

用意:给一个对象定义属性,那个属性原来是不存在的。这是一个初衷,属性是不存在的,需要额外添加。

①、使用说明

Object.defineProperty(obj,props)

第一个参数是将被添加或者修改的属性的对象

第二个参数是一个对象,表示将要添加的一个或多个键值对一直要添加属性的具体配置

{

​ '属性名':{value:'...',writable:true},

​ '属性名':{value:'...',writable:true}

}

②、属性的getter和setter

  • 一般用于局部变量
  • 给构造函数添加属性
// get和set的方法不能和value以及writable一起使用
var o ={},
Object.defineProperty(o,'p',{
 get(){
   console.log('调用属性后输出')
 },
   set(val){
   console.log(val+'赋值属性的时候调用')
   }
})
o.p // '调用属性后输出'
o.p = 'hcc' //hcc赋值属性的时候调用
// 可以根据Object.getOwnPropertyDescriptor(对象, '属性名')得到相应的属性配置

// 需求
//给一个对象的属性值不能超过30,超过30的按照30来算
var hcc = {} //全局对象
{
 var age = null //局部变量
 Object.defineProperty(hcc,'age',{
   get(){
     return age //设置hcc.age的值
   },
   set(val){
     age= val> 30?30:val //当赋值给hcc.age的值进行判定从而改变局部变量age的值 
   }  
 })
}

③、使用场景

// 简单的给元素添加属性
  var obj = {name:'hcc'}
  Object.defineProperties(obj,{
   'name':{value:'haaaaa',writable:true},
   'age':{value:24,writable:false}
  })

细节

今天楼主上午在思考,一般使用Object.defineProperty()为什么需要使用局部变量呢?

所有楼主就下了下面的代码

var obj = {}
Object.defineProperty(obj,'a',{
 get() {
  return 'gg';
 },
 set(value) {
  obj.a = value;
 }
})

解析: 为什么会出现堆溢栈呢 ? 我们在调用 obj.a = 'ff' 的时候,触发了set()方法,从而执行了obj.a = value,又给obj.a进行了赋值,调用set()方法,进入了死循环。

总结: 所以我们在使用Object.defineProperty()的时候,都是通过一个私有变量或者一个局部变量来实现对象的属性的赋值和设置。

// 局部变量,以一个变量为躯壳,设置返回值。
const obj = {}
{
 let bValue;
 Object.defineProperty(obj,'a',{
  get(){
   return bValue
  },
  set(value) {
   bValue = value;
  }
})
}
// 私有变量
const obj = {
 _data: {
  a: null
 }
}
Object.defineProperty(obj,'a', {
 get() {
  return obj._data.a
 },
 set(value) {
  obj._data.a = value
 }
})

总结: Vue中进行双向绑定就是通过私有变量data实现的。是不是和Vue的结构很相似。

实现Vue的双向绑定

  • 实现改变元素的值的时候,dom进行相应的更新数据。
  • dom的值进行更新的时候,元素的值同时也改变。

html部分

<div class="forms">
 <span>姓名</span> <input type='text' name="name">
 <span>年龄</span> <input type='text' name="age">
</div>

js部分

// 改变input的值得同时obj的值改变
const obj = {
 _data: {
  name: null,
  age: null
 }
}
const nameInput = document.querySelector('input[name]')
nameInput.addEventListener('input', (e) => {
  obj._data.name = e.target.value;
})
Object.definePeoperty(obj,'a',{
 get() {
  return obj._data.name
 },
 set(value) {
  nameInput.value = value;
  obj._data.name = value;
 }
})

// 简化
function bind(obj,dom) {
 let name = dom.getAttribute('name');
 Object.defineProperty(obj,name,{
  get() {
   return obj._data[name]
  },
  set(value) {
   dom.value = value;
   obj._data[name] = value;
  }
 })
 dom.addEventListener('input', (e) => {
  obj._data[name] = e.target.value;
 })
}
bind(obj,document.querySelector('input[name=name]'))
bind(obj,document.querySelector('input[name=age]'))

Vue的MVVM实现方法

缺点: 必须要事先的绑定dom。是不是和Vue里面的很想,必须事先申明data中的数据,如果需要额外的添加数据的时候,必须通过Vue.set()来申明。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
js原生态函数中使用jQuery中的 $(this)无效的解决方法
May 25 Javascript
js Event对象的5种坐标
Sep 12 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JS对象与json字符串格式转换实例
Oct 28 Javascript
Backbone.js框架中简单的View视图编写学习笔记
Feb 14 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
AJAX实现瀑布流触发分页与分页触发瀑布流的方法
May 23 Javascript
浅谈JavaScript的内置对象和浏览器对象
Jun 03 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
jQuery EasyUI Accordion可伸缩面板组件使用详解
Feb 28 Javascript
javascript代码简写的几种常用方式汇总
Aug 23 Javascript
利用JS制作万年历的方法
Aug 16 #Javascript
原生JavaScript来实现对dom元素class的操作方法(推荐)
Aug 16 #Javascript
React Native 集成jpush-react-native的示例代码
Aug 16 #Javascript
jQuery实现全选、反选和不选功能
Aug 16 #jQuery
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 #Javascript
微信小程序删除处理详解
Aug 16 #Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 #Javascript
You might like
转生史莱姆:萌王第一次撸串开心到飞起,哥布塔撸串却神似界王神
2018/11/30 日漫
解析php类的注册与自动加载
2013/07/05 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
PHP入门教程之操作符与控制结构流程详解
2016/09/09 PHP
Laravel 5.1 on SAE环境开发教程【附项目demo源码】
2016/10/09 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
Prototype Function对象 学习
2009/07/12 Javascript
导航跟随滚动条置顶移动示例代码
2013/09/11 Javascript
Nodejs从有门道无门菜鸟起飞必看教程
2016/07/20 NodeJs
Vue.js双向绑定实现原理详解
2016/12/22 Javascript
web前端vue实现插值文本和输出原始html
2018/01/19 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
2019/02/27 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
OpenLayers3实现地图显示功能
2020/09/25 Javascript
使用Python的urllib和urllib2模块制作爬虫的实例教程
2016/01/20 Python
Python中创建字典的几种方法总结(推荐)
2017/04/27 Python
Python在for循环中更改list值的方法【推荐】
2018/08/17 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python Django 反向访问器的外键冲突解决
2020/05/20 Python
python实现图片素描效果
2020/09/26 Python
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
希腊香水和化妆品购物网站:Parfimo.gr
2019/10/03 全球购物
大二自我鉴定范文
2013/10/05 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
员工安全生产承诺书
2014/05/22 职场文书
小学教师个人工作总结2015
2015/04/20 职场文书
海上钢琴师观后感
2015/06/03 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
2015中学教学工作总结
2015/07/22 职场文书
2016寒假社会实践心得体会范文
2015/10/09 职场文书
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers