4. 编写app组件

news2024/11/15 18:19:31

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.coloradmin.cn/o/1486153.html

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

相关文章

Linux设备模型(十) - bus/device/device_driver/class

四&#xff0c;驱动的注册 1&#xff0c;struct device_driver结构体 /** * struct device_driver - The basic device driver structure * name: Name of the device driver. * bus: The bus which the device of this driver belongs to. * owner: The module own…

js 面试 什么是WebSockets?HTTP和HTTPS有什么不同?web worker是什么?

概念&#xff1a; webSocket 是一种在客户端和服务端之间建立持久连接的协议&#xff0c;它提供全双工通信通道&#xff0c;是服务器可以主动向客户端推送数据&#xff0c;同时也可以接受客户端发送的数据。 1 webSocket与https区别&#xff1f; 在网络通信中&#xff0c;We…

一款汇聚 精美UI+AI内容生成助手 的实用白板工具

大家好&#xff0c;我是Mandy。今天给大家分享的内容是&#xff0c;如何利用AI快速生成思维导图、PPT、绘画等功能&#xff0c;本文分享的AI功能是基于boardmix实现。 boardmix是一款非常精美的在线白板工具&#xff0c;是一个实时协作的智慧白板上、一键生成PPT、用AI协助创作…

YOLOv9保姆教程,手把手教你训练、检测,快来学习吧!!

首先在这里推送一下我的YOLOv9改进专栏&#xff0c;目前是全网最快的YOLOv9改进专栏&#xff0c;该专栏将更新最新的模块来改进YOLOv9&#xff0c;助力大家论文与科研&#xff0c;欢迎大家了解&#xff01; ⭐专栏介绍&#xff1a;YOLOv9改进系列 | 包含深度学习最新创新&…

Python+Selenium4 Web自动化测试框架学习(一)

