精华内容
下载资源
问答
  • Vue 数据响应式

    2021-09-01 10:33:09
    响应式就是一个物体能对外界的刺激做出反应 Vue 的 data 就是响应式 const vm = new Vue({data:{n:0}}) 如果修改 vm.n,那么 UI 中的 n 就会响应 ...改变窗口大小,网页内容会做出响应,就是响应式网页 ...

    响应式就是一个物体能对外界的刺激做出反应

    Vue 的 data 就是响应式

    • const vm = new Vue ({data:{n:0}})
    • 如果修改 vm.n,那么 UI 的 n 就会响应
    • Vue 是通过 Object.defineProperty 来实现数据响应式

    Vue 的数据响应式原理依赖 Object.defineProperty,Vue 通过设定对象属性的 setter/getter 方法来监听数据的变化,通过 getter 进行依赖收集,而每个 setter 方法就是一个观察者,在数据变更的时候通知订阅者更新视图。Vue 不能检测到对象属性的添加或删除,解决方法是手动调用 Vue.set 或者 this.$set。

    何为响应式网页?

    改变窗口大小,网页内容会做出响应,就是响应式网页

    getter / setter

    get 语法将对象属性绑定到查询该属性时将被调用的函数

    当尝试设置属性时,set 语法将对象属性绑定到要调用的函数

    let obj = {
      姓: "徐",
      名: "冬冬",
      get 姓名() {
        return this.姓 + this.名;
      },
      set 姓名(xxx){
        this.姓 = xxx[0]
        this.名 = xxx.substring(1)
      },
      age: 18
    };
    
    obj3.姓名 = '徐冬冬'

    Object.defineProperty

    可以给对象添加属性 value

    可以给对象添加 getter / setter

    getter / setter 用于对属性的读写进行监控

    var _xxx = 0  //用来放 xxx 的值
    
    Object.defineProperty(obj,'xxx',{ // 定义的属性 xxx 是不存在的,如果在后面 return 会死循环
      get(){
        return _xxx
      },
      set(value){
        _xxx = value
      }
    })

    需求一:用 Object.defineProperty 定义 n

    let data = {}
    
    Object.defineProperty(data1, 'n', {
      value: 0
    })
    

    需求二:n 不能小于 0 (即 data2.n = -1 应该无效,但 data2.n = 1 有效)

    结论:可以给 set 做判断,不满足就不 set

    问题:无法阻止别人修改 _n 的值

    let data = {}
    
    data._n = 0 // _n 用来存储 n 的值
    
    Object.defineProperty(data, 'n', {
      get(){ // 读属性
        return this._n // 防止没有data,所以推荐使用this隐式传参
      },
      set(value){ // 写属性
        if(value < 0) return
        this._n = value
      }
    })

    需求三:使用代理

    结论:因为只暴露了代理对象,别人无法接触真实的对象

    let data = proxy({ data:{n:0} }) // 括号里是匿名对象,无法访问
    
    function proxy({data}){  // 解构赋值,原本应该是(options){const {data} = options}
      const obj = {}
      // 这里的 'n' 写死了,理论上应该遍历 data 的所有 key,这里做了简化
      Object.defineProperty(obj, 'n', { 
        get(){
          return data.n
        },
        set(value){
          if(value<0)return
          data.n = value
        }
      })
      return obj // obj 就是代理
    }

     需求四:绕过代理,直接在初始化时申明引用

    let myData = {n:0}
    let data = proxy({ data:myData }) // 括号里是匿名对象,无法访问
    
    myData.n = -1

    需求五:就算用户擅自修改 myData,也要拦截他

    let myData = {n:0}
    let data = proxy({ data:myData }) // 括号里是匿名对象,无法访问
    
    function proxy({data}){
      let value = data.n
      Object.defineProperty(data, 'n', { // 申明的 n 和之前的 n 重名,会直接用新的覆盖之前的
        get(){
          return value
        },
        set(newValue){
          if(newValue<0)return
          value = newValue
        }
      })
      // 上面几句会监听 data
    
      const obj = {}
      Object.defineProperty(obj, 'n', {
        get(){
          return data.n
        },
        set(value){
          if(value<0)return//这句话多余了
          data.n = value
        }
      })
      
      return obj // obj 就是代理
    }

    vm = new Vue({data: myData})

    一、会让 vm 成为 myData 的代理 (proxy)
    二、会对 myData 的所有属性进行监控
    监控是为了防止 myData 的属性变了,vm 不知道
    vm 知道属性变了就可以调用 render(data) 
    Ul= render(data) UI 就可以自动刷新

    什么是代理?

    代理是一种设计模式,对 mydata 对象的属性的读写,全权由另一个对象 vm 负责

    那么 vm 就是 mydata 的代理

    Object.defineProperty 的问题

    Object.defineProperty(obj,'n',{...})

    必须要有 n 才能监听&代理

    如果没有给 n 会有如下问题:

    • Vue 会给出一个警告 
    new Vue({
      data: {},
      template: `
        <div>{{n}}</div>
      `
    }).$mount("#app");
    
    [Vue warn]: Property or method "n" is not defined on theinstance
    but referenced during render. 
    • Vue 只会检查第一层属性,会绕过警告,点击 set b 视图不会显示1,因为 Vue 没法监听一开始不存在的 obj.b
    new Vue({
      data: {
        obj: {
          a: 0 // obj.a 会被 Vue 监听 & 代理
        }
      },
      template: `
        <div>
          {{obj.b}}
          <button @click="setB">set b</button>
        </div>
      `,
      methods: {
        setB() {
          this.obj.b = 1
        }
      }
    }).$mount("#app")

    解决方法:

    1. 将 key 都申明好,后面不再加属性
    2. 使用 Vue.set 或 this.$set

    Vue.set 和 this.$set 的作用

    • 新增 key
    • 自动创建代理和监听
    • 触发 UI 更新(但不会立刻更新)
    this.$set(this.object,'m',100)

    数组中新增的 key

    • 可用 set 来新增 key,更新 Ul 
    • Vue 篡改了7个 API 方便对数组进行增删
    • 这7个 API 会自动处理监听和代理,并更新 Ul
    • 数组新增 key 最好通过7个 API
    push()
    pop()
    shift()
    unshift()
    splice()
    sort()
    reverse()

      *本文为鲲游北冥的原创文章,著作权归本人和饥人谷所有,转载务必注明来源

    展开全文
  • Vue数据响应式

    2020-12-19 12:26:44
    Vue 数据响应式图示理解Vue数据响应式getter和setterObject.defineProperty代理和监听代理(设计模式)监听总结Vue data中的bugVue.set 和 this.$set作用举例Vue中的数组变异数组的变异方法有7个 图示理解Vue数据...

    图示理解Vue数据响应式

    在这里插入图片描述
    在这里插入图片描述

    const myData = {
      n: 0
    };
    console.log(myData);
    
    const vm = new Vue({
      data: myData,
      template: `<div>{{n}}<button @click="add">+10</button></div>`,
      methods: {
        add() {
          //this.n += 10;
          myData.n += 10;
        }
      }
    }).$mount("#app");
    
    setTimeout(() => {
      myData.n = 10;
      console.log(myData);
      console.log(vm);
    }, 3000);
    

    getter和setter

    let obj3 = {: "高",: "圆圆",
      get 姓名() {
        return this.+ this.;
      },
      set 姓名(xxx) {
        this.= xxx[0];
        this.= xxx[1];
      },
      age: 18
    };
    obj3.xxx = "邓超";
    

    Object.defineProperty

    • 可以给对象添加属性value
    • 可以给对象添加getter/setter
    • getter/setter用于对属性的读写进行监控
    let _x = 0;
    Object.defineProperty(obj3, "xxx", {
      getAge() {
        return _x;
      },
      set(x) {
        _x = x;
      }
    });
    console.log(obj3);
    

    代理和监听

    代理(设计模式)

    • 对某个对象的属性读写,全权由另外一个对象vm负责
    • vm就是某个对象的代理
    • 例如obj.n不用,用vm.n来操作obj.n
    /* 
    vm = new Vue({data:myData})
    会让vm成为myData的代理(proxy)
    会对myData的所有属性进行监控
    监控原因:为防止myData的属性变了,vm不知道
    vm知道了属性变更就可以调用render(data)
    UI = render(data)
    */
    let data3 = proxy({ data: { n: -1 } });
    
    function proxy({ data }) {
      //o就是一个代理,是谁的代理呢?就是data的代理
      //作用:中转 租房中的客户 中介(事情交给了中介做) 房东(省心)
      const o = {};
      Object.defineProperty(o, "n", {
        get() {
          return data.n;
        },
        set(v) {
          if (v < 0) return;
          data.n = v;
        }
      });
      return o;
    }
    console.log(`需求四:${data3.n}`);
    
    let data4 = { n: 0 };
    let data5 = proxy({ data: data4 });
    console.log(`需求四:${data5.n}`);
    

    监听

    let myData1 = { n: 0 };
    let data6 = proxy2({ data: myData1 });
    
    function proxy2({ data }) {
      let v = data.n;
      Object.defineProperty(data, "n", {
        get() {
          return v;
        },
        set(v) {
          if (v < 0) return;
          data.n = v;
        }
      });
    }
    //加上几句话就会进行监听
    let d = {};
    Object.defineProperty(d, "n", {
      get() {
        return d.n;
      },
      set(v) {
        if (d.n < 0) return;
        d.n = v;
      }
    });
    
    

    总结

    • 响应式
    1. 你打我一拳,我会喊疼,那我就是响应式的
    2. 若一个物体对外界的刺激做出反应,它就是响应式的
    • Vue的data是响应式的
    1. const vm = new Vue({data:{n:0}})
    2. 修改vm.n,那么UI中的n就会响应
    3. Vue2是通过Object.defineProperty来实现数据响应式
    • 响应式页面
    1. 如果改变窗口的大小,网页会对内容做出响应,那就是响应式页面

    Vue data中的bug

    • 原因:Object.defineProperty导致的问题
    • Object.defineProperty(obj,‘n’,{…}),必须要有一个‘n’,才能监听和代理obj.n
    • 要是有人没给一个’n’,bug就出现啦
    • 另外要注意Vue只会检查第一层属性

    Vue.set 和 this.$set

    作用

    • 新增key
    • 自动创建代理和监听(如果没有就创建)
    • 触发UI更新(但并不会立刻更新)

    举例

    this.$set(this.obj,'m',100);
    

    Vue中的数组变异

    数组的变异方法有7个

    • push()
    • pop()
    • shift()
    • unshift()
    • splice()
    • sort()
    • reverse()
    展开全文
  • vue响应式

    2020-04-18 17:34:43
    vue响应式简单的说就是数据变化,页面重新渲染。 如何更改数据?假设有以下代码: const vm = new Vue({ el:"#app", data:{ msg:"你长得真好看", arr:[1,2,3] } }) 用vm.msg = ...

    vue的响应式简单的说就是数据变化,页面重新渲染。
    如何更改数据?假设有以下代码:

     const vm = new Vue({
                el:"#app",
                data:{
                    msg:"你长得真好看",
                    arr:[1,2,3]
                }
            })
    

    vm.msg = "小仙女"就可以更改了。为什么可以直接这样写呢?打印以下vm,可以看到有msg,
    在这里插入图片描述
    那么问题来了,为什么data会直接出现在vm实例对象中咧?
    这是因为:当创建vue实例的时候,vue会将data中的成员代理给vue实例,目的是为了实现响应式,监控数据的变化,如何做到的呢?vue2中是使用Object.defineProperty,vue3.0中用proxy,具体实现,稍后下面会讨论。
    接下来,想一下,有没有遇到过这样的情况:你更改了数据,但是页面不会渲染,这是为什么?下面给出答案:

    1. 更改的数据必须是存在的数据,否则不能重新渲染页面(未经过声明的),因为他监听不到;
    2. 更改的数据必须已渲染过的数据,否则从性能角度考虑,不会重新渲染页面;
    3. 对数组而言:(1)利用索引直接设置一个数组项时;(2)修改数组的长度时。
    4. 对对象而言:添加或者删除对象。

    我们更改了数据后,页面会立刻重新渲染吗?
    答案:当然不会,vue更新DOM的操作是异步执行的,只要侦听到数据变化,将开启一个异步队列,如果一个数据被多次变更,那么只会被推入到队列中一次,这样可以避免不必要的计算和DOM操作。
    那我们怎么拿到更改后的数据呢?
    答案:利用vm.$nextTickVue.nextTick,在页面重新渲染,DOM更新后,会立刻执行vm.$nextTick。这俩的区别是在于内部函数的this指向不同,vm.$nextTick内部函数的this指向Vue实例对象,Vue.nextTick内部函数的this指向window
    那nextTick是怎么实现的呢?
    答案:在nextTick的实现源码中,会先判断是否支持微任务,不支持后,才会执行宏任务。

     if(typeof Promise !== 'undefined') {
          // 微任务
          // 首先看一下浏览器中有没有promise
          // 因为IE浏览器中不能执行Promise
          const p = Promise.resolve();
    
        } else if(typeof MutationObserver !== 'undefined') {
          // 微任务
          // 突变观察
          // 监听文档中文字的变化,如果文字有变化,就会执行回调
          // vue的具体做法是:创建一个假节点,然后让这个假节点稍微改动一下,就会执行对应的函数
        } else if(typeof setImmediate !== 'undefined') {
          // 宏任务
          // 只在IE下有
        } else {
          // 宏任务
          // 如果上面都不能执行,那么则会调用setTimeout
        }
    

    所以,这样就可以看出vue的缺陷了,即:vue是同步执行栈执行完毕后,会执行异步队列。也就是说会一直等待主线程上的任务执行完毕,才能执行异步任务去渲染,如果主线程出现问题,那么页面就会卡死,后面异步不会执行,但react不会,一有空就会执行异步任务。
    重点来了!!!
    上面提到对数组和对象的更改有时候不会渲染页面,那如何更改才可以呢?
    要如何响应式的更新数组和对象?
    更改数组:

    1. 利用数组变异方法:push、pop、shift、unshift、splice、sort、reverse
    2. 利用vm.$set或者Vue.set实例方法
    3. 利用vm.$deleteVue.delete删除数组中的某一项

    vm.$set是Vue.set的别名
    使用方法:Vue.set(object, propertyName, value),也就是这个意思:Vue.set(要改谁,改它的什么,改成啥)

    vm.$delete是Vue.delete的别名
    使用方法:Vue.delete(object, target),也就是这个意思:Vue.delete(要删除谁的值,删除哪个)

    更改对象:

    1. 添加利用vm.\$set或者Vue.set实例方法。
    2. 删除利用vm.$delete/Vue.delete方法。

    那么vue的响应式原理是什么呢?即如何实现数据监听的?
    vue2.0中是使用Object.defineProperty。注意对数组以及嵌套对象的处理。对数组是要重写原型上的数组方法,先克隆出一个,再对克隆的进行重写,然后将data对象的隐式原型指向克隆的即可。对嵌套对象的处理可以使用递归。

    const data = {
        name:"小辣椒",
        obj:{
            x:1
        },
        arr:[4,5,6]
    }
    
    const arrayProto = Array.prototype;
    const arrMethod = Object.create(arrayProto);//克隆一份
    ['push','pop','shift','unshift','sort','splice','reverse'].forEach(method=>{
        arrMethod[method] = function(){
            arrayProto[method].call(this,...arguments);
            render();
        }
    })
    
    function defineReactive(data,key,value){
        observer(value);
        Object.defineProperty(data,key,{
            get(){
                console.log("读");
                return value;
            },
            set(newVal){
                if(value === newVal){
                    return newVal;
                }
                console.log("写");
                value = newVal;
                render();
            }
        })
    }
    function observer(data){
        if(Array.isArray(data)){
            data.__proto__ = arrMethod;//如果是数组就改变隐式原型
            return;
        }
        if(typeof data == "object"){
            for (const key in data) {
                defineReactive(data,key,data[key])
            }  
        }
      
    }
    function render(){
        console.log("页面渲染");
    }
    observer(data);
    

    利用Object.defineProperty实现响应式的劣势

    1. 天生就需要进行递归
    2. 监听不到数组不存在的索引的改变
    3. 监听不到数组长度的改变
    4. 监听不到对象的增删

    在vue3.0中就解决了这个问题,具体实现,请看我的另外一篇博客。
    MVVM原理之初始化data对象

    以上就是我对vue响应式的理解,如有错误,请指正,谢谢!

    展开全文
  • vue实现二级响应式导航栏

    千次阅读 2019-06-05 17:11:50
    1.通过vue实现表现和数据分离 2.实现了二级导航栏 3.兼容pc端和移动端 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>响应式二级导航栏</title> ...

    1.通过vue实现表现和数据分离
    2.实现了二级导航栏
    3.兼容pc端和移动端

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		<!--禁止浏览器缓存-->
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    		<meta http-equiv="Pragma" content="no-cache" />
    		<meta http-equiv="Expires" content="0" />
    		
    		<title>响应式二级导航栏</title>		
    				
    		<style type="text/css">
    			*{
    				box-sizing: border-box;
    			}
    			html,body,div,ul,li,a{
    				padding: 0;
    				border: 0;
    				margin: 0;
    			}
    			a{
    				text-decoration: none;
    				color: #000;
    			}
    			ul{
    				clear: both;
    				text-decoration: none;
    				white-space: nowrap;
    			}
    			li{
    				list-style: none;
    			}
    			.logo img{
    				height: 46px;
    				width: auto;
    			}
    			nav{
    				display: flex;
    				display: -webkit-flex; /* Safari */
    				flex-direction: row;
    				flex-wrap: wrap;
    				justify-content: flex-start;
    				align-items: center;
    				padding: 0 30px;
    				background: darkgray;
    			}
    			nav > .nav-item{
    				position: relative;				
    				padding: 20px 30px 20px 0;
    			}
    			nav .nav-item a{
    				display: inline-block;
    				width: 100%;
    			}
    			nav > .nav-item > a:visited{
    				color: #000;
    			}
    			nav > .nav-item > a:hover,
    			nav > .nav-item > a:focus{
    				color: #fff;
    			}
    			nav > .nav-item > .dropdown{
    				position: absolute;
    				top: 50px;/*需根据需求来做调整*/
    				left: 0;
    				display: none;
    				border-radius: 3px;
    				border: 1px solid darkgray;
    			}
    			@media all and (min-width: 768px) {
    				nav > .nav-item > .dropdown{
    					padding-top: 20px;
    				}
    			}
    			nav > .nav-item:hover .dropdown{
    				display: block;
    			}
    			.dropdown li a{
    				padding: 10px 30px;
    			}
    			.dropdown > li >a:hover{
    				color: darkgray;
    			}
    			nav .nav-item-form{
    				flex: 1;
    				-webkit-flex: 1;
    				text-align: right;
    				padding-right: 0;
    			}
    			nav form input,
    			nav form button{
    				padding: 6px 10px 6px;
    			}
    			.nav-btn{
    				display: none;
    				position: absolute;
    				top: 15px;
    				right: 15px;
    				z-index: 99999;
    				padding: 5px 5px 3px;
    				cursor: pointer;
    			}
    			.nav-btn span{
    				display: block;
    				width: 15px;
    				height: 2px;
    				background: #000;
    				margin-bottom: 2px;
    			}
    			@media all and (max-width: 768px) {
    				nav{
    					position: absolute;
    					display: none;
    					width: 100%;
    					top: 0;
    					right: 0;
    					z-index: 99998;
    					padding : 0 15px 30px;
    				}
    				nav > .nav-item{
    					width: 100%;
    				}
    				nav form{				
    					flex: 1;
    					text-align: left;
    				}
    				nav > .nav-item > .dropdown{
    					position: relative;
    					top: 0;
    					left: 0;
    					display: block;
    					height: 0;
    					overflow: hidden;
    				}
    				.dropdown li{
    					padding: 10px 0px;
    					font-size: 13px;
    				}
    				.dropdown li a{
    					padding: 0;
    				}
    				nav > .nav-item{
    					padding: 20px 0 0;
    				}
    				.dropdown > li >a:hover{
    					color: dimgray;
    				}
    				nav > .nav-item:hover .dropdown{
    					height: auto;
    				}
    				.nav-btn{
    					display: inline-block;
    				}
    			}
    		</style>
    		
    		<!-- <script src="./vue.min.js"></script> -->
    		<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><!--vue插件 视图层与数据分离-->
    	</head>
    	<body>
    		<div id="app">
    			<nav id="nav">
    				<div class="nav-item nav-item-logo logo">
    					<img src="http://via.placeholder.com/88x46" >
    				</div>
    				<div v-for="item in bookCatas" class="nav-item">
    					<a v-if="item.url!=''" :href="item.url">{{ item.booktype }}</a>
    					<a v-else href="##">{{ item.booktype }}</a>
    					<ul v-if="item.url==''" class="dropdown">
    						<li v-for="li in item.ul">
    							<a v-if="li.url!=''" :href="li.url">{{ li.bookname }}</a>
    						</li>
    					</ul>
    				</div>
    				
    				<div class="nav-item nav-item-form">
    					<form action="" method="get">
    						<input type="text" name="search"value="" />
    						<button type="submit">搜索</button>
    					</form>
    				</div>
    			</nav>
    			<button type="button" class="nav-btn" id="nav-btn"><!--按钮-->
    				<span></span>
    				<span></span>
    				<span></span>
    			</button>
    		</div>
    
    		<script type="text/javascript">
    			const vue = new Vue({
    				el: '#app',
    				data: {
    					bookCatas: [
    						{
    							'booktype' : '经管',
    							'url': 'http://book.dangdang.com/01.25.htm'
    						},
    						{
    							'booktype' : '文艺',
    							'url': '',
    							'ul':[
    								{
    									'bookname': '文学',
    									'url': 'http://book.dangdang.com/01.05.htm'
    								},
    								{
    									'bookname': '传记',
    									'url': 'http://book.dangdang.com/01.38.htm'
    								},
    								{
    									'bookname': '青春文学',
    									'url': 'http://book.dangdang.com/01.01.htm'
    								}
    							]
    						},
    						{
    							'booktype' : '小说',
    							'url': 'http://e.dangdang.com/classification_list_page.html?category=XS2&dimension=dd_sale&order=0'
    						},
    						{
    							'booktype' : '励志',
    							'url': 'http://book.dangdang.com/01.21.htm'
    						},
    						{
    							'booktype' : '人文社科',
    							'url': '',
    							'ul':[
    								{
    									'bookname': '军事',
    									'url': 'http://book.dangdang.com/01.27.htm'
    								},
    								{
    									'bookname': '历史',
    									'url': 'http://book.dangdang.com/01.36.htm'
    								},
    								{
    									'bookname': '古籍',
    									'url': 'http://book.dangdang.com/01.32.htm'
    								}
    							]
    						},
    						{
    							'booktype' : '科技',
    							'url': '',
    							'ul':[
    								{
    									'bookname': '计算机/网络',
    									'url': 'http://book.dangdang.com/01.54.htm'
    								},
    								{
    									'bookname': '科普读物',
    									'url': 'http://book.dangdang.com/01.52.htm'
    								},
    								{
    									'bookname': '建筑',
    									'url': 'http://book.dangdang.com/01.55.htm'
    								},
    								{
    									'bookname': '农业/林业',
    									'url': 'http://category.dangdang.com/cp01.66.00.00.00.00.html'
    								}
    							]
    						}
    					]
    				},
    				methods: {
    				}
    			})
    			
    			const navBtn = document.getElementById('nav-btn');
    			const nav = document.getElementById('nav');
    			var status = 0;//当前隐藏还是显示状态,默认隐藏
    			//淡入
    			function  fedeIn(opc,elem)//opc: opcity当前值,elem: 当前动画对象
    			{	
    				elem.style.opacity = 0;				
    				elem.style.display = 'block';
    				var upInterval = setInterval(function(){
    					opc += 0.05;
    					elem.style.opacity = opc;
    					if(opc>=1)
    					{
    						clearInterval(upInterval);
    					}
    				},50);
    			}
    			//淡出
    			function  fedeOut(opc,elem)//opc: opcity当前值,elem: 当前动画对象
    			{			
    				elem.style.opacity = 1;
    				var downInterval = setInterval(function(){
    					opc -= 0.05;
    					elem.style.opacity = opc;
    					if(opc<=0)
    					{
    						clearInterval(downInterval);
    						elem.style.display = 'none';
    					}
    				},50);
    			}
    			navBtn.onclick = function(){
    				if(status==0)
    				{					
    					status=1;
    					fedeIn(0,nav);
    					
    				}else{
    					status=0;
    					fedeOut(1,nav)
    				}
    			}
    			
    			window.onresize =function(){//窗口缩放触发事件
    				var width = document.body.clientWidth//获取屏幕宽度
    				if(width>=768)
    				{
    					nav.style.display = 'flex';
    					nav.style.opacity = 1;
    				}else{
    					nav.style.display = 'none';
    					status=0;
    				}
    			}
    		</script>
    	</body>
    </html>
    
    

    效果展示:
    1.pc端
    在这里插入图片描述
    2.移动端:
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述

    展开全文
  • Vue监听屏幕宽度实现响应式

    千次阅读 2019-09-10 02:17:30
    今天在做页面的时候突然想搞一个能在手机端也能完美显示的网页,这就意味着要做响应式,也就是要监听网页的宽度。 用Vue-cli搭建好项目后 在app.vue中写一个方法来监听屏幕宽度 setMobile(){ addEventListener...
  • 响应式系统 UI 在 MVVM 中指的是 ...Vue 通过一个响应式系统保证了View 与 Modal的同步,由于要兼容IE,Vue 选择了Object.defineProperty作为响应式系统的实现,但是如果不考虑 IE 用户的话,Object.defineProperty并...
  • vue-cli 中实现响应式布局

    千次阅读 热门讨论 2021-02-14 09:28:03
    vue-cli 中实现响应式布局 我们在进行前端开发中必然会遇到PC与移动端的适配,面对这样的问题有些公司会准备两个页面,移动是移动,PC是PC,而响应式布局就是根据用户不同的机型展示不同的页面,废话不多说,直接贴...
  • vue响应式

    2021-08-01 18:55:33
    vue响应式 vue程序中,当值发生改变,它会做三件事: 更新网页上的值price 计算新的表达式,更新页面price*code 再次调用功能并更新页面totalPriWithTax 通过声明一个class完成以上需求简易的实现,这个class...
  • 响应式首先我们都知道,只要在 Vue 实例中声明过的数据,那么这个数据就是响应式的。什么是响应式,也即是说,数据发生改变的时候,视图会重新渲染,匹配更新为最新的值。也正是因为这个系统,让我们可以脱离界面的...
  • VUE响应式原理

    2019-09-21 17:50:48
    前段时间面试小米被问到vue响应式原理。然后粗略的回答了发布者订阅者模式,Object.defineProperty(),感觉面试官不是很满意,我自己其实当时答的也没底 记录 js中Object.defineProperty()用来在一个对象上定义一...
  • 响应式原理 Object.defineProperty 可以给对象添加属性value 可以给对象添加getter/setter getter/setter用于对属性的读写监控 啥是代理(设计模式) 对myData对象的读写,全权由另一个对象vm负责 那么vm就是myData...
  • Vue框架设置响应式布局

    万次阅读 多人点赞 2018-09-03 09:51:20
    回到主题,自适应响应式布局这个话题古老而新颖,从最早的不同分辨率的屏幕,到现在遍布各个生活角落的移动设备,响应式布局已经成了几乎所有互联网公司必备的条件。在我的映像中,bootstrap一直是响应式的头号选择...
  • vue是一个学习曲线相对平缓的响应式框架,利用vue可以做到素材图片的动态裁剪、切换。
  • Vue使用ivew组件实现响应式布局

    千次阅读 2020-04-26 00:40:50
    1.vue-cli3.0中使用iview 链接: Vue-cli3.0中使用iview. 1.在控制台启动vue ui 2.在vue ui中搜索并安装iview 或者直接在控制台输入 cnpm install iview 3.安装好后重启项目 4.在main.js中引入 import iview from '...
  • 公司有一个基于Vue实现的登录中心是我负责维护的,页面上是一个常规的登录界面,用户名输入框、密码输入框和登录按钮各一个 今天有个同事(之后简称A)过来找我问到这么一个问题: 他负责的应用将登录中心集成到了...
  • 实际上,有很多方法可以创建响应式网站导航,甚至还有一些jQuery插件可在一秒钟内完成 。 然而,而不是应用即时的解决方案,在这篇文章中,我们将引导您如何建立从地上一个简单的导航和使用CSS3媒体查询和一个小...
  • 1、NavBar.vue上代码: 里面ul>标签放置一个插槽,用来放置多个li>标签。为什么要放插槽呢??因为在一些地方我们可能还会用到像这样模板,只是那时的li>标签内容不一样了。所以插槽就很好解决了,下次使用...
  • Vue响应式编程

    千次阅读 2019-09-11 18:49:18
    Time: 20190911 ...Vue在这个过程中扮演了怎样的角色呢? Vue会时刻监视着data对象的变化。下面看一个例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT...
  • 分享一种vue-lic中使用rem,实现响应式布局的超简单的方法。   第一步:封装设置rem的方法,放在公用类的js文件中,或者直接放在main.js文件中。 /** * 设置rem * @param pwidth * @param prem */ export ...
  • 1.什么是响应式 若物体能对外界的刺激作出反应,它就是响应式的 ...如果改变窗口大小,网页内容就会做出响应,那就是响应式网页 4.Vue的data有bug Object.defineProperty 的问题 1.Object.defineProperty(obj,'n
  • Vue的自动响应式网格布局库
  • 为了做一个自己的前后端分离的后台管理系统,特地做了一下登录页面。大概的架子如下,后面需要替换一下顶部导航的信息。先大概贴一下代码,以后直接复制使用。整体的布局是自己写的样式,如果后面要替换为其他的UI...
  • vue-cli3 + bootstrap3实现响应式布局

    千次阅读 2019-03-02 10:34:16
    作用:让网页根据设备dpr和宽度,利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备 安装: npm install lib-flexible 引入:入口文件main.js中: import &amp;quot;lib-flexible/...
  • 建立一个Vue响应式系统 在本课程中,我们将使用与Vue源代码中相同的技术构建一个简单的响应式系统。这能让你对于Vue.js及其设计模式有更好地了解,也能让你更熟悉 watchers 和 Dep 类。 响应式系统 当你第一次看到...
  • setState)(1)数据驱动视图 - Vue MVVM(2)数据驱动视图 - React setState(3)总结二、Vue响应式1、vue的响应式是什么2、Object.defineProperty基本用法3、Oject.defineProperty实现响应式(1)监听对象(2)...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,872
精华内容 3,148
关键字:

vue实现响应式网页

vue 订阅