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 ...
随机推荐
- Linux 安装CentOS7操作系统
作者:小啊博 QQ:762641008 转载请声明:https://www.cnblogs.com/-bobo 1.安装操作系统 开启虚拟机后会出现以下界面 Install CentOS 7 安装Ce ...
- 对于java的Sting.intern()的一些注意
今天翻看书时遇到了这样一个问题,对于String.intern()方法又有了一些认识和看法.首先我们看它的api 大意就是intern()方法会在常量池中记录首次出现的实例引用,但是在jdk1.6中却 ...
- selenium实现百度图片爬取
因为是百度图片是瀑布流ajax异步上传的数据,所以这里用到抓包工具来抓取链接(fiddler) 好了直接上代码, from selenium import webdriver from seleniu ...
- CNN之yolo目标检测算法笔记
本文并不是详细介绍yolo工作原理以及改进发展的文章,只用做作者本人回想与提纲. 1.yolo是什么 输入一张图片,输出图片中检测到的目标和位置(目标的边框) yolo名字含义:you only lo ...
- git clone remote: HTTP Basic: Access denied
git clone 项目失败,报下面的错误信息: $ git clone http://192.168.0.141/xxxx.git Cloning into 'appEnterprise'... r ...
- git 工作流中的 Sourcetree 和命令行操作对比
git 工作流操作 1.初始化本地仓库文件夹 终端进入项目文件夹 git init 隐藏文件夹中有 .git 文件夹则初始化成功 2.git 查看仓库状态 这里以新建一个 demo.txt 为例 ① ...
- 强大得分布式项目管理工具Git
---恢复内容开始--- 强大的分布式管理工具-Git(一) 前言:最近忙着写项目,在期间呢,用的是git管理,由于一个项目的管理是很重要得,所以整理了一篇关于git得博客跟大家分享一下.大家都知道, ...
- MySQL 配置环境
MySQL 显示 Can't connect to MySQL server on 'localhost' (10061)怎么解决 在cmd中配置启动sql后,找不到密码.然后怎么也没办法弄,不知道怎 ...
- 选择高性能NoSQL数据库的5个步骤
来源:Redislabs作者:Shabih Syed 翻译:Kevin (公众号:中间件小哥) 构建在线和运营应用程序的开发团队越来越多地选择一类新的数据库来支持它们.它被称为“NoSQL”或“Not ...
- Switch-case语句的应用
/** switch语句有关规则 • switch(表达式)中表达式的值必须是下述几种类型之一:byte,short, char,int,枚举 (jdk 5.0),String (jdk 7.0 ...