<div class="two">
<h1>{{name}}</h1>
//這里實(shí)現(xiàn)組件代入锅尘，可以正常添加class等信息
<myapp class = 'pad'></myapp>
</div>
<script src="../js/vue/vue.min.js"></script>
<script>
// 注冊 component命名不要出現(xiàn)大寫
Vue.component('myapp', {
template: '<div v-bind:class="[{red:isRed,box:isBorder}]" :style = "tStyle">{{name}} : 介紹一下我的女朋友@{{gf}} <button @click = "changeGirl">換個(gè)名字</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>
