vue的数据双向绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" name="" id="input" value="" />
<h1></h1>
<h3 id="username"></h3>
<h4 id="age"></h4> <script type="text/javascript">
var inputText = document.querySelector('#input')
var h1 = document.querySelector('h1')
var h3 = document.querySelector('#username')
var age = document.querySelector('#age') inputText.oninput = function(){
var value = inputText.value
h1.innerHTML = value;
} var obj = {
// name:'张三',
age:14,
set name(value){
// console.log(value)
this._name = value
h3.innerHTML = this._name
},
get name(){
return this._name
}, } console.log(obj)
//setter,getter//es6,es2015标准
//在给对象属性赋值，或者是获取对象属性的时候，会调用setter、getter两个方法
</script>
</body>
</html>
vue的数据双向绑定的更多相关文章
- Vue的数据双向绑定和Object.defineProperty()
Vue是前端三大框架之一,也被很多人指责抄袭,说他的两个核心功能,一个数据双向绑定,一个组件化分别抄袭angular的数据双向绑定和react的组件化思想,咱们今天就不谈这种大是大非,当然我也没到达那 ...
- 原生js实现 vue的数据双向绑定
原生js实现一个简单的vue的数据双向绑定 vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时 ...
- vue中数据双向绑定的实现原理
vue中最常见的属v-model这个数据双向绑定了,很好奇它是如何实现的呢?尝试着用原生的JS去实现一下. 首先大致学习了解下Object.defineProperty()这个东东吧! * Objec ...
- 【Vue】-- 数据双向绑定的原理 --Object.defineProperty()
Object.defineProperty()方法被许多现代前端框架(如Vue.js,React.js)用于数据双向绑定的实现,当我们在框架Model层设置data时,框架将会通过Object.def ...
- 对象的属性类型 和 VUE的数据双向绑定原理
如[[Configurable]] 被两对儿中括号 括起来的表示 不可直接访问他们 修改属性类型:使用Object.defineProperty() //IE9+ 和标准浏览器 支持 查看属性的 ...
- vue实现数据双向绑定的原理
一.知识准备Object.defineProperty( )方法可以直接在一个对象上定义一个新属性,或者修改一个已经存在的属性,并返回这个对象.Object.defineProperty(obj,pr ...
- 一、vue的数据双向绑定的实现
响应式系统 一.概述 Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图 ...
- vue中数据双向绑定注意点
最近一个vue和element的项目中遇到了一个问题: 动态生成的对象进行双向绑定是失败 直接贴代码: <el-form :model="addClass" :rules=& ...
- Vue的数据双向绑定原理——Object-defineProperty
一.定义 ①方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ②vue.js的双向数据绑定就是通过Object.defineProperty方法实现的,俗称属性拦截 ...
- vue v-model 数据双向绑定（笔记）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- 从一道面试题深入了解java虚拟机内存结构
记得刚大学毕业时,为了应付面试,疯狂的在网上刷JAVA的面试题,很多都靠死记硬背.其中有道面试题,给我的印象非常之深刻,有个大厂的面试官,顺着这道题目,一直往下问,问到java虚拟机的知识,最后把我给 ...
- MySQL数据库忘记密码怎么办？
忘记MySQL数据库密码就进不去数据库,也就无法修改密码,解决方法如下: 1:打开cmd命令符,先关闭正在运行的数据库,输入如下命令: 2:打开mysql.exe和mysqld.exe所在的文件夹,复 ...
- Spring MVC-从零开始-@RequestMapping结合@RequestParam （从HTTP键值对中取值，作用于函数参数）
1.@RequestParam 注解使用的时候可以有一个值,也可以没有值:如果请求参数和处理方法参数的名称一样的话,@RequestParam 注解的 value 这个参数就可省掉了:@Request ...
- Spring MVC-从零开始-view-直接返回页面不传data
1.applicationContext配置 <?xml version="1.0" encoding="UTF-8"?> <beans xm ...
- 算法题解：最大或最小的K个数（海量数据Top K问题）
题目 输入 n 个整数,找出其中最小的 k 个数.例如输入4.5.1.6.2.7.3.8 这8个数字,则最小的4个数字是1.2.3.4. 初窥 这道题最简单的思路莫过于把输入的 n 个整数排序,排序之 ...
- 下载git2.2.1并将git添加到环境变量中
># wget https://github.com/git/git/archive/v2.2.1.tar.gz > # tar zxvf v2.2.1.tar.gz ># cd g ...
- 一个网站完整的SEO优化方案，方法，怎么做seo优化？
SEO优化主要分为站内优化,站外优化.如果非得说一套完整的SEO优化方案,那就是需要4名专业人员:前端人员,内容编辑,网络推广人员,和数据分析人员.那以下就详细介绍这四个岗位各自负责的工作有哪些: 一 ...
- Eclipse的debug按钮介绍（三）
本文链接:https://blog.csdn.net/u011781521/article/details/55000066 http://blog.csdn.net/u010075335/ar ...
- 如何在 Linux 和 windows 启动使用 Dubbo 和 ZK
今天的知识点有 3 个: Linux 下安装.配置 JDK. Windows 下启启动 dubbo 和 zookeeper. Linux 下启动 dubbo 和 zookeeper. 1.Linux ...
- .netCore+Vue 搭建的简捷开发框架 （4）--NetCore 基础 -2
上节中,我们初步的介绍了一下NetCore的一些基础知识,为了控制篇幅(其实也是因为偷懒),我将NetCore 基础分为两部分来写. 0.WebAPI 项目的建立 1..NetCore 项目执行(加载 ...