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. query解决touchmove时屏蔽touchend

    var dragging = false; $("li").on("touchmove",function(){ dragging = true; }); $( ...

  2. Golang 异常/日志处理

    1.xerrors 异常 xerrors 包是一个非常棒的设计,不同于往常语言如java/php,因为go的errors只是一个string类型的映射,所以内存占用空间很少.这在golang的核心库和 ...

  3. python 问题解决：UnicodeEncodeError: 'ascii' codec can't encode character u'\uff08'

    第一种方案(90%情况下,大部分帖子都是这个)一般报错到代码都是自己写到代码,代码上添加 import sysreload(sys)sys.setdefaultencoding('utf-8') 第二 ...

  4. [转帖]18W喂不饱有必要买30W充电器吗？iPhone 11 Pro Max充电评测

    18W喂不饱有必要买30W充电器吗?iPhone 11 Pro Max充电评测 https://www.cnbeta.com/articles/tech/895237.htm 改天买一个 设备玩一玩 ...

  5. 【牛客网】Idol Master

    [牛客网]Idol Master 也是一道网络流解线性规划 不过需要从小于号的那边解 限制是\(a \leq \sum_{i = 1}^{k} x_{i}\leq b\) 其中\(0 \leq x_{ ...

  6. PHP常量：define()和const的区别

    常量,就是一个用于存储“不会(也不允许)变化的数据”的标识符.比如圆周率,在一定的应用场景中,就是一个固定的值(人为规定为某个值).常量默认大小写敏感.通常常量标识符总是大写的. (1)define( ...

  7. WUSTOJ 1246: 字符串排序（Java）

    1246: 字符串排序 题目   输入n(n<100)个字符串,每个字符串长度不超过1000,将他们按字典顺序输出.更过内容点击标题. 分析   Java中的ArrayList()可以比较方便的 ...

  8. preg_replace

    preg_replace — 执行一个正则表达式的搜索和替换 说明: preg_replace ( mixed $pattern , mixed $replacement , mixed $subje ...

  9. shell习题第23题：检测网卡流量

    [题目要求] 写一个脚本,检测网卡流量并记录到日志,需要按照如下格式并一分钟统计一次(只需统计外网网卡,网卡名称eth0) 2019-06-07 1:11 eth0 input: 1000bps et ...

  10. python练习：函数2

    习题: 定义一个方法get_num(num),num参数是列表类型,判断列表里面的元素为数字类型.其他类型则报错,并且返回一个偶数列表:(注:列表里面的元素为偶数). def get_num(num) ...