1. <html>
    2.   <head>
    3.     <style>
    4.       .btnClass{
    5.         background-color: red;
    6.       }
    7.     </style>
    8.   </head>
    10.   <body>
    11.     <div id="app">
    12.       <vue_btn/>
    13.     </div>
    15.     </br>
    16.   <div id="app2">
    17.     <vue_btn/>
    18.   </div>
    19.   </body>
    21. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    22. <script>
    23.   //全局注册Vue组件
    24.   Vue.component('vue_btn',{
    25.     template:'<div> {{title}} <button ref="btn_vue" type="button" class="btnClass" @click="btn_click_fn">vue组件按钮</button> </div>',
    26.     data:function(){
    27.       return {title:'你好'}
    28.     },
    29.     methods:{
    30.       btn_click_fn:function(){
    31.         this.$refs.btn_vue.innerHTML = this.title;
    32.       }
    33.     }
    34.   });
    36.   new Vue({
    37.     el:'#app'
    38.   });
    40.   new Vue({
    41.     el:'#app2'
    42.   });
    43. </script>
    45. </html>