<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>
