<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Document</title>

  <script src="./lib/vue-2.4.0.js"></script>

</head>

<body>

  <div id="app">

    <mycom1></mycom1>

  </div>

  <script>

    // 1. 组件可以有自己的 data 数据

    // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法

    // 3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;

    // 4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!

    Vue.component('mycom1', {

      template: '<h1>这是全局组件 --- {{ msg }}{{msg1}}</h1>',

      data: function () {

        return {

          msg: '这是组件的中data定义的数据' ,

          msg1:'123456'

        }

      }

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {

        msg:'这个是实例中的data的数据'

      },

      methods: {}

    });

  </script>

</body>

</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. 使用python爬去国家民政最新的省份代码的程序，requests,beautifulsoup,lxml

    使用的python3.6 民政网站,不同年份数据可能页面结构不一致,这点踩了很多坑,这也是代码越写越长的原因. 如果以后此段代码不可用,希望再仔细学习下 页面结构是否发生了变更. # -*- codi ...

  2. 全面系统Python3入门+进阶课程

    全面系统Python3入门+进阶课程 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频的感受,单论单个知识点课程本身没问题,大家看的时候 ...

  3. Git-svn：用git管理svn仓库

    1. 将svn仓库中的项目导入本地git仓库 使用 git svn clone [svn_url] 命令即可完成从svn仓库导入本地,由于该命令会将svn仓库中所有版本的更新都会同步到本地仓库,如果项 ...

  4. poj2195&&hdu1533 最小费用流

    这题也可以用km做,我写的代码km比费用流快很多. 最小费用流: #include<stdio.h> #include<string.h> #include<math.h ...

  5. iphone开发中使用nib（xib）文件的内存管理

    iphoneuinavigationcontrollercocoauiviewvariableswindows 在使用nib文件做界面开发的过程中,加载nib文件后,由于设置了outlet和deleg ...

  6. zabbix3.4.x添加短信报警

    一.修改zabbix_server.conf #vi /etc/zabbix/zabbix_server.conf 去掉注释: ### Option: AlertScriptsPath # Full ...

  7. hdu5131 贪心

    #include<stdio.h> #include<string.h> #include<algorithm> #include<string> #i ...

  8. thinkphp5.0 空模块、空控制器、空方法

    空模块 'exception_handle' => function(Exception $e){ // 参数验证错误 if ($e instanceof \think\exception\Va ...

  9. Quick BI独创千人千面的行级权限管控机制

    摘要 就数据访问权限而言,阿里巴巴以“被动式授权”为主,你需要什么权限就申请什么权限.但是,在客户交流过程中,我们发现绝大多数企业都是集中式授权,尤其是面向个人的行级权限管控,管理复杂度往往呈几何增长 ...

  10. tyvj1467 通向聚会的道路

    背景   Candy住在一个被划分为n个区域的神奇小镇中,其中Candy的家在编号为n的区域,Candy生日这天,大家都急急忙忙赶去Candy家庆祝Candy的生日. 描述   Candy共有t个朋友 ...