黑马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. JavaScript Drum kit

    用 JavaScript 实现网页鼓乐器,相关的初始代码在 JavaScript30 官网和 GitHub 上已经存在.我把 sound 文件夹下的音频全部替换掉了,一些相关解释也直接在注释中标明. ...

  2. 关于js异步的一些知识点

    1,什么是单线程,和异步有什么关系 单线程-只有一个线程,只能做一件事 单线程的原因:避免DOM 渲染的冲突 浏览器需要渲染DOM JS 可以修改DOM 结构 JS 执行的时候,浏览器DOM 渲染会暂 ...

  3. K2 BPM_当BPM遇上RPA | 企业合规和风险管理从此更高效_全球领先的工作流引擎

    强化企业合规与风险管理已成为全球企业发展的共识,尤其是对于药企.银行.地产这类对于合规性要求高的企业而言,识别预测潜在的管理风险和遵循不断升级的合规义务,是保证企业平稳运行的关键. 如何从流程层面降低 ...

  4. Signal Processing and Pattern Recognition in Vision_15_RANSAC：Random Sample Consensus——1981

    此部分是 计算机视觉中的信号处理与模式识别 与其说是讲述,不如说是一些经典文章的罗列以及自己的简单点评.与前一个版本不同的是,这次把所有的文章按类别归了类,并且增加了很多文献.分类的时候并没有按照传统 ...

  5. linux添加地址映射

  6. 异常-Exception in thread "main" net.sf.jsqlparser.parser.TokenMgrError: Lexical error at line 1, column 596. Encountered: <EOF> after :

    1 详细异常 Exception in thread "main" net.sf.jsqlparser.parser.TokenMgrError: Lexical error at ...

  7. pythoth 中常用的魔法方法

    Python魔法方法(magic method),顾名思义,魔法总是带有一些神奇色彩,就跟魔术似的.它也是有自己的规律,在这里或者说规则更合适一些. 魔法方法有一个非常鲜明的特征,就是总是被双下划线所 ...

  8. Windows 10版本区别

    在msdn资源站上看到两个下载不同的区别,二者都内置专业版,不同之处在于: consumer_editions 版本包含:(个人使用 零售版) Home(家庭版); Education(教育版) ; ...

  9. 【NOIP/CSP2019】D2T1 Emiya 家今天的饭

    这个D2T1有点难度啊 原题: 花了我一下午的时间,作为D2T1的确反常 条件很奇怪,感觉不太直观,于是看数据范围先写了个暴力 写暴力的时候我就注意到了之前没有仔细想过的点,烹饪方式必须不同 虽然a很 ...

  10. Python基础之类

    一.摘要 面向对象编程 是最有效的软件编写方法之一.在面向对象编程中,你编写表示现实世界中的事物和情景的类,并基于这些类来创建对象.编写类时,你定义一大类对象都有的通用行为.基于类创建对象 时,每个对 ...