data为long 怎么设置vue_vue基础之data
使用
调用data
onLoad(option) {
_self = this;
_self.$data.xxxx = "te";
}
绑定节点
元素~~~~
方法
methods: {
tabSelect(e) {
this.TabCur = e.currentTarget.dataset.id;
},
}
双向绑定原理
https://www.cnblogs.com/wangjiachen666/p/9883916.html
原理
Vue内部通过Object.defineProperty方法属性拦截的方式,把data对象里每个数据的读写转化成getter/setter,当数据变化时通知视图更新。
也就是说:
输入框内容变化时,data 中的数据同步变化。即 view => model 的变化。
data 中的数据变化时,文本节点的内容同步变化。即 model => view 的变化。
使数据对象变得“可观测”
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。
依赖收集
完成了数据的'可观测',即我们知道了数据在什么时候被读或写了,那么,我们就可以在数据被读或写的时候通知那些依赖该数据的视图更新了,为了方便,我们需要先将所有依赖收集起来,一旦数据发生变化,就统一通知更新。其实,这就是典型的“发布订阅者”模式,数据变化为“发布者”,依赖对象为“订阅者”。
订阅者Watcher
订阅者Watcher 是一个 类,在它的构造函数中,定义了一些属性:
vm:一个Vue的实例对象;
exp:是node节点的v-model或v-on:click等指令的属性值。如v-model="name",exp就是name;
cb:是Watcher绑定的更新函数;
总结
实现数据的双向绑定,首先要对数据进行劫持监听,所以我们需要设置一个监听器Observer,用来监听所有属性。如果属性发上变化了,就需要告诉订阅者Watcher看是否需要更新。因为订阅者是有很多个,所以我们需要有一个消息订阅器Dep来专门收集这些订阅者,然后在监听器Observer和订阅者Watcher之间进行统一管理的。
代码
index.html
Document
function myVue (data, el, exp) {
this.data = data;
observable(data); //将数据变的可观测
el.innerHTML = this.data[exp]; // 初始化模板数据的值
new Watcher(this, exp, function (value) {
el.innerHTML = value;
});
return this;
}
var ele = document.querySelector('#name');
var input = document.querySelector('input');
var myVue = new myVue({
name: 'hello world'
}, ele, 'name');
//改变输入框内容
input.oninput = function (e) {
myVue.data.name = e.target.value
}
//改变data内容
function changeInput(){
myVue.data.name = "难凉热血"
}
observer.js
/**
* 把一个对象的每一项都转化成可观测对象
* @param { Object } obj 对象
*/
function observable (obj) {
if (!obj || typeof obj !== 'object') {
return;
}
let keys = Object.keys(obj);
keys.forEach((key) =>{
defineReactive(obj,key,obj[key])
})
return obj;
}
/**
* 使一个对象转化成可观测对象
* @param { Object } obj 对象
* @param { String } key 对象的key
* @param { Any } val 对象的某个key的值
*/
function defineReactive (obj,key,val) {
let dep = new Dep();
Object.defineProperty(obj, key, {
get(){
dep.depend();
console.log(`${key}属性被读取了`);
return val;
},
set(newVal){
val = newVal;
console.log(`${key}属性被修改了`);
dep.notify() //数据变化通知所有订阅者
}
})
}
class Dep {
constructor(){
this.subs = []
}
//增加订阅者
addSub(sub){
this.subs.push(sub);
}
//判断是否增加订阅者
depend () {
if (Dep.target) {
this.addSub(Dep.target)
}
}
//通知订阅者更新
notify(){
this.subs.forEach((sub) =>{
sub.update()
})
}
}
Dep.target = null;
watcher.js
class Watcher {
constructor(vm,exp,cb){
this.vm = vm;
this.exp = exp;
this.cb = cb;
this.value = this.get(); // 将自己添加到订阅器的操作
}
get(){
Dep.target = this; // 缓存自己
let value = this.vm.data[this.exp] // 强制执行监听器里的get函数
Dep.target = null; // 释放自己
return value;
}
update(){
let value = this.vm.data[this.exp];
let oldVal = this.value;
if (value !== oldVal) {
this.value = value;
this.cb.call(this.vm, value, oldVal);
}
}
}
data为long 怎么设置vue_vue基础之data相关推荐
- linux网络设置与基础服务命令(ifconfig、hostname、route、netstat、ss、ping、traceroute、nslookup、route)
文章目录 linux网络设置与基础服务 前言 查看网络配置 使用ifconfig命令查看网络接口地址 查看指定网络接口信息 使用 hostname命令查看当前主机名称 使用route命令查看路由表条目 ...
- jQuery源码解析(1)—— jq基础、data缓存系统
闲话 jquery 的源码已经到了1.12.0 版本,据官网说1版本和2版本若无意外将不再更新,3版本将做一个架构上大的调整.但估计能兼容IE6-8的,也许这已经是最后的样子了. 我学习jq的时间很短 ...
- R语言数据处理——基础篇 data.frame基本操作
文章目录 R语言数据处理--基础篇 data.frame基本操作 data.frame的创建 数据访问.条件筛选与删除 数据访问 数据筛选 删除 使用`gather()`进行data.frame数据格 ...
- [SpringBoot2]ajax函数中data参数的数据设置方式
ajax函数中data参数的数据设置方式:
- python3-xlwt-Excel设置表格基础(字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划线 斜体字 单元格对齐方式 自动换行 删除线 超链接 插入公式)
文章目录 引入xlwt和创建workboos对象 初始化样式和创建设置字体,赋值给style 保存文件 自定义样式 字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划 ...
- GXT之旅:第四章:Data与Components(4)——远程数据(remote data)
使用remote data stores的数据来源不单单可以从client-side获得(就是从Registry里获得),也可以通过调用远程数据来获得.对于远程数据的加载和处理工作,GXT已经提供了轻 ...
- data的值 如何初始化vue_vue 创建一个基础实例【02】
学习要点:1.框架理解 2.options 3.生命周期 本节课我们来开始学习 Vue 声明对象,并且理解传递选项对象的方法. 一.框架理解 1. 所有的前端框架基本都是为了简化:模版渲染 ...
- openlayers map获取全部feature_tf2.0基础-tf.data与tf.feature_column
7.2.1 tf.data 使用 tf.data API 可以轻松处理大量数据.不同的数据格式以及复杂的转换.tf.data API 在 TensorFlow 中引入了两个新的抽象类: tf.data ...
- SAP WM初阶之移动类型设置里的Additional Data?
1, 在WM的移动类型设置了,有一个栏位叫做AddlData的,如下图示: 大多数情况下,这个栏位都是空(Do not transmit screen window).如果将其改为X,会是什么效果? ...
最新文章
- iOS安全攻防(八)Thoes的Logos简介
- Qt for Android (Alpha) 发布
- index 0 does not match the shape of the indexed tensor [8, 8, 4] at index 0
- Eigen教程1 - 基础
- 【安全】免密登陆SQLSERVER 之 Token 窃取
- 前端学习(2363):数据缓存
- python 颜色_Python可视化|matplotlib07自带颜色条Colormap(三)
- 临时设置mysql数据库最大连接数,重启后需重新设置
- 浏览器兼容:改写window.showModalDialog
- Java学习之「Spring + AspectJ 」
- UCOS操作系统——创建与删除任务(三)
- 有盘和无盘服务器,网吧系统的终极解决之道:无盘系统+有盘(转)
- vs2013 update5离线升级包下载地址
- java注册功能实现
- html微信悬浮窗,微信悬浮窗怎么设置(微信浮窗设置的两个小技巧)
- php的cmf框架哪个比较好,不要用这个CMF ThinkCMF内容管理框架,做最简约的ThinkPHP开源软件...
- 文献阅读(10)BNN
- org.tigris.subversion.javahl.ClientException: Attempted to lock an already-locke
- eclipse osgi_Eclipse通过提议的OSGi容器Kura支持M2M产品组合
- 告诉你为什么数据要取对数
热门文章
- xshell 6 连接debian系统拒绝了密码_Xshell中操作Linux的常用命令,你知道几个?
- VMware中ubuntu虚拟机与windows的端口映射,共享一个IP地址
- Hadoop学习之整体介绍及环境搭建
- php获取表单信息的代码_PHP获取HTML文件名表单数据等
- 线性规划 - 用单纯形法解决整数规划问题 - (Matlab、Lingo建模)
- php umount强制,php foreach 參數強制類型轉換的問題 | 學步園
- blob数据类型_MySQL的数据类型
- 吴恩达发起新型竞赛范式!模型固定,只调数据?!
- 技术动态 | 多模态知识图谱
- 咨询笔记:麦肯锡7步成诗