利用js实现Vue2.0中数据的双向绑定功能

Object.defineProperty了解

语法:

Object.defineProperty(obj, prop, descriptor)

  • obj  要定义属性的对象。
  • prop 要定义或修改的属性的名称
  • descriptor 要定义或修改的属性描述符

obj和prop很好理解 比如我们定义一个变量为

const o = {
    name:'xbhog'
}

其中obj指的就是o,prop指的就是o.name 下面我们主要看看descriptor

descriptor  目标对象属性的一些特征(是一个对象)
   descriptor  下有6个参数
 参数1:
     value:属性值
 参数2:
   writable:对象属性值是否可以被修改  true允许  false不允许
 参数3:
   configurable:对象属性是否可以被删除 true允许  false不允许
 参数4:
   enumerable:对象属性是否可被枚举
 参数5:
     get():是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
 参数6:
     set():是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值

注意:描述符里的value属性 writable属性 与 get属性 set属性是互斥的关系,只能存在一个

了解了前置知识,我们来实现Vue中的v-model的双向绑定

先看实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通过js实现数据的双向绑定</title>
</head>
<body>

<input type="text"/><br>
<h1>你好:<span>更新数据</span></h1>

<!-- 通过js实现数据的双向绑定 -->
<script>
	// 方法返回文档中与指定选择器或选择器组匹配的第一个 HTMLElement对象
    var ipt =document.querySelector('input');
    var p = document.querySelector('span');

    var data = {name:""};
	/*
	    oninput 事件在用户输入时触发。
	    该事件在 <input> 或 <textarea> 元素的值发生改变时触发。
	 */
    ipt.oninput = function(){
	// 将ipt.value中的值传给data.name的value
        data.name = ipt.value;
    }
    //劫持ipt.value
    Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
        return ipt.value;  //当访问的时候会调用get方法
    },
    // 数据劫持
	//name:value
    set(value) {
        p.innerHTML = value;
        ipt.value = value;
    }
})
</script>
</body>
</html>

首先我们通过document.querySelector获取input以及span标签的Html对象,在定义一个data对象,属性name先为空。

使用事件监听oninput来监听用户输入(该事件在 <input> 或 <textarea> 元素的值发生改变时触发)。

将ipt.value中的值传给data.name的value;

data.name = ipt.value;

利用Object.defineProperty劫持用户输入的数据。

  • get 属性:是个函数,当访问该属性的时候,函数自动调用,函数返回值就是该属性的值
  • set 属性:是个函数,当修改该属性的时候,函数自动调用,函数有且只有一个参数,赋值的新值
Object.defineProperty(data,"name",{
    // 数据订阅
    get(){
       return ipt.value;  //当访问data.name时候会调用get方法,调用ipt.value获取当前value的值
    },
    // 数据劫持
    set(value) {   //设置数据的时候会自动调用set方法
        p.innerHTML = value;
        ipt.value = value;
    }

看效果比较明显:

set方法:

get方法:

最后实现效果:

参考资料:

  • https://blog.csdn.net/Doulvme/article/details/107978012
  • https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
  • https://www.jianshu.com/p/6f589af16ad4
  • //www.jb51.net/article/217657.htm (推荐)

总结

到此这篇关于利用js实现Vue2.0中数据双向绑定功能的文章就介绍到这了,更多相关js实现Vue2双向绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2021-07-16

vue2.0数据双向绑定与表单bootstrap+vue组件

最近一直在用vue,觉得确实是好用. 一,拿数据的双向绑定来说吧 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo1</title> </head> <body> <div id="app"> {{ name }} <input typ

解析Vue2.0双向绑定实现原理

一.实现双向绑定的做法 前端MVVM最令人激动的就是双向绑定机制了,实现双向数据绑定的做法大致有如下三种: 1.发布者-订阅者模式(backbone.js) 思路:使用自定义的data属性在HTML代码中指明绑定.所有绑定起来的JavaScript对象以及DOM元素都将"订阅"一个发布者对象.任何时候如果JavaScript对象或者一个HTML输入字段被侦测到发生了变化,我们将代理事件到发布者-订阅者模式,这会反过来将变化广播并传播到所有绑定的对象和元素. 2.脏值检查(angular

Vue2.0实现组件数据的双向绑定问题

通过上一节的学习,我们了解到了在Vue的组件中数据传递: prop 向下传递,事件向上传递 .意思是父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息.但Vue中, props 是单向数据绑定,虽然在Vue 1.0版本中,通过 .sync 能实现双向数据绑定.但 .sync 在几个版本中被移除,尽管在2.3版本重新引入 .sync 修饰符,可这次引入只是作为一个编译时的语法糖存在.如果直接使用 .sync 修饰符来做双向数据绑定,会报警告信息.那么我们如何在组件中实现双向数据

手动实现vue2.0的双向数据绑定原理详解

一句话概括:数据劫持(Object.defineProperty)+发布订阅模式 双向数据绑定有三大核心模块(dep .observer.watcher),它们之间是怎么连接的,下面来一一介绍. 为了大家更好的理解双向数据绑定原理以及它们之间是如何实现关联的,先带领大家复习一下发布订阅模式. 一.首先了解什么是发布订阅模式 直接上代码: 一个简单的发布订阅模式,帮助大家更好的理解双向数据绑定原理 //发布订阅模式 function Dep() { this.subs = []//收集依赖(也就是

Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案

在项目中开始使用vue2来构建项目了,跟 vue1 很大的一处不同在于2 取消了props 的双向绑定,改成只能从父级传到子级的单向数据流,初衷当然是好的,为了避免双向绑定在项目中容易造成的数据混乱. 解决方案一 然后开始参考网上和github上的方案等等,发现很多解决方案是这样的 用data对象中创建一个props属性的副本 watch props属性 赋予data副本 来同步组件外对props的修改 watch data副本,emit一个函数 通知到组件外 这里以最常见的 modal为例子:

Vue2.0/3.0双向数据绑定的实现原理详解

Vue2.0/3.0 双向数据绑定的实现原理 双向数据绑定简意 即数据的改变能让页面重新渲染 Vue2.0 ES5的原理: Object.defineProperty 对数据进行拦截 简单小案例 <body> 姓名: <span id="name"></span> <br /> <input type="text" id="inputName" /> </body> 改变in

Spring MVC数据绑定概述及原理详解

数据绑定概述 在执行程序时,Spring MVC根据客户端请求参数的不同,将请求消息中的信息以一定的方式转换并绑定到控制器类的方法参数中. 这种将请求消息数据与后台方法参数建立连接的过程就是 Spring MVC中的数据绑定. 在数据绑定过程中,Spring MVC框架会通过数据绑定组件(DataBinder)将请求参数串的内容进行类型转换,然后将转换后的值赋给控制器类中方法的形参,这样后台方法就可以正确绑定并获取客户端请求携带的参数.具体的信息处理过程的步骤如下. (1)Spring MVC将

vue3.0中的双向数据绑定方法及优缺点

熟悉vue的人都知道在vue2.x之前都是使用object.defineProperty来实现双向数据绑定的 而在vue3.0中这个方法被取代了 1. 为什么要替换Object.defineProperty 替换不是因为不好,是因为有更好的方法使用效率更高 Object.defineProperty的缺点: 1. 在Vue中,Object.defineProperty无法监控到数组下标的变化, 导致直接通过数组的下标给数组设置值,不能实时响应. push() pop() shift() unsh

vue2.0项目实现路由跳转的方法详解

一.安装 1.安装路由vue-router: npm install vue-router vue项目的依赖文件node_modules存在vue-router依赖,说明安装成功 2.vue项目引入vue-ruoter: 二.应用 1.路径配置(页面跳转): 方法一:如果切换的页面不多,可以直接在main.js文件内配置. 方法二:如果切换的页面较多,可以建一个专门用于路由的js文件,里面配置路径. 1)router.js配置文件 2)main.js里引入router.js路由文件 2.组件里调

Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)

