vue組件的拆分

vue組件的拆分

<div class="div">
    <!-- 拆分出來的組件  自定義名字moban -->
    <moban></moban>
</div> 

//vue 組件的聲明方式 Vue.component

//創建一個叫做 moban 的組件

Vue.component("moban",{
   template : `
        <div>
            <h2>這是拆分出來的組件</h2>
            <p>{{ mgs}}</p>
        </div>
   `,
   data(){
        return {
            mgs: "與太陽肩並肩"
        }
   } 
})

new Vue({
    el : ".div"
})

//ES6語法 `<div><h2>這是拆分出來的組件<h2><p>{{ mgs}}</p></div>`  需在一個標簽的包裹下下