<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>
.btn{
padding: 15px;
cursor:pointer;
font-size: 24px;
}
View Compiled
//拆分的原件
Vue.component("counter-component", {
data() {
return {
counter: 0
};
},
template: `
<div>
你已經點擊 <button class="btn btn-outline-secondary btn-sm" @click="counter += 1">{{ counter }}</button> 下。
</div>
`
});
//原宣告的 Vue 物件
var app = new Vue({
el: "#app",
data: {
counter: 0
}
});
This Pen doesn't use any external CSS resources.