精华内容
下载资源
问答
  • 基于vue动态数据绑定2,再多考虑一个问题:”深层次数据变化如何逐层往上传播”。举个例子。let app = new Observer({ name: { first: 'yy', last: 'jm' }, age: 18 });app2.$watch('name', function (newName)...

    基于vue动态数据绑定2,再多考虑一个问题:”深层次数据变化如何逐层往上传播”。举个例子。

    let app = new Observer({
        name: {
            first: 'yy',
            last: 'jm'
        },
        age: 18
    });
    
    app2.$watch('name', function (newName) {
        console.log('你的姓名发生了变化')
    });
    
    app.data.name.firstName = 'hahaha';
    // 输出:你的姓名发生了变化。
    

    为了实现深层次数据变化的向上传播,需要得到被改变的数据的父级并触发相应的回调函数,然后再逐级向上触发每一层级的回调函数。实现代码如下:

    <script>
    function Observer(data, events, parent, parentKey){
        this.data = data;
        this.events = events || {};
        this.parent = parent || {};
        this.parentKey = parentKey || '';
        this.walk(data, this.events);
    }
    Observer.prototype.walk = function(data, events) {
        for(var key in data) {
            if(data.hasOwnProperty(key)){
                if(typeof(data[key]) == 'object'){
                    new Observer(data[key], events, this, key)
                };
                this.convert(key, data[key], events);
            }
        }
    }
    Observer.prototype.convert = function(key, val, events) {
        var self = this;
        Object.defineProperty(this.data, key, {
            enumerable: true,
            configurable: true,
            get: function() {
                console.log('你访问了' + key);
                return val;
            },
            set: function(newVal) {
                console.log('你设置了', key, ',新的值为', newVal);
                if (newVal !== val) {
                    val = newVal;
                    // 保存key的上级,如果有的话
                    var parent = self.parent;
                    // 保存key的上级的key值
                    var parentKey = self.parentKey;
                    // 循环寻找上级触发事件
                    while (parent) {
                      self.$emit(parentKey, newVal);
                      parentKey = parent.parentKey;
                      parent = parent.parent;
                    }
                    //触发当前key事件
                    self.$emit(key, newVal); 
                }
                // 如果这个newVal是obj,继续递归调用new Observer
                if (typeof newVal === "object") {
                    return new Observer(newVal, events, this, key);
                }
            }
        })
    }
    
    Observer.prototype.$watch = function(key, listener) {
        if(!this.events[key]){
            this.events[key] = [];
        };
        this.events[key].push(listener);
    }
    
    Observer.prototype.$emit = function() {
        var key = [].shift.call(arguments);
        var data = [].slice.call(arguments);
        if(!this.events[key] || this.events[key].length < 1) return;
        this.events[key].forEach(function(listener){
            listener(data || {})
        })
    }
    var data = {
        user: {
            name: {
                first: {
                    y: "y"
                },
                last: "jm"
            },
            age: 18
        },
        address: "成都"
    }
    
    let app = new Observer(data);
    
    app.$watch('user', function() {
        console.log('你改变了user');
    });
    app.$watch('name', function(){
        console.log('你改变了name');
    });
    app.$watch('first', function(){
        console.log('你改变了first');
    });
    app.$watch('y', function(y){
        console.log(`你改变了y, 现在是${y}`);
    });
    app.$watch('age', function(age){
        console.log(`你的age改变了,现在是${age}`);
    });
    app.$watch('address', function(address){
        console.log(`你的address改变了,现在是${address}`);
    });
    app.data.user.age = 20;
    </script>

    在vue数据绑定2的基础上,增加了this.parent、提示。parentKey用于得到相应元素的上级,然后再得到上级的上级… 。
    效果如下:
    image

    展开全文
  • vue动态数据绑定prop

    2020-08-05 16:56:58
    vue动态数据绑定props思维导读图代码效果 思维导读图 代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript...

    vue动态数据绑定prop

    思维导读图

    在这里插入图片描述

    代码

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script type="text/javascript" src="js/vue.js"></script>
    		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
    	</head>
    	<body>
    		<div id="add">
    			<ss v-for="e in ell" :tobu="e"></ss>
    		</div>
    	</body>
    	<script type="text/javascript">
    		Vue.component("ss",{
    			props:["tobu"],
    			template:"<p>{{tobu.name}}<p>"
    		})
    		new Vue({
    			el:"#add",
    			data:{
    				ell:[
    					{name:"ssss"},
    					{name:"ssss"},
    					{name:"ssss"},
    					{name:"ssss"},
    					]
    			}
    		})
    	</script>
    </html>
    

    效果

    在这里插入图片描述

    展开全文
  • 本篇文章主要介绍了详解Vue双向数据绑定原理解析 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 主要为大家详细介绍了Vue数据双向绑定底层实现原理,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 主要为大家详细介绍了vue.js动态数据绑定学习笔记,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • - 动态数据绑定就是 Vue 最为基础,最为有用的一个功能。给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性? 举个例子。let app1 = new Observer({ ...

    之前经常使用 Vue,后来不满足于仅仅使用它,我想了解其内部实现原理,所以就尝试学习其源码,获益匪浅。
    - 动态数据绑定就是 Vue 最为基础,最为有用的一个功能。给定任意一个对象,如何监听其属性的读取与变化?也就是说,如何知道程序访问了对象的哪个属性,又改变了哪个属性? 举个例子。

    let app1 = new Observer({
      name: 'yyy',
      age: 20
    });
    
    let app2 = new Observer({
      university: 'uestc',
      major: 'computer'
    });
    
    // 要实现的结果如下:
    app1.data.name // 你访问了 name
    app.data.age = 100;  // 你设置了 age,新的值为100
    app2.data.university // 你访问了 university
    app2.data.major = 'science'  // 你设置了 major,新的值为 science

    实现这样的一个 Observer,要求如下:

    1. 传入参数只考虑对象,不考虑数组。
    2. new Observer返回一个对象,其 data属性要能够访问到传递进去的对象。
    3. 通过 data 访问属性和设置属性的时候,均能打印出对应的信息。
    4. 如果传入参数对象是一个“比较深”的对象(也就是其属性值也可能是对象),那该怎么办。

    要实现上述目标,首先要定义一个对象的构造函数,然后定义原型方法,遍历对象本身的各个属性,并为每个属性绑定get和set方法。考虑到第4个问题,在程序中加入了递归的思想。
    实现代码如下:

    // 首先定义观察者构造函数
    function Observer(data){
        this.data=data;
        this.walk(data);
    }
    
    // walk()函数用于深层次遍历对象的各个属性
    // 采用的是递归的思路
    // 因为我们要为对象的每一个属性绑定get和set
    Observer.prototype.walk = function(obj){
        let val;
        for(let key in obj){
            // 这里为什么要用hasOwnProperty进行过滤呢?
            // 因为for...in 循环返回的是对象原型链上的所有能够通过对象访问的、可枚举的属性
            // hasOwnProperty只在属性存在于实例中时才返回true
            // 而我们想要的正是这个对象本身拥有的属性,所以要这么做。
            if(obj.hasOwnProperty(key)){
                val = obj[key];
                // 这里进行判断,当访问的属性是一个对象时,继续new Observer,直到到达最底层的属性位置
                if(typeof val ==='object'){
                    new Observer(val);
                }
                this.convert(key,val);
            }
        }
    };
    // 以自定义get和set函数
    Observer.prototype.convert = function(key,val){
        Object.defineProperty(this.data,key,{
            enumerable:true,
            configurable:true,
            get:function(){
                console.log('你访问了'+key);
                return val;
            },
            set:function(newVal){
                console.log('你设置了'+key);
                console.log('新的'+key+'='+newVal);
                if(newVal===val) return;
                // 如果设置新的值是一个对象的话,继续new Observer,直到到达最底层的属性位置
                if(typeof newVal === "object"){
                    new Observer(newVal);
                };
                val = newVal;
            }
        })
    };
    let data={
        user:{
            name: "yjm",
            age: "21"
        },
        address: "成都"
    };
    let app =new Observer(data);
    
    • 当访问的属性是一个对象的时候,对这个对象属性进行new Observer,直到到达最底层的属性位置,使‘深层次’的属性也能被访问到。
    • 同时为对象设置setter的时候,如果设置新的值是一个对象的话,也继续new Observer,直到到达最底层的属性位置,使新设置的值对象的子属性也能继续响应 getter 和 setter。
      效果如下:

    这里写图片描述
    这里写图片描述
    这里写图片描述
    如上图所示:无论是访问一个简单值或者是一个深层次的对象,都可以很好响应getter 和 setter。

    展开全文
  • 这两天学习了vue.js数据绑定这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记。 前言 感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的“抄袭”。对照来看,更有助于...
  • 用jquery的时候你会发现,页面渲染后动态生成的dom,在生成之前的代码是没...但是vue基于数据绑定的特性让它能生成的时候直接绑定数据。 html: <input type=text v-model=item.val style=width:40px>
  • 主要为大家详细介绍了Vue 3.0双向绑定原理的实现方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 今天小编就为大家分享一篇vue实现条件判断动态绑定样式的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue实现动态数据绑定

    2020-08-30 16:31:17
    本篇文章主要介绍了vue实现动态数据绑定,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • vue.js关于动态绑定数据

    万次阅读 2018-04-20 09:35:53
    最近在写vue的时候发现一个问题。在后台传过来的一个数组需要给页面进行渲染。需要为每个&lt;li&gt;标签吧绑定一个点击事件,这个点击事件需要取这个&lt;li&gt;标签的name属性的值,然后再进行页面...

    最近在写vue的时候发现一个问题。

    在后台传过来的一个数组需要给页面进行渲染。


    需要为每个<li>标签吧绑定一个点击事件,这个点击事件需要取这个<li>标签的name属性的值,然后再进行页面的跳转,如何给name赋值呢,刚开始如上图写的,{{template.voteId}},发现是错误的,{{}}是用在文本插值的,绑定属性不能这么写,需要使用v-bind命令


    这样审查元素后发现已经能够正常绑定了,li标签的name属性也被赋值了。点击事件也绑好了



    但在获取name的值时无法获取到


    this对象未定义,后来发现这个方法是定义在vue中的,vue里面获取当前点击事件的对象不是this,而应该用传入$event,在方法里用event.currentTarget获取当前对象;


    但根据当前对象使用.name获取值发现无法取到。。name=undefined,很奇怪,有待研究

    最后通过这样处理解决



    li里面多加了一个div,把值赋给了div,通过li拿到div的值

    展开全文
  • vue中属性动态绑定数据方法

    千次阅读 2017-09-07 19:30:24
    vue2.0中,src、href等属性实现数据绑定,不能用{{}}进行绑定,否则就会报错,那么应该怎么绑定呢?? 先看几个错误的写法 常见错误写法1: img src="value.src"> 常见错误写法2: img src="{{value....
  • 详解+实例 vue单向数据绑定,双向数据绑定.zip
  • 本文主要介绍了vue双向数据绑定的原理,文章结尾附上完整demo下载。具有一定的参考价值,下面跟着小编一起来看下吧
  • 主要介绍了vue动态属性数据绑定(v-bind指令)的相关资料,文中讲解非常细致,代码帮助大家更好的理解和学习,感兴趣的朋友可以了解下
  • 主要介绍了Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定),非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
  • 主要介绍了解决vue项目input输入框双向绑定数据不实时生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇解决vue2.0动态绑定图片src属性值初始化时报错的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue.js是JavaScript的一个MVVM库,M是指模型数据,V是指视图容器,VM是指视图模型,模型数据通过视图模型监听视图容器的变化,而视图容器通过视图模型获取模型数据的变化进行渲染,实现了数据的双向绑定。...
  • 今天小编就为大家分享一篇vue 实现v-for循环回来的数据动态绑定id,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 下面小编就为大家分享一篇vue中如何动态绑定图片,vue中通过data返回图片路径的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • Vue 双向数据绑定原理

    万次阅读 2019-03-07 14:20:57
    vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来...vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set...
  • 理解VUE双向数据绑定原理和实现

    千次阅读 多人点赞 2021-02-26 12:04:02
    1.vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的, 也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变; 2.核心:关于VUE双向数据绑定,其核心是 Object....
  • 主要介绍了VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定数据不能实时更新),本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
  • vue 动态绑定

    千次阅读 多人点赞 2021-07-12 21:51:59
    Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。[5]与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既...
  • VUE对象的动态绑定

    千次阅读 2019-08-29 22:34:35
    VUE对象的动态绑定vue不检测对象的删除和添加动态添加对象属性动态添加对象属性的双向绑定的实现 vue不检测对象的删除和添加 vue不能检测到对象的删除和添加,因为vue初始化实例的时候对属性进行一个get和set的过程...
  • 主要介绍了Vue使用.sync 实现父子组件的双向绑定数据,需要的朋友可以参考下
  • Vue双向数据绑定原理

    千次阅读 2021-04-13 00:21:16
    VUE双向数据绑定原理 vue双向数据绑定是通过 数据劫持,并结合 发布-订阅模式的方法来实现的,也就是说数据和视图同步,数据发生变化,视图跟着变化,视图变化,数据也随之发生改变 核心:关于vue实现双向数据...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 108,853
精华内容 43,541
关键字:

vue动态数据绑定

vue 订阅