主要框架及技术 1.第一个selenium例子 import timefrom selenium import webdriver from selenium.webdriver.common.by import Bydriver webdriver.Chrome() driver.get("https://www.bilibili.com") driver.find_element(By.CLASS_NAME,"nav-search-input&…

求阶乘。。

&#xff01;&#xff01;&#xff01;答案解释摘录自蓝桥云课题解 问题描述 满足N!的末尾恰好有个0的最小的N是多少? 如果这样的N不存在输出-1。 输入格式 一个整数 K 输出格式 一个整数代表答案 样例输入 2 样例输出 10 import os import sys# 请在此输入您的代码 def coun…

css通过calc动态计算宽度

max-width: calc(100% - 40px) .m-mj-status-drawing-info-data{ display: inline-block; margin: 10px; min-width: 200px; padding: 10px;border-radius: 10px; background: #ddd;max-width: calc(100% - 40px);word-wrap: break-word;white-space: pre-line;}我开发的chatg…

从第一原理看大语言模型

大模型基础框架 大模型幻觉问题 大模型能力 思维链模式 思维链模式激发的是大模型的推理能力 LLM知识能力RAG

【java-面试题】链表刷题

【java-面试题】链表刷题 1. 删除链表中等于给定值 val 的所有节点&#xff08;最多遍历链表一遍&#xff09;题目思路代码 2. 反转一个单链表&#xff08;就地反转&#xff09; 1. 删除链表中等于给定值 val 的所有节点&#xff08;最多遍历链表一遍&#xff09; 力扣链接&am…

仅仅4M!无缝、快速、安全的效率提升工具

在数字化的今天&#xff0c;文件传输已经成为我们日常生活中不可或缺的一部分。无论是工作汇报的PPT&#xff0c;还是那些珍贵的高清照片&#xff0c;我们都需要一个既快速又安全的方式去分享它们的同时&#xff0c;不受终端设备的影响&#xff0c;我们希望接收方不需要下载任何…

C++内存模型与内存序

写在前面 在真正了解Memory Order的作用之前&#xff0c;曾经简单地将Memory Order等同于mutex和atomic来进行线程间数据同步&#xff0c;或者用来限制线程间的执行顺序&#xff0c;其实这是一个错误的理解。直到后来仔细研究了Memory Order之后&#xff0c;才发现无论是功能还…

一文了解docker与k8s

随着 k8s 作为容器编排解决方案变得越来越流行&#xff0c;有些人开始拿 Docker 和 k8s 进行对比&#xff0c;不禁问道&#xff1a;Docker 不香吗&#xff1f; k8s 是 kubernetes 的缩写&#xff0c;8 代表中间的八个字符。 其实 Docker 和 k8s 并非直接的竞争对手两者相互依存…

前端学习第一天-html基础

达标要求 网页的形成过程 常用的浏览器及常见的浏览器内核 web 标准三层组成 什么是HTML 熟练掌握HTML文档结构 熟练掌握HTML常用标签 1. 初识web前端 Web前端是创建Web页面或App等前端界面呈现给用户的过程。 Web前端开发是从网页制作演变而来&#xff0c;早期网站主…

【Micropython基础】TCP客户端与服务器

文章目录 前言一、连接Wifi1.1 创建STA接口1.2 激活wifi接口1.3 连接WIFI1.4 判断WIFI是否连接1.5 连接WIFI总体代码 二、创建TCP 客户端2.1 创建套接字2.2 设置TCP服务器的ip地址和端口2.3 连接TCP服务器2.3 发送数据2.4 接收数据2.5 断开连接2.6 示例代码 三、TCP服务器的创建…

干货!Python获取字典元素

1.访问字典中的元素 第一种方式&#xff1a;通过key访问 dict1 {"name":"中国医生", "author":"刘伟强", "person":"张涵予"} print(dict1["author"]) # 刘伟强 # print(dict1["price"…

SpringBlade CVE-2022-27360 export-user SQL 注入漏洞分析

漏洞描述 SpringBlade是一个基于Spring Cloud和Spring Boot的开发框架&#xff0c;旨在简化和加速微服务架构的开发过程。它提供了一系列开箱即用的功能和组件&#xff0c;帮助开发人员快速构建高效可靠的微服务应用。该产品/api/blade-user/export-user接口存在SQL注入。 漏…

微信小程序(四十六)登入界面-进阶版

注释很详细&#xff0c;直接上代码 上一篇 此文使用了vant组件库&#xff0c;没有安装配置的可以参考此篇vant组件的安装与配置 新增内容&#xff1a; 1.手机号与验证码格式验证 2.验证码的网络申请和校验 wechat-http模块在好几篇以前已经讲了咋安装的&#xff0c;不记得的友…

检查链表是否有环,返回值为bool和从头节点进入环的第一个节点两种情况

题目1&#xff08;不返回节点&#xff09; 给定单链表&#xff0c;检查链表是否有环。 代码实现&#xff1a; bool IsCircle(List plist) {assert(plist ! NULL);if (plist NULL||plist->nextNULL)return false;Node* p plist->next;//慢指针,一次走一步Node* q pl…

Mysql-主从架构篇(一主多从,半同步案例搭建)

主从架构 主从架构有什么用&#xff1f; 通过搭建MySQL主从集群&#xff0c;可以缓解MySQL的数据存储以及访问的压力。 数据安全&#xff08;主备&#xff09;&#xff1a;给主服务增加一个数据备份。基于这个目的&#xff0c;可以搭建主从架构&#xff0c;或者也可以基于主…

00x集—二维轻量多线段LWpolyline设置凸度bulge——vba实现

本文主要讲LightweightPolyline ,即轻量多段线。 LightweightPolyline (每一顶点用2个元素表示,数组大小必须为2的倍数)对象, 而对比polyline(每一顶点用三个元素表示,数组大小必须为3的倍数) 优化多段线&#xff08;轻量多段线&#xff09;&#xff0c;由线和弧段组成的可调节…