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.mzph.cn/news/718739.shtml

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

相关文章

风险评估是什么意思?与等保测评有什么区别?

最近看到不少小伙伴在问&#xff0c;风险评估是什么意思&#xff1f;与等保测评有什么区别&#xff1f;这里我们就来简单聊聊。 风险评估是什么意思&#xff1f; 风险评估是指对某个特定领域或项目进行全面分析和评估&#xff0c;以确定可能存在的潜在风险和危害&#xff0c;并…

2023全球软件开发大会-上海站:探索技术前沿,共筑未来软件生态(附大会核心PPT下载)

随着信息技术的迅猛发展&#xff0c;全球软件开发大会&#xff08;QCon&#xff09;已成为软件行业最具影响力的年度盛会之一。2023年&#xff0c;QCon再次来到上海&#xff0c;汇聚了众多业界精英、技术领袖和开发者&#xff0c;共同探讨软件开发的最新趋势和实践。 一、大会…

服务器感染了.ma1x0勒索病毒,如何确保数据文件完整恢复?

引言&#xff1a; 网络安全成为至关重要的议题。.ma1x0勒索病毒是当前网络威胁中的一种恶意软件&#xff0c;它的出现给用户带来了极大的困扰。然而&#xff0c;正如任何挑战一样&#xff0c;我们也有方法来面对并克服.ma1x0勒索病毒。本文将全面介绍这种病毒的特点&#xff0…

MB85RC铁电 FRAM驱动(全志平台linux)

测试几天发现一个bug&#xff0c;就是无法一次读取32个字节的数据&#xff0c;1-31,33,128,512都试过了&#xff0c;唯独无法读取32个字节&#xff0c;驱动未报错&#xff0c;但是读取的都是0&#xff0c;找不到原因&#xff0c;估计应该是全志iic驱动的问题&#xff0c;暂时没…

leetcode - 2095. Delete the Middle Node of a Linked List

Description You are given the head of a linked list. Delete the middle node, and return the head of the modified linked list. The middle node of a linked list of size n is the ⌊n / 2⌋th node from the start using 0-based indexing, where ⌊x⌋ denotes th…

python中的类与对象(3)

目录 一. 类的多继承 二. 类的封装 三. 类的多态 四. 类与对象综合练习&#xff1a;校园管理系统 一. 类的多继承 在&#xff08;2&#xff09;第四节中我们介绍了什么是类的继承&#xff0c;在子类的括号里面写入要继承的父类名。上一节我们只在括号内写了一个父类名&…

【机器人最短路径规划问题(栅格地图)】基于模拟退火算法求解

代码获取方式&#xff1a;QQ&#xff1a;491052175 或者 私聊博主获取 基于模拟退火算法求解机器人最短路径规划问题&#xff08;栅格地图&#xff09;的仿真结果 仿真结果&#xff1a; 初始解的路径规划图 收敛曲线&#xff1a; 模拟退火算法求解的路径规划图 结论&#xff…

Ubuntu20安装zabbix-agent2,对接zabbix 6.4

在Ubuntu 20.04 LTS上安装Zabbix Agent 2并与Zabbix Server 6.4对接&#xff0c;请按照以下步骤操作&#xff1a; 更新系统&#xff1a; sudo apt update sudo apt upgrade 添加Zabbix官方仓库&#xff1a; 首先&#xff0c;需要将Zabbix的官方存储库添加到你的系统中以获取Za…

【了解SpringCloud Gateway微服务网关】

曾梦想执剑走天涯&#xff0c;我是程序猿【AK】 目录 简述概要知识图谱什么是SpringCloudGateway功能特征应用场景核心概念配置文件工作原理路由谓词工厂&#xff08;内置的&#xff09;[After 路由谓词工厂](https://docs.spring.io/spring-cloud-gateway/docs/current/refere…

Mysql运维篇(七) 部署MHA--完结

