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

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

代码实例：

<!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 可以为一个对象

    // 3. 但是组件中的 data 必须是一个方法 data: function(){}或者data(){}

    // 4. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;

    // 5. 组件中 的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.component('mycom1', {

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

      data: function () {

        return {

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

        }

      }

})

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

为什么？

实例：

<!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">

    <counter></counter>

    <hr>

    <counter></counter>

    <hr>

    <counter></counter>

  </div>

  <template id="tmpl">

    <div>

      <input type="button" value="+1" @click="increment">

      <h3>{{count}}</h3>

    </div>

  </template>

  <script>

    var dataObj = { count: 0 }

    // 这是一个计数器的组件,身上有个按钮,每当点击按钮,让 data 中的 count 值 +1

    Vue.component('counter', {

      template: '#tmpl',

      data: function () {

        // return dataObj:表示每个组件中data数据共享

        return { count: 0 }   //私有

      },

      methods: {

        increment() {

          this.count++

        }

      }

    })

    // 创建 Vue 实例，得到 ViewModel

    var vm = new Vue({

      el: '#app',

      data: {},

      methods: {}

    });

  </script>

</body>

</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. Http协议！（转）

    背景 我们在测试中,经常与http协议, URL打交道,不时会修改URL的参数来达到不同的测试目的或者转到不同的页面,那么,你对HTTP协议了解多少呢?今天我们来总结下. #1 HTTP协议简介 HT ...

  2. 【OpenGL学习】 四种绘制直线的算法

    我是用MFC框架进行测试的,由于本人也没有专门系统学习MFC框架,代码若有不足之处,请指出. 一,先来一个最简单的DDA算法 DDA算法全称为数值微分法,基于微分方程来绘制直线. ①推导微分方程如下: ...

  3. 基于 Spring + Atomikos + Mybatis的多数据源配置（含有BaseDao,BaseService）

    1.spring配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=" ...

  4. 洛谷 题解 UVA1151 【买还是建 Buy or Build】

    [题意] 平面上有\(n(n<=1000)\)个点,你的任务是让所有n个点联通.为此,你可以新建一些边,费用等于两个端点的欧几里得距离平方.另外还有\(q(q<=8)\)个套餐可以购买,如 ...

  5. Python视频教程免费分享（2020年最新版）

    为期92天的全套Python视频教程免费分享,总计57G! 里面还有我的笔记,希望对大家有帮助哈~ 1-32天 … … 65-92天 百度云网盘: 链接: https://pan.baidu.com/ ...

  6. 【坑】Mybatis 多次逆向工程生成mapper文件

    在使用 mybatis 逆向工程的时候,多次逆向工程生成的文件,是不会产生覆盖的,而是追加: 假如,你第一次逆向,发生数据库的某个字段类型错了,修改以后再次逆向,那么得到的 mapper文件,将是 2 ...

  7. 第2章：LeetCode--第二部分

    本部分是非Top的一些常见题型及不常见题 LeetCode -- Longest Palindromic Substring class Solution { public: int isPalind ...

  8. mac 安装 navicat for mysql 破解版

    mac 安装 navicat for mysql 破解版,直接安装,亲测可用 首先打开mac控制台输入命令行:sudo spctl --master-disable 百度盘,提取码: vrtr 失效请 ...

  9. vmware 安装XP 32位Professional版本

    VMware14 安装XP 专业版,总部报错Dicrectory Boot not found   下载了N多个XP的版本发现,原来是XP版本的问题,现将正确版本写在这里,以备后用 百度网盘共享位置 ...

  10. asp.net mvc抓取微信文章里面所有的图片

    /// <summary> /// 下载指定URL下的所有图片 /// </summary> public class WebPageImage { /// <summa ...