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. 第三章 授权——《跟我学Shiro》

    转发地址:https://www.iteye.com/blog/jinnianshilongnian-2020017 目录贴:跟我学Shiro目录贴 授权,也叫访问控制,即在应用中控制谁能访问哪些资源 ...

  2. vue中的.passive修饰符

    一.passive作用 详情请参考MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener)中 ...

  3. SQL入门经典（第四版）学习记录——SQL语法（二）

    一.创建表 create table 表里包含什么类型的数据 表的名称是什么 主键 列的名称是什么 每一列的数据类型是什么 每一列的长度是多少 表里哪些列可以是空的 语法: create table ...

  4. SQL,NoSQL和NewSQL

    一:概念 SQL(Structured Query Language):数据库,指关系型数据库.主要代表:SQL Server.Oracle.MySQL.PostgreSQL. NoSQL(Not O ...

  5. C++:标准模板库map

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能. 命名空间为std,所属头文件<map> 注意:不 ...

  6. C++中const关键字用法总结

    看完了c++ primer的基础篇,对const还是有点陌生,在这里小小地总结一下吧. 1) const与变量 在变量的定义前加上 const 修饰符即可完成const对象的创建. const int ...

  7. Vue中常用知识点demo

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  8. 利用Python进行数据分析_Pandas_层次化索引

    申明:本系列文章是自己在学习<利用Python进行数据分析>这本书的过程中,为了方便后期自己巩固知识而整理. 层次化索引主要解决低纬度形式处理高纬度数据的问题 import pandas ...

  9. spring 框架的核心总结

    最近在学习Java语言,从而也学习了SpringFramework 这个大名鼎鼎的框架.从而做一些的记录. 题外话: 学习过几种不同的语言,后来知道所有的编程语言里所有的概念翻来覆去都是一样的事物,只 ...

  10. mac OS 安装qt环境

    先安装xcode,然后从官网下载dmg安装包安装即可,这里主要出现一个问题就是创建的工程没法编译,提示没有构建包(kit) 要安装command line tool才行. 在命令行中输入: xcode ...