【Vue】我的第一个组件

文章目录

  • 项目简介


项目简介

  1. 项目根目录中的index.html是项目的入口文件
    在这里插入图片描述

  2. 加载index.html,vite解析。指向的src下的ts文件或者js文件
    在这里插入图片描述

  3. 最后通过vue3的createApp函数创建一个应用,并挂载到指定div下
    在这里插入图片描述

  4. App.vue结构说明
    特别注意:script脚本内,推荐使用setup语法糖(组合式API)。使用ts语法
    使用setup语法糖优势有:
    1.更少的样板内容,更简洁的代码。
    2.能够使用纯 TypeScript 声明 props 和自定义事件。
    3.更好的运行时性能 (其模板会被编译成同一作用域内的渲染函数,避免了渲染上下文代理对象)。
    4.更好的 IDE 类型推导性能 (减少了语言服务器从代码中抽取类型的工作)。

在这里插入图片描述

b站视频讲解:剪辑中…

踩坑不易,还希望各位大佬支持一下 \textcolor{gray}{踩坑不易,还希望各位大佬支持一下} 踩坑不易,还希望各位大佬支持一下

📃 个人主页: \textcolor{green}{个人主页:} 个人主页: 沉默小管

📃 个人网站: \textcolor{green}{个人网站:} 个人网站: 沉默小管

📃 个人导航网站: \textcolor{green}{个人导航网站:} 个人导航网站: 沉默小管导航网

📃 我的开源项目: \textcolor{green}{我的开源项目:} 我的开源项目: vueCms.cn

🔥 技术交流 Q Q 群: 837051545 \textcolor{green}{技术交流QQ群:837051545} 技术交流QQ群:837051545

👍 点赞,你的认可是我创作的动力! \textcolor{green}{点赞,你的认可是我创作的动力!} 点赞,你的认可是我创作的动力!

⭐️ 收藏,你的青睐是我努力的方向! \textcolor{green}{收藏,你的青睐是我努力的方向!} 收藏,你的青睐是我努力的方向!

✏️ 评论,你的意见是我进步的财富! \textcolor{green}{评论,你的意见是我进步的财富!} 评论,你的意见是我进步的财富!

如果有不懂可以留言,我看到了应该会回复
如有错误,请多多指教

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

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

相关文章

基于单片机四路温度报警系统仿真设计

**单片机设计介绍, 基于单片机四路温度报警系统仿真设计 文章目录 一 概要二、功能设计设计思路 三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机四路温度报警系统仿真设计概要主要涉及一个使用单片机作为核心控制器的温度监控系统,该系…

新型基础设施建设(新基建)

新型基础设施建设(新基建)主要包括七个方面,即5G基站建设、特高压、城际高速铁路和城市轨道交通、新能源汽车充电桩、大数据中心、人工智能和工业互联网。 以下是新型基础设施的详细内容: 一、5G基站建设。5G网络的扩展和优化&a…

【canvas】canvas的基础使用(一):创建canvas

canvas Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API 主要聚焦于 2D 图形。 canvas元素 <canvas> 元素可被用来通过 JavaScript&#xff…

C++ 圆周率的几种求解方法

公众号&#xff1a;编程驿站 圆周率的常见几种求解算法&#xff0c;包括但不仅仅包含特卡洛模拟、割圆法和公式法。本文讲解这几种算法的实现流程。 1. 蒙特卡洛模拟算法 假设有一个半径为1的圆&#xff0c;如图所示。先绘制一个半径为1的圆。则图中阴影部分&#xff08;1/4…

SV学习笔记(八)

文章目录 SV入门练习基本数据类型字符串类型数组类型接口的定义与例化类的封装类的继承package的使用随机约束线程的同步线程的控制虚方法方法&#xff08;任务与函数&#xff09;SV用于设计 参考资料 SV入门练习 基本数据类型 有符号无符号、四状态双状态、枚举类型、结构体…

STM32 F401/411外设内部互联矩阵摘要

STM32 F401/411外设内部互联矩阵摘要 &#x1f4cd;参考文档AN4646&#xff1a;https://www.stmcu.com.cn/Designresource/detail/localization_document/709908(中译) -&#x1f4cc; 相关工程案例《HAL STM32主从定时器联级使用》、《STM32G4 TIM1触发ADC转换》 &#x1f4d…

24考研-东南大学916经验贴

文章目录 一、个人情况二、初试备考经验1.政治 67&#xff0c;客观382.英语 60&#xff0c;客观大概40左右3.数学 136&#xff0c;客观应该满分4.专业课 数据结构计网 114小分不清楚 三、复试备考经验笔试&#xff1a;C面试复试流程 附一下成绩单&#xff1a; 一、个人情况 本…

如何给自己的网站添加 https

文章目录 一、简介二、申请 ssl 证书三、下载 ssl 证书四、配置 nginx五、开放 443 端口六、常见问题解决(一)、配置后&#xff0c;访问 https 无法连接成功(二) 证书配置成功&#xff0c;但是访问 https 还是报不安全 总结参考资料 一、简介 相信大家都知道 https 是更加安全…

