组件的基本结构

页面结构

<div id="app">
    <demo></demo>
</div>

<template id="demo">
    <div>
        <p>data-数据：{{nickname}}</p>
        <p>computed-计算属性：{{price}}</p>
        <button @click="ClickMe">组件的绑定事件</button>
    </div>
</template>

逻辑结构

var app = new Vue({
    el: '#app',
    components:{
        demo:{
            template:'#demo',
            //组件的数据
            data()
            {
                return {
                    nickname: '张三'
                }
            },
            //组件的计算属性
            computed:{
                price()
                {
                    return "￥100,0000.00"  
                }
            },
            //组件的方法
            methods:{
                ClickMe()
                {
                    alert('组件的事件方法')
                }
            }
        }
    }
})