vue学习13-自定义组件 

 1 <!DOCTYPE html>
 2 <html lang='en'>
 3 <head>
 4  <meta charset='UTF-8'>
 5  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
 6  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
 7  <script src='https://unpkg.com/vue/dist/vue.js'></script>
 8  <title></title>
 9 </head>
10 <body>
11  <div id='app'>
12    <botton-count></botton-count>
13    <botton-count></botton-count>
14 
15    <botton-count></botton-count>
16 
17  </div>
18  <script>
19    Vue.component("botton-count",{
20      template:"<button @click='count+=1'>点击了{{count}}</button>",
21      data:function(){
22       return{
23         count:0
24       }
25      }
26    }
27 
28    )
29 
30     new Vue({
31      el:'#app',
32      data:{}
33    }
34 )
35 </script>
36 </body>
37 </html>

 

posted @ 2021-12-28 17:58  空谷近心  阅读(40)  评论(0)    收藏  举报