vue组件的三个组成部分
在template中只能出现一个根节点
- template组件—>模板结构
- script组件—>javacript行为
- style —>组件的样式
<template>
<div>
<h3 class="h3-box">我是{{username}}同学,
今年{{age}}岁,请多多关照!</h3>
</div>
</template>
<script>
export default {
//.vue组件中的data必须是一个函数,不能是对象
data(){
return {
username:'小伍',
age:'19'
}
},
methods:{
changeName(){
//在组件中this表示当前组件的实例对象
this.username = '小程'
}
}
}
</script>
<style scoped>
.h3-box{
background-color: plum;
display: block;
height: 200px;
width: 200px;
color: #FFF;
}
</style>