组件化-默认组件

<div id="box">
    <Demo></Demo>
    <Demo></Demo>
    <Demo></Demo>
    <Demo></Demo>
    <Demo></Demo>
    <Demo></Demo>
    <Demo></Demo>
    <Demo></Demo>

</div>
<script>
    //创建一个普通组件
    Vue.component("Demo",{
        template: `<div>
                       <button @click="add">+</button>
                       <input type="text" v-model="num" />
                       <button @click="num--">-</button>
                    </div>`,
    data(){
        // 写在这里的数据只有当前组件可以使用
        return {
            num: 0,
        }
    },
    methods:{
         add(){
             this.num++;
            }
        }
    });
    var vm = new Vue({
        el:"#box",
　　　　　// 这里写的数据是全局公用的，整个文件共享
        data:{
        }
    })
</script>

　　

在componet里加载标签要加上反引号 ``