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

一、总结

一句话总结：

1. 组件可以有自己的 data 数据
2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!

1、组件数据使用实例？

template: '<h1>这是全局组件 --- {{msg}}</h1>'
    Vue.component('mycom1', {

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

      data: function () {

        return {

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

        }

      }

    })

二、组件中的data和methods

 <!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}}</h1>',

       data: function () {

         return {

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

         }

       }

     })

     // 创建 Vue 实例，得到 ViewModel

     var vm = new Vue({

       el: '#app',

       data: {},

       methods: {}

     });

   </script>

 </body>

 </html>
 

黑马vue---59-60、组件中的data和methods的更多相关文章

  1. Vue系列之 => 组件中的data和methods

    使用data <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. vue组件中的data与methods

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

  3. vue 父组件使用子组件中的data或methods

    1.调用子组件的时候 定义一个ref 2.在父组件里面通过 this.$refs.verify.属性 this.$refs.verify.方法

  4. 深入理解--VUE组件中数据的存放以及为什么组件中的data必需是函数

    1.组件中数据的存放 ***(重点)组件是一个单独模块的封装:这个模块有自己的HTML模板,也有data属性. 只是这个data属性必需是一个函数,而这个函数返回一个对象,这个对象里面存放着组件的数据 ...

  5. 15.Vue组件中的data

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

  6. Vue 组件中的data数据

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

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

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

  8. 第六章 组件 56 组件-组件中的data

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  9. vue-为什么子组件中的data选项必须是函数？

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. JS做2048

    首先我们了解一下2048这个游戏的原理: 他由一个4x4二维数组组成,在游戏一开始时候在随机位置随机生成一个2或者4 如: 1.每点击一次开始就刷新一次游戏界面: 2.通过键盘的上下左右四个方向键分别 ...

  2. PHP函数问题

    有时候,运行nginx和PHP CGI(PHP FPM)web服务的Linux服务器,突然系统负载上升,用top命令查看,很多phpcgi进程的CPU利用率接近100%后来通过跟踪发现,这种情况与PH ...

  3. 软件打包 Inno

    官网 http://www.jrsoftware.org/ 新建 点击工具栏第一项"新建".输入产品的名称.版本号.公司网址等信息 添加应用程序文件 应用程序图标 应用程序文档 许 ...

  4. Axure流程图

    什么是流程图 一个流程图可用于展示各种各样的处理流程,包括用例流程.商业流程.页面流程等.在Axure中,流程图常用于提供一个高保真的.能通过所设计的页面来完成的任务视图.一张简明的流程图,能促进和其 ...

  5. Computer Vision_33_SIFT：Object recognition from local scale-invariant features——1999

    此部分是计算机视觉部分,主要侧重在底层特征提取,视频分析,跟踪,目标检测和识别方面等方面.对于自己不太熟悉的领域比如摄像机标定和立体视觉,仅仅列出上google上引用次数比较多的文献.有一些刚刚出版的 ...

  6. 网络分类及OSI七层模型

    一.网络分类: 局域网(LAN)是指在某一区域内由多台计算机互联成的计算机组.一般是方圆几千米以内.局域网可以实现文件管理.应用软件共享.打印机共享.工作组内的日程安排.电子邮件和传真通信服务等功能. ...

  7. select函数的详细使用（C语言）

    Select在Socket编程中还是比较重要的,可是对于初学Socket的人来说都不太爱用Select写程序,他们只是习惯写诸如connect.accept.recv或recvfrom这样的阻塞程序( ...

  8. Qt一些方便易用的小技巧

    延迟给自己发信号执行操作 //延迟4500毫秒, 改变Status的值. QTimer::singleShot(4500, this, [&](){ this->Status = 0; ...

  9. iframe中的target属性

    在使用iframe的时候,我们有时候会遇到,外面的链接,去操作iframe中的页面 <!DOCTYPE html> <html> <head> <meta c ...

  10. less混合

    混合(mixin)变量 .border{ border: 5px solid pink; } .box{ width: 300px;height:300px; .border; } => .bo ...