首页 > 其他分享 >013.Vue3入门,在App.vue中加载显示子页面

013.Vue3入门,在App.vue中加载显示子页面

时间:2024-08-10 21:49:56浏览次数:13  
标签:vue App 013 Vue3 Testpage001 页面

1、App.vue代码如下:

<script setup>
import Testpage001 from './view/Testpage001.vue'
</script>

<template>
  <Testpage001/>
</template>

<style>
</style>

2、如图所示

 3、Testpage001的代码如下:

<template>
  <div class="subtitle">我是一个子页面,嘿嘿</div>
</template>

<script>
</script>

<style>
.subtitle {
  font-size: 30px;
  color: red;
}

</style>

4、运行的效果如下,可以正常显示子页面。

 

标签:vue,App,013,Vue3,Testpage001,页面
From: https://www.cnblogs.com/tianpan2019/p/18352832

相关文章

  • 012.Vue3入门,class属性的几种绑定方法
    1、代码如下:<template><h3>class绑定</h3><div:class="{'active':isActive,'text-danger':hasError}">Class样式绑定1</div><div:class="classObject">Class样式绑定2</div><div......
  • 基于java+ssm+vue的大学生社团活动管理微信小程序
    ......
  • uniapp-微信小程序实现分享给好友功能且动态页面
        uniapp全局设置分享朋友及分享到朋友圈功能,在我们没有配置微信的分享时候,微信小程序的时候可用看到,分享链接和这两个都是置灰的,如果我们想要让别人可以分享或者复制链接分享我们的小程序的话,就想要自己开发和配置。接下来分享全局实现的步骤(不需要在每个页面单......
  • 基于nodejs+vue酒店预定管理系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着旅游业的蓬勃发展,酒店业竞争日益激烈,如何高效管理酒店预定流程,提升客户体验,成为酒店管理者关注的焦点。传统的酒店预定方式往往存在信息不对称、预订流......
  • 基于nodejs+vue酒店在线管理系统[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网的普及和移动技术的飞速发展,传统酒店行业正经历着前所未有的变革。酒店顾客对于便捷、高效、个性化的服务需求日益增长,而传统的酒店管理模式已难......
  • 基于nodejs+vue酒店综合服务[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景在旅游与酒店行业日益融合的今天,酒店已不仅仅是提供住宿的场所,而是成为了集住宿、餐饮、休闲、购物等多种服务于一体的综合服务平台。随着消费者对旅行体验......
  • 基于nodejs+vue咖啡销售平台[程序+论文+开题]-计算机毕业设计
    本系统(程序+源码+数据库+调试部署+开发环境)带文档lw万字以上,文末可获取源码系统程序文件列表开题报告内容研究背景随着互联网的飞速发展和电子商务的普及,线上购物已成为消费者日常生活中不可或缺的一部分。咖啡,作为一种广受欢迎的饮品,其市场需求持续增长,特别是在年轻一代......
  • Java计算机毕业设计基于Android的生活记账小助手APP的设计与实现(开题报告+源码+论文)
    本系统(程序+源码)带文档lw万字以上 文末可获取一份本项目的java源码和数据库参考。系统程序文件列表开题报告内容研究背景在快节奏的现代生活中,个人财务管理成为了许多人面临的一大挑战。随着智能手机的普及和移动互联网技术的飞速发展,移动应用成为辅助个人财务管理的得力......
  • 011.Vue3入门,计算属性的使用,让模板语法更简洁
    1、代码如下:<template><h3>计算属性</h3><div>{{func1}}</div><div>{{func1}}</div><div>{{func1}}</div><!--<div>{{func1()}}</div>--><!--<div>{{func1()}}&......
  • 基于Springboot+Vue的学院网站系统 (含源码数据库)
    1.开发环境开发系统:Windows10/11架构模式:MVC/前后端分离JDK版本:JavaJDK1.8开发工具:IDEA数据库版本:mysql5.7或8.0数据库可视化工具:navicat服务器:SpringBoot自带apachetomcat主要技术:Java,Springboot,mybatis,mysql,vue2.视频演示地址3.功能这个系......