黑马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. Java 面向对象（四）继承

    一.继承的概述(Inherited) 1.由来 多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多个类无需再定义这些属性和行为,只要继承那个类即可. 其中,多个类可以称为 子类(派生类 ...

  2. jvm系列(十):如何优化Java GC「

    转自:https://www.cnblogs.com/ityouknow/p/7653129.html 本文由CrowHawk翻译,地址:如何优化Java GC「译」,是Java GC调优的经典佳作. ...

  3. 【Linux】Linux基本命令

    一.Linux关机 shutdown -h 10 10min后关机 shutdown -h 10:00   10:00关机 shutdown -h now 或 halt 或 poweroff 立即关机 ...

  4. MySQL数据库用户和权限管理

    一.视图 视图:VIEW,虚表,保存有实表的查询结果,在视图插入的内容都会存入表中.创建方法: CREATE VIEW view_name [(column_list)] AS select_st ...

  5. STM32 ID (转)

    STM32唯一ID(Unique Device ID)的读取方法 (转)   每一个STM32微控制器都自带一个96位的唯一ID,也就是Unique Device ID或称为UID,这个唯一ID在任何 ...

  6. sleep() 和 wait() 有什么区别？（未完成）

    sleep() 和 wait() 有什么区别?(未完成)

  7. WCF Endpoint分类

    WCF中可以为一个Service配置多个Endpoint 这些Endpoint的分类方法有下面3中 1.全局就一个endpoint,一个接口公开所有的方法,这适合简单的业务场景 2.将endpoint ...

  8. 对Ajax的一些理解

    前言 在学习js的过程,我个人对于Ajax这项技术有着很深的印象,大概是因为它在我们网页开发过程中常见的交互里所发挥的作用太过于关键了吧,所以我想在这里好好地谈一些自己对它的理解. 概念理解 Ajax ...

  9. Luogu P3690【模板】Link Cut Tree （LCT板题）

    省选前刷道LCT板题(话说之前没做这道题-) CODE #include<bits/stdc++.h> using namespace std; inline void read(int ...

  10. Educational Codeforces Round 67 (Rated for Div. 2) B题【前缀+二分】【补题ING系列】

    题意:给出一个字符串s, 可以从左往右拿走s的字符, 至少要到s的第几个位置才能拼成t 思路:用二维数组记录前缀,然后二分即可. #include<bits/stdc++.h> using ...