【Vue】我的第一个组件

news2024/11/28 10:35:59

文章目录

  • 项目简介


项目简介

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

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

相关文章

23.oracle保留两位小数、小数点后不足两位的补0

to_char()函数:转化数字型指定小数点位数的用法/* to_char(0.1,fm9999990.00) */

缓存穿透问题

缓存穿透 :缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在,这样缓存永远不会生效,这些请求都会打到数据库。 常见的两种解决方案: 1.缓存空对象 优点:实现简单,维护方便 缺点:占用…

Spring Cloud微服务入门(三)

服务注册与发现的概念 服务之间相互访问: 例如:用户中心与内容中心之间相互调用。 问题: 服务调用需要知道对方的服务地址,地址写在哪里? 如果服务是多个实例部署,该调用哪一个? 如果服务是多…

父组件明明使用了v-model,子组件竟然可以不用定义props和emit抛出事件,快来看看吧

前言 vue3.4增加了defineModel宏函数,在子组件内修改了defineModel的返回值,父组件上v-model绑定的变量就会被更新。大家都知道v-model是:modelValue和update:modelValue的语法糖,但是你知道为什么我们在子组件内没有写任何关于props的定义和…

以动态库链接库 .dll 探索结构体参数

Dev c C语言实现第一个 dll 动态链接库 创建与调用-CSDN博客 在写dll 插件中发现的函数指针用途和 typedef 的定义指针的用法-CSDN博客 两步之后,尝试加入结构体实现整体数据使用。 注意结构体 Ak 是相同的 代码如下 DLL文件有两个,dll.dll是上面提到…

[LeetCode][LCR178]训练计划 VI——使用位运算寻找数组中不同的数字

题目 LCR 178. 训练计划 VI 教学过程中,教练示范一次,学员跟做三次。该过程被混乱剪辑后,记录于数组 actions,其中 actions[i] 表示做出该动作的人员编号。请返回教练的编号。 示例 1: 输入:actions [5, …

帝国CMS模板源码整站安装说明(图文)

安装步骤 第一步:先把得到的文件解压缩,把文件通过FTP传到空间里。(请不要把类似www.lengleng.net这个文件夹传到FTP,请传这个大文件夹下面的所有文件夹和文件到空间根目录,请不要上传到2级目录,除非你自己…

kimi开放API使用了,来看如何使用

更多精彩内容在公众号。 kimi现在算是国内火得不行的AI工具。最近使用人太多,都经常出现响应不过来的情况。借助这波热潮,kimi顺势推出了API使用。 来看kimi的官方介绍使用。https://platform.moonshot.cn 文本生成模型 Moonshot的文本生成模型&#…

外包干了6天,技术明显进步

先说一下自己的情况,本科生,2019年我通过校招踏入了南京一家软件公司,开始了我的职业生涯。那时的我,满怀热血和憧憬,期待着在这个行业中闯出一片天地。然而,随着时间的推移,我发现自己逐渐陷入…

PWM 脉宽跟随方案介绍

1. 前言 数字电源产品在使用桥式电路拓扑或是多路交错控制中,有时会需要滞后臂的 PWM 脉宽严格跟随超前臂的 PWM 脉宽,或从路的 PWM 脉宽严格跟随主路的 PWM 脉宽,本文将介绍如何利用高精度定时器实现 PWM 输出脉宽跟随,一种使用…

设计模式浅析(十一) ·状态模式

设计模式浅析(十一) 状态模式 日常叨逼叨 java设计模式浅析,如果觉得对你有帮助,记得一键三连,谢谢各位观众老爷😁😁 状态模式 概念 状态模式 Java中的状态模式(State Pattern)是一种行为型…

Web漏洞-文件上传常见验证

后缀名:类型,文件头等 后缀名:黑白名单 文件类型:MIME信息 文件头:内容头信息 常见黑名单(明确不允许上传的格式后缀):asp、php、jsp、aspx、cgi、war (如果没有完整…

绿联 安装Frpc内网穿透并使用Nginx反向代理

绿联 安装Frpc内网穿透并使用Nginx反向代理 1、前言 服务器官网:雨云 - 新一代云服务提供商 本教程使用Frps与Frpc进行内网穿透,其中Frps需要自购服务器安装,若无法购买服务器则本教程对你无用; 另外还需拥有自己的域名&#xf…

什么是数据库?如何安装SQL Server(超详细版)

文章目录 什么是数据库数据库与数据库管理系统数据库系统之间的区别和联系数据库在生活中的应用 安装SQL Server数据库系统要求 安装步骤(超详细)安装前的准备 安装SSMS 什么是数据库 数据库,顾名思义,是存储数据的“仓库”。它不仅仅是简单的数据存储&…

软件验收流程

验收环节,甲方需要做哪些事情?这些事情的流程是什么?做这些事情能给甲方带来什么好处? 软件验收阶段,甲方要做的事情: 验收环节介绍 1. 开始 目的:启动验收流程,为后续工作做好准…

第九届蓝桥杯大赛个人赛省赛(软件类)真题C 语言 A 组-航班时间

#include<iostream> using namespace std;int getTime(){int h1, h2, m1, m2, s1, s2, d 0;//d一定初始化为0&#xff0c;以正确处理不跨天的情况 scanf("%d:%d:%d %d:%d:%d (%d)", &h1, &m1, &s1, &h2, &m2, &s2, &d);return d …

【随笔】Git 高级篇 -- 相对引用2 HEAD~n(十三)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

matlab使用教程(37)—求解数值积分(2)

1多项式积分的解析解 本示例显示如何使用 polyint 函数对多项式求解析积分。使用此函数来计算多项式的不定积分。 1.1定义问题 考虑实数不定积分&#xff0c; 其中 k 是积分常量。由于没有指定积分限值&#xff0c; integral 函数族不太适合求解这个问题。 1.2用向量表示多…

量子计算领域迎来了一项令人振奋的突破。

近日&#xff0c;量子计算领域迎来了一项令人振奋的突破。Quantinuum公司与科技巨头Microsoft宣布&#xff0c;双方在容错量子计算方面取得了显著成果。这一成就原本预计需要数年时间才能实现&#xff0c;但两家公司的紧密合作使得这一目标提前达成。 Quantinuum的新一代量子计…

js笔记(学习存档)

JS的调用方式与执行顺序 使用方式 HTML页面中的任意位置加上<script type"module"></script>标签即可。 常见使用方式有以下几种&#xff1a; 直接在<script type"module"></script>标签内写JS代码。直接引入文件&#xff1a;…