vue学习:组件化
把公共代码抽离出来声明成一个组件可以重复利用,有全局声明一个组件和局部声明一个组件,都在如下代码中写明了:
<div id="app">
<button @click="count++">我被点击了{{count}}次</button>
<quanjuzujian></quanjuzujian>
<jubuzujian></jubuzujian>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
//全局声明一个组件
Vue.component("quanjuzujian",{
template: `<button @click="count++">我被点击了{{count}}次</button>`,
data(){
return{
count:1
}
}
});
//局部声明一个组件
const jubu = {
template: `<button @click="count++">我被点击了{{count}}次</button>`,
data(){
return{
count:1
}
}
}
new Vue({
el:"#app",
data:{
count:1
},
components:{
jubuzujian:jubu
}
})
</script>