zoukankan      html  css  js  c++  java
  • VUE参考---为什么组件中的data必须是一个方法且返回一个对象

    VUE参考---为什么组件中的data必须是一个方法且返回一个对象

    一、总结

    一句话总结:

    便于复用的组件保持自己的数据,让各个复用组件的数据不一样
      <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>
    
        // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
        Vue.component('counter', {
          template: '#tmpl',
          data: function () {
            // return dataObj
            return { count: 0 }
          },
          methods: {
            increment() {
              this.count++
            }
          }
        })

    1、如果想复用的组件共享数据,应该如何做?

    组件的data返回一个共享的数据(比如外部对象)

    二、为什么组件中的data必须是一个方法且返回一个对象

    博客对应课程的视频位置:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5   <meta charset="UTF-8">
     6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8   <title>Document</title>
     9   <script src="./lib/vue-2.4.0.js"></script>
    10 </head>
    11 
    12 <body>
    13   <div id="app">
    14     <counter></counter>
    15     <hr>
    16     <counter></counter>
    17     <hr>
    18     <counter></counter>
    19   </div>
    20 
    21 
    22   <template id="tmpl">
    23     <div>
    24       <input type="button" value="+1" @click="increment">
    25       <h3>{{count}}</h3>
    26     </div>
    27   </template>
    28 
    29   <script>
    30     var dataObj = { count: 0 }
    31 
    32     // 这是一个计数器的组件, 身上有个按钮,每当点击按钮,让 data 中的 count 值 +1
    33     Vue.component('counter', {
    34       template: '#tmpl',
    35       data: function () {
    36         // return dataObj
    37         return { count: 0 }
    38       },
    39       methods: {
    40         increment() {
    41           this.count++
    42         }
    43       }
    44     })
    45 
    46     // 创建 Vue 实例,得到 ViewModel
    47     var vm = new Vue({
    48       el: '#app',
    49       data: {},
    50       methods: {}
    51     });
    52   </script>
    53 </body>
    54 
    55 </html>
     
  • 相关阅读:
    第一节:SpringMVC概述
    SpringMVC【目录】
    Windows 系统快速查看文件MD5
    (error) ERR wrong number of arguments for 'hmset' command
    hive使用遇到的问题 cannot recognize input
    Overleaf支持的部分中文字体预览
    Understanding and Improving Fast Adversarial Training
    Django2实战示例 第十三章 上线
    Django2实战示例 第十二章 创建API
    Django2实战示例 第十一章 渲染和缓存课程内容
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/12752243.html
Copyright © 2011-2022 走看看