<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里加载标签要加上反引号 ``