一路走来&#xff0c;所有遇到的人&#xff0c;帮助过我的、伤害过我的都是朋友&#xff0c;没有一个是敌人。如有侵权&#xff0c;请留言&#xff0c;我及时删除&#xff01; 一、MHA软件构成 Manager工具包主要包括以下几个工具&#xff1a; masterha_manger 启…

【C++】多态深入分析

目录 一&#xff0c;多态的原理 1&#xff0c;虚函数表与虚函数表指针 2&#xff0c;原理调用 3&#xff0c;动态绑定与静态绑定 二&#xff0c;抽象类 三&#xff0c;单继承和多继承关系的虚函数表 1&#xff0c;单继承中的虚函数表 2&#xff0c;多继承中的虚函数表 …

内网搭建mysql8.0并搭建主从复制详细教程!!!

一、安装mysql 1.1 mysql下载链接&#xff1a; https://downloads.mysql.com/archives/community/ 1.2 解压包并创建相应的数据目录 tar -xvf mysql-8.2.0-linux-glibc2.28-x86_64.tar.xz -C /usr/local cd /usr/local/ mv mysql-8.2.0-linux-glibc2.28-x86_64/ mysql mkdir…

Python绘图-9饼图(上)

饼图&#xff08;Pie Chart&#xff09;是一种用于表示数据分类和相对大小的可视化图形。在饼图中&#xff0c;整个圆形代表数据的总和&#xff0c;而圆形内的各个扇形则代表不同的分类或类别&#xff0c;扇形的面积大小表示该类别在整体中所占的比例。饼图通常用于展示数据的分…

Window部署Jaeger

参考&#xff1a;windows安装使用jaeger链路追踪_windows安装jaeger-CSDN博客 下载&#xff1a;Releases jaegertracing/jaeger GitHub Jaeger – Download Jaeger 目录 1、安装nssm 2、安装运行 elasticsearch 3、安装运行 3.1部署JaegerAgent 3.2部署JaegerCollec…

【全志D1-H 哪吒开发板】Debian系统安装调教和点灯指南

全志D1-H开发板【哪吒】使用Deabian系统入门 特别说明&#xff1a; 因为涉及到操作较多&#xff0c;博文可能会导致格式丢失 其中内容&#xff0c;会根据后续使用做优化调整 目录&#xff1a; 参考资料固件烧录启动调教点灯问题 〇、参考资料 官方资料 开发板-D1开发板【…

C++:函数模板整理

函数模板: 找到函数相同的实现思路&#xff0c;区别于函数的参数类型。 使用函数模板使得函数可容纳不同类型的参数实现函数功能&#xff0c;而不是当类型不同时便编译大量类型不同的函数&#xff0c;产生大量重复代码和内存占用 函数模板格式&#xff1a; template<typ…

[Vulnhub]靶场 Red

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 …

ARM64汇编02 - 寄存器与指令基本格式

最近的文章可能会有较多修改&#xff0c;请关注博客哦 异常级别 ARMv8处理器支持4种异常等级&#xff08;Exception Level&#xff0c;EL&#xff09;。 EL0 为非特权模式&#xff0c;用于运行应用程序&#xff0c;其他资源访问受限&#xff0c;权限不够。 EL1 为特权模式&…

【王道操作系统】ch1计算机系统概述-06虚拟机

文章目录 【王道操作系统】ch1计算机系统概述-06虚拟机01传统计算机02虚拟机的基本概念&#xff08;1&#xff09;第一类虚拟机管理程序&#xff08;2&#xff09; 第二类虚拟机管理程序&#xff08;3&#xff09; 两类虚拟机管理程序的对比 【王道操作系统】ch1计算机系统概述…

效果炸裂、刷爆各大视频网站的EMO到底是怎么做到的?

文章链接&#xff1a;https://arxiv.org/abs/2402.17485 今天分享的工作是刷爆各大视频平台的EMO的背后的工作原理。提出的初衷是着手解决增强发言者的头部特写视频生成中的现实感和表现力的挑战&#xff0c;重点关注音频提示与面部动作之间的动态和微妙关系。传统技术具有局限…