[JavaScript知识库]vue组件的三个组成部分

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>