黑马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计算接口调用时间

    方法一: LocalDateTime beginTime = LocalDateTime.now(); Long opetime = Duration.between(between,LocalDat ...

  2. wsl2 debian安装docker

    应用商店下载debian 安装docker 安装依赖 打开安装好的docker安装依赖 sudo apt-get install apt-transport-https ca-certificates ...

  3. 使用.bat 批量将部分文件迁移到新的路径下

    1.建一个11.bat ,里面写  :   dir  /b /s  >1111.txt 保存后运行 即将所有的文件路径保存到1111.txt中 2.可以将获取的路径复制到execl中,找到自己需 ...

  4. jade安全转义和非转义

      - var data = 'text' - var htmlData = ')</script><span>script</span>' 例如上面的例子,假如没 ...

  5. mongodb索引简介

    上面讲解了数据的查询和索引的简单使用,并且说明索引可以显著的加快查询速度,实际上查询的种类有很多,与之对应的索引的种类也有很多,接下来会与索引一起,在说明索引种类的同时,详细介绍下查询的参数 1.索引 ...

  6. socket 编程的一些应用例子

    1.#传输文件的例子 import socketfrom socket import *import osimport requests import time,socketserver,struct ...

  7. 关键字final 修饰类、方法、属性、参数类型

    笔记: /** 关键字final(最终的) 标记的类不能被继承, 提高安全性,提高程序的可读性 * 1.final 修饰类,这个类就不能被继承: 如:String类.StringBuffer类.Sys ...

  8. 2018江苏徐州icpc试题-A-生化危机【多源点-基础广搜】

  9. 【转】关于 Goroutine Channel Select 的用法和理解

    原文:https://blog.csdn.net/jfkidear/article/details/88661693 ----------------------------------------- ...

  10. jmeter接口测试-使用aes加密算法

    好久没写文章了,一直在忙公司项目的事情!今天抽空写篇关于jmeter加密的教程吧! 随着互联网的发展,越来越多的系统开始提供接口调用! 我们进行接口测试的时候,大多数接口或多或少的都使用了各种加密验证 ...