vue学习：组件化

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>