zoukankan      html  css  js  c++  java
  • Vue,组件-why componets data must be a function

    Vue,组件-why componets data must be a function

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     7     <title>Document</title>
     8     <script src="../js/vue.js"></script>
     9 </head>
    10 <body>
    11     <div id="app">
    12         <counter></counter>
    13         <hr>
    14         <counter></counter>
    15         <hr>
    16         <counter></counter>
    17     </div>
    18 
    19     <template id="tmpl">
    20         <div>
    21             <!-- increment 自增 -->
    22             <input type="button" value="+1" @click="increment" >
    23             <h3> {{ count }} </h3>
    24         </div>
    25     </template>
    26 
    27 </body>
    28 </html>
    29 <script>
    30 
    31     // 在外部定义一个对象, 放到计数器组件中 
    32     // 这样是可以的, 但仅限单个组件,如果是多个组件的话组件会一起变
    33     var dataObj = { count: 0}
    34 
    35     // 这是一个计数器组件, 身上有个按钮, 每当点击按钮, 让 data 中的 count 值 +1
    36      Vue.component('counter', {
    37          template:'#tmpl',
    38          data: function(){
    39             // 最好不要在外部定义
    40             // return dataObj;
    41 
    42             // 三个组件不会一起增加, 会单独增加, 这就是为什么要在内部定义对象
    43             return { count: 0 }
    44          },
    45          methods:{
    46             increment(){
    47                 // this.count +=1 
    48                 this.count++
    49             }
    50          }
    51      })
    52 
    53      var vm = new Vue({
    54          el: '#app',
    55          data: { },
    56          methods: { }
    57      })
    58 
    59 
    60 </script>

    效果图

  • 相关阅读:
    Java(八)——面向对象(4)-抽象类与接口
    Java(七)——面向对象(3)-多态
    Java(六)——面向对象(2)-继承
    Java(五)——面向对象(1)-基础
    Java(四)——数组
    Java(三)——流程控制
    Java(二)——Java基础
    易忘小技巧--yum
    网络测速命令--speedtest
    大型网站架构技术读后感
  • 原文地址:https://www.cnblogs.com/wo1ow1ow1/p/11138904.html
Copyright © 2011-2022 走看看