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. Windows下免费的屏幕录制软件——EV录屏——推荐

    EV录屏,现在使用起来效果还不错. 软件地址:https://www.ieway.cn/evcapture.html

  2. iOS-收起键盘

    1 除了调用相应控件的resignFirstResponder方法外,还有另外三种办法: 2 重载UIViewController中的touchesBegin方法,然后在里面执行在[self.view ...

  3. JMETER安装教程

    jmeter的安装教程 1:安装jdk并且配置好环境变量,此处就不做赘述(前面的文档中有) 2:下载jmeter文件和jmeter的插件文件 JMeter:http://jmeter.apache.o ...

  4. socket 异步接收连接和接收数据

    using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; usin ...

  5. Flutter运行报错 `kernel_snapshot for errors` 解决方案

    Flutter运行报错 `flutter kernel_snapshot for errors`解决方案 当你Flutter项目删除了dart文件如果遇到 target:kernel_snapshot ...

  6. mysql 1366错误

  7. python while循环 - python基础入门(9)

    经过昨天的学习,相信大家已经对 python的条件判断表达式if/else 有一定的了解了,那么我们今天配合昨天的课程讲解一个新概念 – while循环 . 都说程序源于生活,假如有这样一个场景:老师 ...

  8. RabbitMQ的安装（Windows环境下）

    在使用RabbitMQ之前,先知道什么是AMQP,AMQP 即 Advanced Message Queuing Protocol ,又叫高级消息队列协议,是应用层协议的一个开放标准,其主要特征是面向 ...

  9. [转帖]linux常用命令大全（linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习）

    linux常用命令大全(linux基础命令入门到精通+实例讲解+持续更新+命令备忘录+面试复习) https://www.cnblogs.com/caozy/p/9261224.html 总结的挺好的 ...

  10. java模拟from表单提交，上传图片

    /** * java上传表单,有图片 * @param urlStr 上传地址 * @param textMap 表单参数 * @param fileMap 文件参数 key:文件名称 value:文 ...