window跟vue变量互相绑定
js实现变量监听
//定义一个对象,挂载到window下,后续在任何模块中,给这个对象的show属性赋值,都将触发set对应的代码,我这么写主要是为了解决vue子组件向父组件传值的问题
window.mlistener={}
let _this = this
Object.defineProperty(mlistener,'show',{
set: function(val){
_this.showHeader = val
_this.showFoot = val
}
})
window变量触发vue渲染
可保持window变量,跟vue用到的变量同步更新
//将window赋值给vue变量
data() {
return {
tableH: ,
isShow: true,
filterText: '',
window: window,
tree_data: [],
expendKeys: [],
defaultProps: {
children: 'children',
label: 'label'
}
} //用法
{{window.getTest()}} //getTest()
window.getTest = ()=>{
console.dir(this.fullScreen)
return this.fullScreen
}
结果
参考
window跟vue变量互相绑定的更多相关文章
- Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)
Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...
- vue的双向绑定原理及实现
前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...
- 探讨vue的双向绑定原理及实现
1.vue的实现原理 vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属 ...
- 【Vue】vue的双向绑定原理及实现
vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西. 代码: var ...
- [js高手之路] vue系列教程 - vue的事件绑定与方法(2)
一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...
- 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分
最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...
- Vue数据双向绑定原理及简单实现
嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...
- vue数据双向绑定原理
vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...
- 揭密 Vue 的双向绑定
Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...
随机推荐
- 【hjmmm网络流24题补全计划】
本文食用方式 按ABC--分层叙述思路 可以看完一步有思路后自行思考 飞行员配对问题 题目链接 这可能是24题里最水的一道吧... 很显然分成两个集合 左外籍飞行员 右皇家飞行员 跑二分图最大匹配 输 ...
- [luogu3157][bzoj3295][CQOI2011]动态逆序对【cdq分治+树状数组】
题目描述 对于序列A,它的逆序对数定义为满足i<j,且Ai>Aj的数对(i,j)的个数.给1到n的一个排列,按照某种顺序依次删除m个元素,你的任务是在每次删除一个元素之前统计整个序列的逆序 ...
- Codeforces | CF1010C 【Border】
这道题大致题意是给定\(n\)个十进制整数和一个进制数\(k\),可以用无数多个给定的十进制整数,问这些十进制整数的和在模k意义下有多少种不同的结果(\(k\)进制下整数的最后一位就是这个数模\(k\ ...
- css元素溢出
当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置. overflow的设置项: 1.visible 默认值.内容不会被修剪,会呈现在元 ...
- [2017-7-25]Android Learning Day3
最近真的有点迷茫,感觉没有一个完整的教学体系很难进行下去,有的都是自己瞎捉摸,就跟以前ACM的时候一样,动不动就“这就是一道,水题暴力就行了”.“我们枚举一下所有的状态,找一下规律就行了”,mmp哟. ...
- C++类相关
本文打算通过一些小例子来说明几个关键的知识点. 一:成员函数相关 #include <iostream> using namespace std; class D { public: vo ...
- 使用zabbix监控mariadb性能状态
0x01 前言 zabbix内置Mysql的监控模版,因为mariadb和Mysql两者的相关性,所以这个模版也能用在mariadb services上. 0x02 Mysql 首先要在mariadb ...
- CentOS6 部署 Tomcat
安装java软件 yum install java-1.8.0* -y 设置开机自启,在/etc/init.d/下新建 tomcat 写入以下内容: #!/bin/bash # /etc/rc.d/i ...
- Codeforces1076D. Edge Deletion(最短路树+bfs)
题目链接:http://codeforces.com/contest/1076/problem/D 题目大意: 一个图N个点M条双向边.设各点到点1的距离为di,保证满足条件删除M-K条边之后使得到点 ...
- Python学习day3 数据类型Ⅰ(str,int,bool)
day3 数据类型 @上节内容补充 每周一个思维导图-xmind.exe in / not in #示例:(是否包含敏感字符)while True: text = input('请输入你要说的 ...