【利器篇】前端40+精选VSCode插件,总有几个你未拥有!

前言 姊妹篇&#xff1a; 【利器篇】35精选chrome插件&#xff0c;含15前端插件&#xff0c;总有一款值得你停留 关于关于 【前端工具系列】&#xff1a; 有句话&#xff0c;事半功倍&#xff0c;其必然是借助了某些思想和工具。 VSCode是我们前端开发的武器&#xff0c;本文…

Python学习从0开始——专栏汇总

Python学习从0开始——000参考 一、推荐二、基础三、项目一 一、推荐 Hello World in Python - 这个项目列出了用Python实现的各种"Hello World"程序。 Python Tricks - 这个项目包含了Python中的高级技巧和技术。 Think Python - 这是一本教授Python的在线书籍&…

嵌入式Linux系统调用执行基本流程

内核态与用户态 什么是系统调用 系统调用是怎么实现的 库函数write 库函数扩展汇编宏 int 0x80中断 调用对应的中断处理函数 检索系统调用函数表 最终执行sys_write 内核态与用户态数据交互 内核态与用户态 早期工程师们在操作系统上编写程序的时候,自己写个程序可以访问别人…

面试算法-150-缺失的第一个正数

题目 给你一个未排序的整数数组 nums &#xff0c;请你找出其中没有出现的最小的正整数。 请你实现时间复杂度为 O(n) 并且只使用常数级别额外空间的解决方案。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,0] 输出&#xff1a;3 解释&#xff1a;范围 [1,2] 中的数字都…

90天玩转Python—07—基础知识篇:Python中运算符详解

90天玩转Python系列文章目录 90天玩转Python—01—基础知识篇:C站最全Python标准库总结 90天玩转Python--02--基础知识篇:初识Python与PyCharm 90天玩转Python—03—基础知识篇:Python和PyCharm(语言特点、学习方法、工具安装) 90天玩转Python—04—基础知识篇:Pytho…

创建型模式--2.简单工厂模式【人造恶魔果实工厂1】

1. 工厂模式的特点 在海贼王中&#xff0c;作为原王下七武海之一的多弗朗明哥&#xff0c;可以说是新世界最大的流氓头子&#xff0c;拥有无上的权利和无尽的财富。他既是德雷斯罗萨国王又是地下世界的中介&#xff0c;控制着世界各地的诸多产业&#xff0c;人造恶魔果实工厂就…

windows10系统下TP-LINK万兆网卡属性配置高级说明

文章目录 打开配置属性说明ARP Offload&#xff1a;ARP地址解析协议卸载Downshift retries:降档重试次数Energy-Efficient Ethernet:高能效以太网Flow Control:流量控制Interrupt Moderation:中断调整Interrupt Moderation Rate:中断调节率IPv4 Checksum Offload:IPv4校验和卸载…

2024/4/2—力扣—连续数列

代码实现&#xff1a; 思路&#xff1a;最大子数组和 解法一&#xff1a;动态规划 #define max(a, b) ((a) > (b) ? (a) : (b))int maxSubArray(int* nums, int numsSize) {if (numsSize 0) { // 特殊情况return 0;}int dp[numsSize];dp[0] nums[0];int result dp[0];fo…

three.js零基础入门超全超细的教程整理(一)

事情是这样的&#xff1a; 有一天 我干完活 看技术文章 发现了three.js 诶&#xff01;这玩应挺有意思 盘盘 于是第一天找教程 上官网 初上手 第二天 找案例 渲模型 试VR 第三天 捋文档 然后来活了 没时间捋了 下面是集百家精华教程的整理总结 涉及到教程方面有加源作者和地址…

企业3D数字化网络展馆成为企业文化传承与发扬的圣地

在河北这片古老而富饶的土地上&#xff0c;文明的火种薪火相传&#xff0c;燕赵之风历久弥新。河北企业也多年持续稳居我国第五的宝座&#xff0c;企业文化展馆不仅是企业形象的展示窗口&#xff0c;更是企业文化传承与发扬的圣地。 与短暂的行业展会不同&#xff0c;企业展馆是…

JWT身份验证是什么

JWT(JSON Web Token)是一种用于安全传输信息的开放标准(RFC 7519),它可以作为 JSON 对象在各方之间安全地传输信息。JWT通常用于身份验证和声明传递,并且经常用于在客户端和服务器之间进行身份验证和授权。 JWT 的结构 一个 JWT 由三部分组成,每部分之间使用点号 . 分…

用户登录时md5加密源码解析

首先&#xff0c;在登录的时候&#xff0c;将页面提交的密码password加密处理&#xff0c;即password DigestUtils.md5DigestAsHex(password.getBytes()); 接着按ctrl鼠标左键&#xff0c;进入md5DigestAsHex函数中进行查看&#xff1a; 可以发现&#xff0c;md5DigestAsHex函…