1. <!DOCTYPE html>
    2. <html lang="en">
    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.js"></script>
    10. </head>
    12. <body>
    13.     <template id="tmpcom">
    14.         <div>
    15.             <hr>
    16.             <input type="button" value="+1" @click="increment">
    17.             <h3>{{msg}}</h3>
    18.             <hr>
    19.         </div>
    20.     </template>
    21.     <div id="app">
    22.         <com></com>
    23.         <com></com>
    24.         <com></com>
    25.     </div>
    26.     <script>
    27.         Vue.component('com',{
    28.             template:"#tmpcom",
    29.             methods:{
    30.                 increment(){
    31.                     this.msg+=1
    32.                 }
    33.             },
    34.             data:function(){
    35.                 return {
    36.                     msg:0
    37.                 }
    38.             }
    39.         })
    40.         var vm=new Vue({
    41.            el:'#app',
    42.            data:{},
    43.            methods:{}
    44.         });
    45.     </script>
    46. </body>
    48. </html>

    1.gif