【Vue】元件化Vue.component

Vue.component

<div id="app">
          <div>
            你已經點擊
            <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
          </div>
          <counter-component></counter-component> 
          <counter-component></counter-component>
        </div>

 <script>

          Vue.component("counter-component", {   //設定框架的名稱
            data: function () {
              return {
                counter: 0 
              }
            },
            template: `
            <div>
<button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
            </div>  //設定模板
            `
          })
          var app = new Vue({
            el: '#app',
            data: {
              counter: 0
            },
          });
        </script>

​