4. 编写app组件

1. 代码

main.ts


// 引入createApp用于创建应用
import {createApp} from "vue"// 引入App根组件
import App from './App.vue'   createApp(App).mount('#app')

App.vue

<!-- vue文件可以写三种标签1. template标签,写html结构2. script 脚本标签,写JS/TS代码3. style标签,写样式-->
<template><div class="app"><h1>你好啊</h1></div>
</template><script lang="ts">// 默认暴露app组件 export default {name: 'App' // 组件名}
</script>
<style>.app{/* 背景色-浅灰色 */background-color: #ddd;/* 盒子阴影 */box-shadow: 0 0 10px;/* 圆角 */border-radius: 10px;/* 内边距 */padding: 20px;}
</style>

2. 效果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/508394.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

外包干了6个月,技术退步明显

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入广州某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

HTML+CSS+JS:日夜交替

效果演示 实现了一个简单的日夜交替效果的动画。页面中包含了太阳、月亮和海洋的元素&#xff0c;通过切换按钮可以切换页面的主题&#xff0c;从白天切换到黑夜&#xff0c;或者从黑夜切换到白天。 Code <div class"btn-box"><div class"sunBtn"…

unity学习(45)——选择角色菜单——客户端处理服务器的数据

1.已知客户端ReceiveCallBack中已经收到来自服务器返回的数据包。 2.问题是客户端MessageManager中的Update并没有拆解该数据包 &#xff0c;因该是因为脚本没有挂载。 挂在SelectMenu场景中的Camera上即可。 挂载后成功达到目地 其中Update中的List是一个起到全局效果的static…

ArcGIS Runtime For Android开发之符号化和图层渲染

一、用Symbol对要素进行符号化 首先我们看一下Symbol 接口关系&#xff1a; 1、SimpleFillSymbol 他是用来进行简单的Graphic面要素填充符号化的&#xff0c;它可以设置要素的填充颜色&#xff0c;边线颜色、线宽&#xff0c;其用法如下&#xff1a; Polygon polygonnew Po…

笔记本hp6930p安装Android-x86补记

在上一篇日记中&#xff08;笔记本hp6930p安装Android-x86避坑日记-CSDN博客&#xff09;提到hp6930p安装Android-x86-9.0&#xff0c;无法正常启动&#xff0c;本文对此再做尝试&#xff0c;原因是&#xff1a;Android-x86-9.0不支持无线网卡&#xff0c;需要在BIOS中关闭WLAN…

Matlab 机器人工具箱 动力学

文章目录 R.dynR.fdynR.accelR.rneR.gravloadR.inertiaR.coriolisR.payload参考链接 官网&#xff1a;Robotics Toolbox - Peter Corke R.dyn 查看动力学参数 mdl_puma560; p560.dyn;%查看puma560机械臂所有连杆的动力学参数 p560.dyn(2);%查看puma560机械臂第二连杆的动力学…

(C语言)qsort函数详解

目录 1. qsort解释 2. qsort实例 2.1 qsort排列整形数组类型&#xff1a; 2.2 qsort排列结构体类型数据&#xff08;字符串&#xff09;&#xff1a; 2.3 qsort排列结构体类型数据&#xff08;整形&#xff09;&#xff1a; 1. qsort解释 我们可以进入网站&#xff1a;qso…

STM32 (2)

1.stm32编程模型 将C语言程序烧录到芯片中会存储在单片机的flsah存储器中&#xff0c;给芯片上电后&#xff0c;Flash中的程序会逐条进入到CPU中去执行&#xff0c;进而CPU去控制各种模块&#xff08;即外设&#xff09;去实现各种功能。 2.寄存器和寄存器编程 CPU通过控制其…

RabbitMQ使用

目录 初识MQ 同步通讯和异步通讯​编辑 同步通讯 同步调用存在的问题 总结 同步调用优点&#xff1a; 同步调用的问题&#xff1a; 异步通讯 事件驱动优势 总结 什么是MQ RabbitMQ快速入门 RabbitMQ概述和安装 RabbitMQ结构和概念​编辑 总结 常见消息模型 不同…

matplotlib折线图

matplotlib折线图 假设一天中每隔两个小时的气温(℃)分别是[15,13,14.5,17,20,25,26,26,27,22,18,15], 画出对应的气温折线图 # 导入库 from matplotlib import pyplot as plt# 传入x轴和y轴数据, 是一个可迭代对象 # x轴和y轴的数据一起组成了所有要绘制出来的坐标 x range…

如何在Vue中实现事件处理?

Vue是一种流行的JavaScript框架&#xff0c;广泛应用于前端开发。在Vue中&#xff0c;事件处理是一个非常关键的概念&#xff0c;可以帮助我们实现用户与页面的交互&#xff0c;今天我们就来探讨一下如何在Vue中实现事件处理。 首先&#xff0c;让我们先了解一下在Vue中如何绑…

CentOS下安装Kafka3

kafka是分布式消息队列&#xff0c;本文讲述其在centos&#xff08;centos 7.5&#xff09;下的安装。安装过程可以参考其官方文档https://kafka.apache.org/36/documentation.html 首先在官网 https://kafka.apache.org/downloads 下载Kafka二进制文件&#xff08;官网的压缩包…