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原理& ... 
随机推荐
- Codeforces Round #453 (Div. 1) D. Weighting a Tree(构造)
			题意 一个 \(n\) 个点 \(m\) 条边的无向连通图中每个点都有一个权值,现在要求给每条边定一个权值,满足每个点的权值等于所有相连的边权之和,权值可负. 题解 如果图是一棵树,那么方案就是唯一的 ... 
- POJ 1845 Sumdiv(逆元)
			题目链接:Sumdiv 题意:给定两个自然数A,B,定义S为A^B所有的自然因子的和,求出S mod 9901的值. 题解:了解下以下知识点 1.整数的唯一分解定理 任意正整数都有且只有唯一的方式 ... 
- 【php】php算法的一些实现
			1.生成一定范围内的数组,步长可以设置 function range($step = 10, $max = 100){ if ($step < 1 || $step > $max){ re ... 
- HDU5985 Lucky Coins 概率dp
			题意:给你N种硬币,每种硬币有Si个,有Pi 概率朝上,每次抛所有硬币抛起,所有反面的拿掉,问每种硬币成为最后的lucky硬币的概率. 题解:都知道是概率dp,但是模拟赛时思路非常模糊,很纠结,dp[ ... 
- 基于配置文件的redis的主从复制
			redis中主从复制有很多种配置方法: 1. 使用配置文件即为redis.conf来配置 在随从redis中配置 # slaveof {masterHost} {MastePort} slaveof ... 
- express搭建服务器
			学习express搭建node服务器 一.安装express框架 1.了解框架(百度) 2.下载框架 (1)使用npm命令下载 npm install express -g //全局安装,安装的是ex ... 
- 【洛谷P2568】GCD
			题目大意:给定整数 \(N\),求\(1\le x,y\le N\) 且 \(gcd(x,y)\) 为素数的数对 \((x,y)\) 有多少对. 题解: \[ \sum_{p \in \text { ... 
- C# 下载文件 只利用文件的存放路径来下载
			第一种方式: 最简单的就是返回一个file类型的数据即FilePathResult类型的对象 string serverPath = ConfigurationManager.AppSettings[ ... 
- vetur插件提示 'v-for' directives require 'v-bind:key' directives.错误的解决办法
			在用vscode编写vue代码时,因为安装的有vetur插件,所以当代码中有v-for语法时,会提示 [vue-language-server] 'v-for' directives require ... 
- javascript  实现页面显示当前时间 动态读秒
			用户进入网站后,出于友好目的,可以添加一些欢迎语句,并且显示系统当前时间,动态读秒的操作.还是直接粘贴代码吧 <script type="text/javascript"&g ... 
