<div class="two">
<h1>{{name}}</h1>
//这里实现组件代入，可以正常添加class等信息
<myapp class = 'pad'></myapp>
</div>

<script src="../js/vue/vue.min.js"></script>
<script>

// 注册 component命名不要出现大写
Vue.component('myapp', {

template: '<div v-bind:class="[{red:isRed,box:isBorder}]" :style = "tStyle">{{name}} : 介绍一下我的女朋友@{{gf}} <button @click = "changeGirl">换个名字</button> </div>',

data:function(){
    return {
        name: 'xjh',
        gf: '紫霞仙子',
        isRed:true,
        isBorder:true,
        tStyle:{
            color:'white',
            fontSize:'50px'
        }
    }
},

//组件方法
methods:{

    changeGirl:function(){
        this.gf = 'glf baby'
    }
}

})

new Vue({
el:'.one',
data:{
name:'组件化01'
},
});

</script>