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. SolidEdge ST8安装教程

    SolidEdge ST8安装教程: 1.使用百度云客户端下载Solidedge ST8软件安装包,打开软件安装文件夹: 2.选择.ISO安装文件,打开.ISO安装文件,可以解压或使用虚拟光驱加载: ...

  2. AArch32/AArch64应用程序级内存模型(五)

    本文主要为了记录在学习armv8的过程中的一些感悟.由于原文部分章节晦涩难懂,作者参考了网上很多优秀博主的部分章节(可能是直接摘录)并结合自己的理解重新整理了当前这个版本.文中不免有部分章节讲解很浅, ...

  3. 理解MySQL事务

    事务是什么 百度百科是这么定义的: 事务(Transaction),一般是指要做的或所做的事情.在计算机术语中是指访问并可能更新数据库中各种数据项的一个程序执行单元.在关系数据库中,一个事务可以是一条 ...

  4. CPU体系（2）：ARM Store Buffer

    本文主要翻译自 Arm Cortex-M7 Processor Technical Reference Manual r1p2 其中章节 Memory System / L1 caches / Sto ...

  5. .net core/5/6/7中WPF如何优雅的开始开发

    WPF是微软的.net平台中的一个桌面客户端应用程序框架,经常用于企业开发windows桌面客户端,广泛应用于中小企业快速开发一款工具,本人也是比较喜欢利用WPF开发一些小工具. 目录 知名案例 .n ...

  6. windows 使用ACR122U-A9设备读写M1卡

    软件地址 M1卡服务程序 安装好驱动后就可以破解,破解成功后的秘钥会显示出来(记录下来),同级目录会生成一个dump文件,这个文件包含此M1卡的全部数据,可以使用hexedit打开,编辑或修改 Mif ...

  7. 1. scrapy 框架应该怎么学习(前言)

    其实 scrapy 框架并不难学习, 我觉得分为两部分: 命令 和 代码逻辑的构建 1. 如何学习命令 其实 scrapy 已经帮我们做好了很充足的说明了, 下面我来说如何好好利用这些说明 scrap ...

  8. svn 日常使用的错误集锦

    1.SVN:Previous operation has not finished; run 'cleanup' if it was interrupted 当时遇到这个问题时,找了各种解决方案什么要 ...

  9. css初始化收集

    页面元素样式初始化 * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 100px; } /* 去掉a链接的文 ...

  10. C++编程笔记(多线程学习)

    目录 一.线程创建 二.线程的相关操作 2.1 join 2.2 detach 2.3 joinable 三.线程参数 3.1传参所引发的资源回收问题 3.2 将对象的成员函数作为入口函数 四.线程的 ...