1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9.   <script src="./lib/vue-2.4.0.js"></script>
  10. </head>
  11.  
  12. <body>
  13.   <div id="app">
  14.     <mycom1></mycom1>
  15.   </div>
  16.  
  17.   <script>
  18.     // 1. 组件可以有自己的 data 数据
  19.     // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
  20.     // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
  21.     // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
  22.     Vue.component('mycom1', {
  23.       template: '<h1>这是全局组件 --- {{ msg }}{{msg1}}</h1>',
  24.       data: function () {
  25.         return {
  26.           msg: '这是组件的中data定义的数据' ,
  27.           msg1:'123456'
  28.         }
  29.       }
  30.     })
  31.  
  32.     // 创建 Vue 实例，得到 ViewModel
  33.     var vm = new Vue({
  34.       el: '#app',
  35.       data: {
  36.         msg:'这个是实例中的data的数据'
  37.       },
  38.       methods: {}
  39.     });
  40.   </script>
  41. </body>
  42.  
  43. </html>

Vue 组件中的data数据的更多相关文章

  1. 15.Vue组件中的data

    1.组件中展示数据和响应事件: // 1. 组件可以有自己的 data 数据 // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象 // 3. 但是组件中 ...

  2. vue组件中的data为什么是函数？

    一.vue组件中的data为什么是函数 为了保证组件的独立性 和 可 复用性,data 是一个函数,组件实例化的时候这个函数将会被调用,返回一个对象,计算机会给这个对象分配一个内存地址,你实例化几次, ...

  3. vue组件中的data与methods

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> ...

  4. Vue组件中的data属性

    Vue中的data属性专门用来以对象方式存放数据,它有两种用法. var vm=new Vue({ data:{a:1,b:2,}, }) var vm=new Vue({ data(){return ...

  5. 为什么vue组件中的data不是一个对象而是一个函数

    如果两个实例引用同一个对象,当其中一个实例的属性发生改变时,另一个实例属性也随之改变,只有当两个实例拥有自己的作用域时,才不会相互干扰. 这是因为JavaScript的特性所导致,在component ...

  6. Vue组件中的Data为什么是函数。

    简单点说,组件是要复用的,在很多地方都会调用.   如果data不是函数,而是属性,就又可能会发生多个地方的相同组件操作同一个Data属性,导致数据混乱. 而如果是函数,因为组件data函数的返回值是 ...

  7. Vue 组件中 data 为什么必须是函数

    原文地址 vue组件中的data必须是函数 类比引用数据类型 Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了; jav ...

  8. vue 组件中this指向

    今天开始学习慕课网的“去哪网”app开发,之前用学了一段时间对vue还是没有深刻理解透,先在开始要从新开始学习vue,今天学的第一堂课是vue 中v-model.v-for的简单例子,以前改变dom中 ...

  9. 黑马vue---59-60、组件中的data和methods

    黑马vue---59-60.组件中的data和methods 一.总结 一句话总结: 1. 组件可以有自己的 data 数据 2. 组件的 data 和 实例的 data 有点不一样,实例中的 dat ...

随机推荐

  1. win10下安装mongodb（解压版）

    首先到官网下载安装包.(https://www.mongodb.com/download-center#community) 1.创建mongodb目录 2.配置文件mongodb.config 3. ...

  2. 阿里工程师开发了一款免费工具，提升Kubernetes应用开发效率

    对于使用了Kubernetes作为应用运行环境的开发者而言,在同一个集群中我们可以使用命名空间(Namespace)快速创建多套隔离环境,在相同命名空间下,服务间使用Service的内部DNS域名进行 ...

  3. RabbitMQ默认端口

    4369 (epmd), 25672 (Erlang distribution)5672, 5671 (AMQP 0-9-1 without and with TLS)15672 (if manage ...

  4. install4j的使用

    用java写好了桌面应用,怎么搞成 那种常见的 双击之后 next.next...安装完成的按照包呢?用install4j.这东西有多好用呢?看看这款xml编辑软件,就是用install4j封装的安装 ...

  5. QPS 提升60%，揭秘阿里巴巴轻量级开源 Web 服务器 Tengine 负载均衡算法

    前言 在阿里七层流量入口接入层(Application Gateway)场景下, Nginx 官方的Smooth Weighted Round-Robin( SWRR )负载均衡算法已经无法再完美施展 ...

  6. hdu 1272 使用set和并查集

    http://acm.hdu.edu.cn/showproblem.php?pid=1272 这道题就是求图是不是连通无环,我觉得其实就是看看图是不是一棵最小生成树. 所以要是图满足条件,就必然有n个 ...

  7. Python学习之路11☞异常处理

    一 错误和异常 part1:程序中难免出现错误,而错误分成两种 1.语法错误(这种错误,根本过不了python解释器的语法检测,必须在程序执行前就改正) #语法错误示范一 if #语法错误示范二 de ...

  8. css字体大小单位

    1:px: 这个应该是国内使用较多的单位,意思为像素.因此,其视觉的呈现效果是与分辨率相关的.例如在1024*768分辨率下看12px的字体就比960*640下看到的“小”,其实字体像素未改变,所以觉 ...

  9. HZOJ Dash Speed

    测试点1-2:暴力. 测试点3-4:可以将边按r从大到小排序不断加入,然后用并茶几维护深度.好像也可以用猫树做. 好吧其他的部分分并没有看懂. 正解: 线段树分治,求出每个速度的答案. 对于速度区间$ ...

  10. shell学习（19）- find查找命令

    Linux find命令用来在指定目录下查找文件.任何位于参数之前的字符串都将被视为欲查找的目录名.如果使用该命令时,不设置任何参数,则find命令将在当前目录下查找子目录与文件.并且将查找到的子目录 ...