1 代码

<body>

   <div id="root">

    <h1>{{name}}</h1>

    <h1>{{obj}}</h1>

   </div>

   <script type="text/javascript" >

    let a = {

        name:'sisi'

    }

    const vm = new Vue({

        el:'#root',

        data:{

            name:a.name,

            obj:a

        }

    })

    </script>

</body>

2 页面

3 vm外层属性 _data属性 及vm外部变量

　　1）vm外层属性和_data属性的关系

　　　　可以看到vm外层的属性和_data里面的属性是相等的，因为外层的属性就是代理的_data的属性

　　2)_data属性的值使用的是vm以外的对象的话

　　　　值是一般数据类型：初始化的时候把值赋值给_data的属性了，后面两者可以说没有关系了

　　　　值是对象：初始化的时候把对象地址赋值给_data的属性了

4 测试1

　　初始化的时候，值全部是'sisi'

　　

　　执行命令a.name='数学'

　　 结果：

　　　　a对象的name属性变化了

　　　　vm._data.obj.name 变化了，vm.obj.name变化了

　　　　vm.name没变化，vm._data.name没变化

5 测试2

　　刷新页面，初始化的时候，值全部是'sisi'

　　

　　执行命令vm.name='历史'

　　结果：

　　　　vm.name变化，vm._data.name变化

　　　　vm._data.obj.name 没变，vm.obj.name没变

　　　　a对象的name属性没变

　　

6 测试3

　　刷新页面，初始化的时候，值全部是'sisi'

　　

　　执行命令vm.obj.name='化学'

　　结果：

　　　　vm._data.obj.name 变了，vm.obj.name变了

　　　　a对象的name属性变了

　　　　vm.name没变，vm._data.name没变

Vue11 vue的data中属性的值(基础数据类型和对象)的更多相关文章

  1. vue 需求 data中的数据之间的调用

    我遇到过这种情况  就是在我的data中 会有数据调用data中的其他数据 如图  我的alertInfoType需要拿到screeningCondition中type的值 用过vue的都知道 我是不 ...

  2. [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式

    [官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...

  3. Python 类中__init__()方法中的形参与如何修改类中属性的值

    一.__init__()方法 如果__init__()方法为 class Cat(): def __init__(self,num) : self.num=num Python中类的__init__( ...

  4. java：Hibernate框架1（环境搭建，Hibernate.cfg.xml中属性含义，Hibernate常用API对象，HibernteUitl，对象生命周期图，数据对象的三种状态，增删查改）

    1.环境搭建: 三个准备+7个步骤 准备1:新建项目并添加hibernate依赖的jar文件  准备2:在classpath下(src目录下)新建hibernate的配置文件:hibernate.cf ...

  5. 在checkbox中使用.prop; angular中属性的值使用变量问题

    1.在checkbox中使用.prop而不使用.attr ,.attr有时并不如愿的改变checkbox的打钩问题 给这个checkbox设置return  false就能阻止点击则改变状态的默认行为 ...

  6. vue之store中属性更新用法

    //1.首先定义store对象下的属性 state: { data:'测试数据' } // 2.定义更改data数据的方法 mutations: { updatedata(state, p) { st ...

  7. react中属性默认值是true?

    看到项目代码中 return ( <MyWebView state="Login" title="登录app" ref="login" ...

  8. vue 初始化data中的数据

    Object.assign(this.$data, this.$options.data());

  9. C# 获取类中属性注释值

    转 http://bbs.csdn.net/topics/350019800 PropertyInfo[] peroperties = typeof(TEST).GetProperties(Bindi ...

  10. vue 重置data中表单form的值 重置变量

    export default { data() { return { form:{ name:"张三", age:13, sex:1, address:"" } ...

随机推荐

  1. 【题解】UVA10228 A Star not a Tree?

    题面传送门 解决思路 本题数据范围较小,可以使用模拟退火算法(随机化). 顾名思义,模拟退火就是一个类似于降温的过程.先设置一个较大的初温,每次随机改变状态,若使答案更优,则采取更优答案,否则根据其与 ...

  2. Kubernetes介绍和资源管理

    Kubernetes介绍和资源管理 Kubernetes介绍 官网:https://kubernetes.io/ 一.应用部署方式演变 1.传统部署:互联网早期,会直接将应用程序部署在物理机上 优点: ...

  3. scrapy框架命令

    scrapy startproject #创建scrapy项目 scrapy genspider test www.baidu.com #在项目下的spider目录下生成爬虫文件 test爬虫名称 w ...

  4. rpm环境安装dpkg包管理工具

    rpm环境安装dpkg包管理工具 索引:dpkg-scanpackages.dpkg.dpkg-query.dpkg-source.dpkg-scansource 在centos.redhat.麒麟服 ...

  5. 如何禁止win7自动锁屏

    前言 我是真的服了,就解决这个问题百度查了一大堆(浪费很长时间),都说是电源管理的问题,也不知道是谁抄谁的,改完还会自动锁屏. 然后我google一下子就解决了(这里有一个搜索技巧,就是将你的问题翻译 ...

  6. Kubernetes专栏 | 安装部署（一）

    --随着云原生概念的普及,许多企业的业务纷纷上云,为了追求可靠性,稳定性,和弹性伸缩,提升资源利用率等需求.Kubernetes这个谷歌开源的容器编排平台已日益流行,被大家熟知和使用. 通常来说,Ku ...

  7. JavaScript笔记之面向对象

    面向对象 了解构造函数原型对象的语法特征,掌握 JavaScript 中面向对象编程的实现方式,基于面向对象编程思想实现 DOM 操作的封装. 了解面向对象编程的一般特征 掌握基于构造函数原型对象的逻 ...

  8. Spring03:案例转账功能（事务问题）、动态代理解决、AOP

    今日内容--核心2AOP 完善Account案例 分析案例中的问题 回顾之前讲过的技术--动态代理 动态代理的另一种实现方式 解决案例中的问题 AOP的概念 Spring中的AOP相关术语 Sprin ...

  9. CKA考试经验：报考和考纲

    1 报考相关 1.有效期一年.在一年内需要定好考试的时间. 2.提前15分钟进入考试系统, 提前进入考试系统后并不是立马开始考试,而是预留给考官时间考察你的考试环境 3.考试时间 ,注意报考的Time ...

  10. Java 中的接口还可以这样用，你知道吗？

    Java 程序员都知道要面向接口编程,那 Java 中的接口除了定义接口方法之外还能怎么用你知道吗?今天阿粉就来带大家看一下 Java 中的接口还可以有哪些用法. 基本特性 我们先看一下接口的基本特性 ...