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. 【hihocoder 1628】K-Dimensional Foil(线性代数)

    hihocoder 1627 The 2017 ACM-ICPC Asia Beijing Regional Contest 北京区域赛 B.K-Dimensional Foil 题意 给定N个点的前 ...

  2. 自学Python之路-Python并发编程+数据库+前端

    自学Python之路-Python并发编程+数据库+前端 自学Python之路[第一回]:1.11.2 1.3

  3. python服务器文件上传下载+GUI【tkinter】

    大概就是一个通过应用程序来和服务器打交道的这么一个,小东西 1.GUI 用的是tkinter # -*- coding: UTF-8 -*- from tkinter import * import ...

  4. Balanced Sequence HDU - 6299(杭电多校1 B)

    题目说要n个字符串串内随意组合以后将这些串放在一起,然后求最长的括号匹配的长度,并不要求是连续的 因为不需要是连续的,所以可以先把已经匹配好的括号加入到答案里面去,先把这些删掉,以为并不影响结果,然后 ...

  5. python安装tesseract

    一.最近在学习python爬虫的时候需要用到tesseract,但书上的给的教程对我并不适用,坑了好久天,才终于成功. 二.方法: 1.由于我看的是静谧博主的那本书.他给的教程在python3安装有问 ...

  6. bootstrap学习一

    bootstrap学习 一.css概览: 1.使用HTML5标准,<!DOCTYPE html>. 2.移动设备优先: <meta name="viewport" ...

  7. jsp model1

    一.model1(纯jsp技术): 1.dao:data access object,数据访问对象,即专门对数据库进行操作的类,一般说dao不含业务逻辑. 2.当进行跳转时候,需要用servlet来实 ...

  8. loj6045 价

    题目链接 思路 从源点\(S\)向每种药连一条边权为\(-p+inf\)的边.从每种药向他所需要的药材连一条边权为\(INF\)的边.从每种药材向汇点\(T\)连一条边权为\(inf\)的边. \(I ...

  9. 如何测试连接MsSQL数据库-------UDL文件

    http://www.xinnet.com/service/cjwt/idc/sjk/1360.html 如果您所使用的 SQL Server 数据库连不上,可以通过这个方法进行测试数据库连接. 温馨 ...

  10. E212: Can't open file for writing

    意思是不能保存. 原因是权限不够,普通用户用vi 进行不了保存,需要使用超级用户才可以 命令:sudo su     转换成超级用户 vi hello       打开文件 :wq 即可保存退出