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 相关文章推荐
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
Feb 22 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
Jquery EasyUI实现treegrid上显示checkbox并取选定值的方法
Apr 29 Javascript
js只执行1次的函数示例
Jul 20 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
原生JavaScript实现Tooltip浮动提示框特效
Mar 07 Javascript
Vue实现active点击切换方法
Mar 16 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
element-ui 时间选择器限制范围的实现(随动)
Jan 09 Javascript
详解可以用在VS Code中的正则表达式小技巧
May 14 Javascript
原生javascript如何实现共享onload事件
Jul 03 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
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
win7 64位系统 配置php最新版开发环境(php+Apache+mysql)
2014/08/15 PHP
php有道翻译api调用方法实例
2014/12/22 PHP
cakephp打印sql语句的方法
2015/02/13 PHP
深入理解PHP类的自动载入机制
2016/09/16 PHP
PHP中OpenSSL加密问题整理
2017/12/14 PHP
用JavaScript获取网页中的js、css、Flash等文件
2006/12/20 Javascript
JSON 编辑器实现代码
2009/12/06 Javascript
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js 窗口抖动示例
2013/09/04 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
浅析使用BootStrap TreeView插件实现灵活配置快递模板
2016/11/28 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
2017/06/26 Javascript
vue-cli webpack 引入jquery的方法
2018/01/10 jQuery
解决vue this.$forceUpdate() 处理页面刷新问题(v-for循环值刷新等)
2018/07/26 Javascript
Vue 配合eiement动态路由,权限验证的方法
2018/09/26 Javascript
layui.tree组件的使用以及搜索节点功能的实现
2019/09/26 Javascript
在elementui中Notification组件添加点击事件实例
2020/11/11 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
[01:36]极致酷炫!TI9典藏宝瓶+撼地者至宝展示
2019/06/11 DOTA
Python卸载模块的方法汇总
2016/06/07 Python
Python如何调用外部系统命令
2019/08/07 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
CSS3 transforms应用于背景图像的解决方法
2019/04/16 HTML / CSS
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
乌克兰在线商店的价格比较:Price.ua
2019/07/26 全球购物
C#里面如何倒序排列一个数组的元素?
2013/06/21 面试题
Linux的文件类型
2012/03/07 面试题
班级年度安全计划书
2014/05/01 职场文书
幼师中班个人总结
2015/02/12 职场文书
初三毕业感言
2015/07/31 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
CSS3新特性详解(五):多列columns column-count和flex布局
2021/04/30 HTML / CSS
一文了解MYSQL三大范式和表约束
2022/04/03 MySQL