【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,一经查实,立即删除!

相关文章

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

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

【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…

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; 一、个人情况 本…

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

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

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

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

创建型模式--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;企业展馆是…

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

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

顺序表实战——基于顺序表的通讯录

前言&#xff1a;本篇文章主要是利用顺序表作为底层&#xff0c; 实现一个通讯录。偏向于应用&#xff0c; 对于已经学习过c的友友们可能没有难度了已经。没有学习过c的友友&#xff0c; 如果顺序表不会写&#xff0c; 或者说没有自己实现过&#xff0c; 请移步学习顺序表相关内…

ElasticSearch基础及面经

ElasticSearch基础及面经 Elaticsearch&#xff0c;简称为es&#xff0c; es是一个开源的高扩展的分布式全文检索引擎&#xff0c;它可以近乎实时的存储、检索数据&#xff1b;本身扩展性很好&#xff0c;可以扩展到上百台服务器&#xff0c;处理PB级别的数据。es也使用Java开…

【CVE复现计划】CVE-2024-0195

CVE-2024-0195 简介&#xff1a; SpiderFlow是新一代开源爬虫平台&#xff0c;以图形化方式定义爬虫流程&#xff0c;不写代码即可完成爬虫。基于springbootlayui开发的前后端不分离,也可以进行二次开发。该系统/function/save接口存在RCE漏洞&#xff0c;攻击者可以构造恶意命…

算法中的二阶差分

众所周知&#xff0c;在往区间的每一个数都加上一个相同的数k&#xff0c;进行n次后会得到一个新的数列&#xff0c;如果每次加都循环区间挨个数加上k&#xff0c;这样时间复杂度无疑是O(n^2)&#xff0c;很高。这时可以采用一阶差分就可解决&#xff0c;这里默认会一阶差分&am…

k8s的ca以及相关证书签发流程

k8s的ca以及相关证书签发流程 1. kube-apiserver相关证书说明2. 生成CA凭证1.1. 生成CA私钥1.2. 生成CA证书 2. 生成kube-apiserver凭证2.1. 生成kube-apiserver私钥2.2. 生成kube-apiserver证书请求2.3. 生成kube-apiserver证书 3. 疑问和思考4. 参考文档 对于网站类的应用&am…

3d挤压出的模型怎么设置分段---模大狮模型网

在3D建模软件中&#xff0c;挤压(Extrude)是常见的操作&#xff0c;而设置分段(Segments)可以让您控制挤压后模型的细节和曲线。以下是一般情况下在常见的3D建模软件(例如Blender、Maya、3ds Max等)中设置挤压模型的分段的方法&#xff1a; Blender中设置挤压模型的分段&#x…

麻了,一面就这么难

总体而言&#xff0c;整个过程更看你回答的条理与深度&#xff0c;不太需要面面俱到&#xff0c;有自己的理解和思考反而会加分&#xff0c;不需要每道题都回答得百分百&#xff0c;有些问题属于面试官顺带提一嘴&#xff0c;但重点问题要答好。 一面 介绍下项目&#xff0c;因…