Vue的组件封装

1. 全局组件封装:

Vue.component(" 组件名 ",{
     template:`HTML片段`, //代替了以前的el
    //<button>-</button><span>{{n}}</span><button>+<bu
     data:function(){
       return {//相当于以前的data
         n:1
       }
     },

2 下面来个例子，让我们更好的熟悉Vue

Vue.component("my-counter",{   template:`<div>
    <button @click="sub">-</button>
    <span>{{n}}</span>
    <button @click="add">+</button>   </div>`,  
    data:function(){
    return { n:1 }   }, 
    methods:{
    sub(){ this.n--; },
    add(){ this.n++; }  } })

为了让大家更能清楚的看到，特意附上两张 图 ！！！

这是对组件的封装文件起名为 my-counter.js

记住一定要引入上面的两个文件，不然不会生效的，，，