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>`  需在一个标签的包裹下下