我在整理javascript高级程序设计的笔记的时候看到面向对象设计那章,讲到对象属性分为数据属性和访问器属性,我们平时用的js对象90%以上都只是用到数据属性;我们向来讲解下数据属性和访问器属性到底是什么? 数据属性:数据属性包含一个数据值的位置,在这个位置可以读取和写入值. 访问器属性:访问器属性不包含数据值;他们包含一对getter和setter函数在读取访问器属性时,会调用getter函数,这个函数负责返回有效的值,在写入访问器属性时,会调用setter函数并传入新值. 这里介绍的重点是

CentOS 7.0下使用yum安装mysql的方法详解

CentOS7默认数据库是mariadb,配置等用着不习惯,因此决定改成mysql,但是CentOS7的yum源中默认好像是没有mysql的.为了解决这个问题,我们要先下载mysql的repo源. 1.下载mysql的repo源 $ wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm 2.安装mysql-community-release-el7-5.noarch.rpm包 $ sudo rpm -ivh mys

在javascript中,null>=0 为真,null==0却为假,null的值详解

在javascript中,null>=0 为真,null==0却为假,null的值详解 1.前言 今天看见朋友们在讨论一个问题,说 null 到底和 0 是不是相等的. 听到这里,自己赶紧去写个 Demo 试一下. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MR_LP:3206064928</tit

mysql-8.0.16 winx64的最新安装教程图文详解

最近刚学习数据库,首先是了解数据库是什么,数据库.数据表的基本操作,这就面临了一个问题,mysql的安装,我这里下载的是64位的,基于Windows的,以下是在我电脑上的安装过程,希望可以帮助到大家. 1.在mysql的官网上去下载,链接是 https://dev.mysql.com/downloads/mysql/ ,如图1-1,1-2所示,点击downloads,然后会弹出图1-3,点击No thanks,jast start my download.即可,当然你也可以注册一下. 图 1-1

MYSQL8.0.13免安装版配置教程实例详解

一.下载,本人以8.0为例 下载地址:https://dev.mysql.com/downloads/mysql/ 二.解压到某个目录,例如:D:/mysql/mysql-8.0.13-winx64 三.配置环境变量 1.新建一个变量:MYSQL_HOME 变量值:D:/mysql/mysql-8.0.13-winx64 2.修改path变量 添加一条记录:%MYSQL_HOME%/bin 四.在D:/mysql/mysql-8.0.13-winx64目录下创建my.ini文件 [mysqld]

android 9.0 launcher3 去掉抽屉式显示所有 app(代码详解)

效果图 修改思路 1.增加全局控制变量 sys.launcher3.is_full_app,用来动态切换 2.增加两套布局,对应有抽屉和无抽屉 3.去除 allAppsButton 4.将 AllAppsContainerView 中的图标加载到 Workspace 5.新安装的 app 自动添加图标到 Workspace 6.替换 Workspace 图标长按删除选项为取消 7.屏蔽上拉显示抽屉页面手势 8.修改页面指示线为圆点 上代码 1.增加全局控制变量 sys.launcher3.is_

Vue双向数据绑定(MVVM)的原理

MVVM MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性