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

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue组件的三个组成部分 -> 正文阅读

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