1.组件中展示数据和响应事件:

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

代码实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./lib/vue-2.4.0.js"></script>
  9. </head>
  10.  
  11. <body>
  12.   <div id="app">
  13.     <mycom1></mycom1>
  14.   </div>
  15.   <script>
  16.     // 1. 组件可以有自己的 data 数据
  17.     // 2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象
  18.     // 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){}
  19.     // 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
  20.     // 5. 组件中 的data 数据使用方式,和实例中的 data 使用方式完全一样!!!
  21.     Vue.component('mycom1', {
  22.       template: '<h1>这是全局组件 --- {{msg}}</h1>',
  23.       data: function () {
  24.         return {
  25.           msg: '这是组件的中data定义的数据'
  26.         }
  27.       }
  28.     })
  29.  
  30.     // 创建 Vue 实例，得到 ViewModel
  31.     var vm = new Vue({
  32.       el: '#app',
  33.       data: {},
  34.       methods: {}
  35.     });
  36.   </script>
  37. </body>
  38. </html>

注意：

  1. Vue.component('mycom1', {
  2.       template: '<h1>这是全局组件 --- {{msg}}</h1>',
  3.       data: function () {
  4.         return {
  5.           msg: '这是组件的中data定义的数据'
  6.         }
  7.       }
  8. })

注意：组件中的 data 必须是一个方法 data: function(){}或者data(){}，这个方法内部,还必须返回一个对象才行：

为什么？

实例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <title>Document</title>
  8.   <script src="./lib/vue-2.4.0.js"></script>
  9. </head>
  10.  
  11. <body>
  12.   <div id="app">
  13.     <counter></counter>
  14.     <hr>
  15.     <counter></counter>
  16.     <hr>
  17.     <counter></counter>
  18.   </div>
  19.  
  20.   <template id="tmpl">
  21.     <div>
  22.       <input type="button" value="+1" @click="increment">
  23.       <h3>{{count}}</h3>
  24.     </div>
  25.   </template>
  26.  
  27.   <script>
  28.     var dataObj = { count: 0 }
  29.     // 这是一个计数器的组件,身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
  30.     Vue.component('counter', {
  31.       template: '#tmpl',
  32.       data: function () {
  33.         // return dataObj:表示每个组件中data数据共享
  34.         return { count: 0 }   //私有
  35.       },
  36.       methods: {
  37.         increment() {
  38.           this.count++
  39.         }
  40.       }
  41.     })
  42.  
  43.     // 创建 Vue 实例，得到 ViewModel
  44.     var vm = new Vue({
  45.       el: '#app',
  46.       data: {},
  47.       methods: {}
  48.     });
  49.   </script>
  50. </body>
  51. </html>

Vue组件中的method,见上面代码

15.Vue组件中的data的更多相关文章

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

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

  2. vue组件中的data与methods

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

  3. Vue 组件中的data数据

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

  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系列之 => 组件中的data和methods

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

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

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

随机推荐

  1. ubuntu 18.04下greenplum安装笔记（二）安装Greenplum的失败的尝试

    之前对Linux环境进行了搭建,现在开始进行Greenplum的正式安装. 下载 进Greenplum的官网:https://greenplum.org/download/ 可以发现,对于ubuntu ...

  2. NET-使用Js调用WebService

    注:JsWebServiceObject 此类是我做测试示例时为了测试js是否能调用webService中的复合类型而单独新建的一个类 此类中只有名字与年龄的属性. 最近身边的一个朋友做项目,其中有一 ...

  3. 查看某个进程PID对应的文件句柄数量，查看某个进程当前使用的文件句柄数量

    ================================ 1.linux所有句柄查询 lsof -n|awk '{print $2}'|sort|uniq -c |sort -nr|more ...

  4. 同时支持Android 和 ios 投屏到电脑的软件，Support Android and ios screen shrare to PC - 希沃授课助手

    最近学校由粉笔黑板更换了智慧电子黑板,然后发现了一个好玩的软件. 感谢希沃公司的开发: 希沃授课助手,这是一款同时支持Android 和 ios 投屏和远程控制的. 效果很流畅,非常赞

  5. golang web框架 beego 学习 （七）json转数组

    Modules type User struct { Id int64 `json:"id"` Name string `json:"name"` Email ...

  6. C语言获取文件大小相关操作

    C语言获取文件大小相关操作 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明 通常在希望从文件中把数据全都出来赋值给一个数组或者某一个指针,然后再进行相关 ...

  7. 基于MSP430G2231实现多路数据采集器

    基于MSP430G2231实现多路数据采集器 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 系列博客说明:此系列博客属于作者在大三大四阶段所储备的关于电子电 ...

  8. php 云片国外短信实例

    <?php namespace Ruifi\App; class SmsL { public function smsIcode($moblie,$sms_code,$intl_code){ h ...

  9. Shiro加盐加密

    接本人的上篇文章<Shiro认证.角色.权限>,这篇文章我们来学习shiro的加盐加密实现 自定义Realm: package com.czhappy.realm; import org. ...

  10. eclipse界面

    Eclipse工作空间的基本配置 A:行号的显示和隐藏 显示:在代码区域的最左边的空白区域,右键 -- Show Line Numbers即可. 隐藏:把上面的动作再做一次. B:字体大小及颜色 a: ...