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
}

结果

参考

js监听一个变量的变化

window跟vue变量互相绑定的更多相关文章

  1. Vue.js双向绑定的实现原理和模板引擎实现原理(##########################################)

    Vue.js双向绑定的实现原理 解析 神奇的 Object.defineProperty 这个方法了不起啊..vue.js和avalon.js 都是通过它实现双向绑定的..而且Object.obser ...

  2. vue的双向绑定原理及实现

    前言 使用vue也好有一段时间了,虽然对其双向绑定原理也有了解个大概,但也没好好探究下其原理实现,所以这次特意花了几晚时间查阅资料和阅读相关源码,自己也实现一个简单版vue的双向绑定版本,先上个成果图 ...

  3. 探讨vue的双向绑定原理及实现

    1.vue的实现原理 vue的双向绑定是由数据劫持结合发布者-订阅者模式实现的,那么什么是数据劫持?vue是如何进行数据劫持的?说白了就是通过Object.defineProperty()来劫持对象属 ...

  4. 【Vue】vue的双向绑定原理及实现

    vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的,那么vue是如果进行数据劫持的,我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西. 代码: var ...

  5. [js高手之路] vue系列教程 - vue的事件绑定与方法(2)

    一.在vue中,绑定事件,用v-on:事件类型, 如绑定一个点击事件, 我们可以这样子做 window.onload = function () { var c = new Vue({ el : 'b ...

  6. 西安电话面试:谈谈Vue数据双向绑定原理,看看你的回答能打几分

    最近我参加了一次来自西安的电话面试(第二轮,技术面),是大厂还是小作坊我在这里按下不表,先来说说这次电面给我留下印象较深的几道面试题,这次先来谈谈Vue的数据双向绑定原理. 情景再现: 当我手机铃声响 ...

  7. Vue数据双向绑定原理及简单实现

    嘿,Goodgirl and GoodBoy,点进来了就看完点个赞再go. Vue这个框架就不简单介绍了,它最大的特性就是数据的双向绑定以及虚拟dom.核心就是用数据来驱动视图层的改变.先看一段代码. ...

  8. vue数据双向绑定原理

    vue的数据双向绑定的小例子: .html <!DOCTYPE html> <html> <head> <meta charset=utf-> < ...

  9. 揭密 Vue 的双向绑定

    Vue 中需要输入什么内容的时候,自然会想到使用 <input v-model="xxx" /> 的方式来实现双向绑定.下面是一个最简单的示例 剖析Vue原理& ...

随机推荐

  1. MT【276】正切的半角公式

    若$\Delta ABC$满足:$\tan\dfrac{A}{2}\cdot\tan\dfrac{C}{2}=\dfrac{1}{3},b=\dfrac{4}{3}a$,则$\sin B=$_____ ...

  2. Linux 通过Shell 查找问题进程 [转]

    背景介绍: 最近公司服务器不太稳定,总是在凌晨某个时段突发高负载情况,因为客观环境比较复杂,所以很难猜测出到底是哪个进程出现了问题,加之故障发生时,通常我在睡觉,等我被报警短信吵醒,通过公司 VPN ...

  3. Android ListView item 点击事件失效问题的解决

    关于ListView点击无效,item无法相应点击事件的问题,网上有很多, 大致可分为俩种情况, 一种是 item中存在 ImageButton 等可以点击的组件,这会抢先获得ListView的焦点. ...

  4. 【BZOJ4771】七彩树(主席树)

    [BZOJ4771]七彩树(主席树) 题面 BZOJ 题解 如果没有深度限制,每次只询问子树内的颜色个数,除了树套树\(dfs\)序加前驱或者后继强行二维数点之外,还有这样一种做法: 把所有相同颜色的 ...

  5. nginx+腾讯云免费ssl证书+阿里云ECS实现Https配置

    1. 申请SSL证书: 首先我们需要到腾讯云那边申请一个ssl证书,对于个人博客类型的,建议采用免费版本,土豪除外 申请地址:https://console.cloud.tencent.com/ssl ...

  6. RabbitMQ入门-路由-有选择的接受消息

    比如一个日志系统,之前的处理方式呢,是各种类型(info,error,warning)的消息都发给订阅者,可是实际情况上不一定都需要.可能A需要error,其他的都不需要.那么就引入了今天的处理方式- ...

  7. noi.openjudge 1.13.15

    http://noi.openjudge.cn/ch0113/15/ 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一个长度为N的整数序列 (不多于128个整数),每个整数的范 ...

  8. logistics回归简单应用——梯度下降,梯度上升,牛顿算法(一)

    警告:本文为小白入门学习笔记 由于之前写过详细的过程,所以接下来就简单描述,主要写实现中遇到的问题. 数据集是关于80人两门成绩来区分能否入学: 数据集: http://openclassroom.s ...

  9. ZooKeeper集群详细安装教程

    1. 安装JDK 1.1 官网下载JDK 进入网址<a href="http://www.oracle.com/technetwork/java/javase/downloads/jd ...

  10. ajax传值修改数据

    主界面代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...