前端流行框架Vue3教程:28. Vue应用

28. Vue应用

在这里插入图片描述

应用实例
每个 Vue 应用都是通过 createApp函数创建一个新的 应用实例

main.js

import {createApp} from 'vue'
import App from './App.vue'// app:Vue的实例对象
// 在一个Vue项目中,有且只有一个Vue的实例对象
const app = createApp(App)/* 根组件选项 */
// App:根组件
app.mount('#app')

根组件

我们传入createApp的对象实际上是一个组件,每个应用都需要一个根组件”,其他组件将作为其子组件。

import {createApp} from 'vue'// 从一个单文件组件中导入根组件
import App from './App.vue'const app = createApp(App)app.mount('#app')

挂载应用

应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容器"参数,可以是一个实际的DOM元素或是一个 CSS 选择器字符串

app.mount('#app')

#app --> index.html

<!DOCTYPE html>
<html lang=""><head><meta charset="UTF-8"><link rel="icon" href="/favicon.ico"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Vite App</title></head><body><!--  浏览器可执行文件:1.Html2.CSS3.JavaScript4.Image构建工具:Webpack  vite--><div id="app"></div><script type="module" src="/src/main.js"></script></body>
</html>

公共资源

src目录下的assets文件夹的作用就是存放公共资源,例如:图片、公共CSS或者字体图标等


Vue教程至此结束。当然,vue要学的还有很多,比如前后端分离等等。自行扩展学习吧

多练习为主!

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

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

相关文章

MongoDB 数据库迁移:完整指南与最佳实践

在现代数据驱动的应用中&#xff0c;数据库迁移是一项常见的任务&#xff0c;无论是升级 MongoDB 版本、更换服务器硬件&#xff0c;还是迁移到云环境&#xff08;如 MongoDB Atlas&#xff09;&#xff0c;都需要一个可靠的迁移策略。错误的迁移方式可能导致数据丢失、应用停机…

MQTT-Vue整合

Vue整合 依赖环境 nodejs 版本 > 18安装 element plus npm install element-plus安装 mqtt npm install mqtt初始化Vue项目 使用 vite 创建项目 执行命令 npm create vitelatest输入项目名称 vue-mqtt-demo MQTT连接 连接组件代码 components/MqttDemo.vue <script…

IP 地址反向解析(IP反查域名)原理与应用

一、IP 地址反向解析的原理与技术细节 IP 地址反向解析&#xff08;Reverse IP Lookup&#xff09;是一种将 IP 地址映射回其关联域名或主机名的网络技术&#xff0c;与常见的正向 DNS 解析&#xff08;将域名解析为 IP 地址&#xff09;形成互补。这一过程在网络安全研究、漏…

Mermaid 文件支持的图表

Mermaid 文件后缀支持多种类型的图表&#xff0c;包括但不限于&#xff1a; 流程图&#xff1a;用于描述流程和决策的图表&#xff0c;常用于业务流程的表示和分析。 时序图&#xff1a;用于描述事件发生的顺序和时序关系的图表&#xff0c;常用于系统交互和消息传递的分析。 …

用 Python 构建自动驾驶的实时通信系统:让车辆“交流”起来!

用 Python 构建自动驾驶的实时通信系统:让车辆“交流”起来! 自动驾驶技术正加速变革全球交通体系,它不仅是机器学习与计算机视觉的胜利,更是一场 高效通信架构的革命。自动驾驶汽车需要实时交换信息,比如: 传感器数据(雷达、激光雷达、摄像头)V2V(车与车通信)V2X(…

PDF处理控件Aspose.PDF教程:以编程方式合并PDF文档

合并 PDF 文档是常见的需求——无论您是整理报告、合并发票还是整合扫描页面。单一、统一的文件更易于在个人、学术或专业用途中共享、存储和管理。 本文将向您展示如何使用 Aspose.PDF在C#、Java 和 Python中以编程方式合并 PDf 文件。 Aspose.PDF最新版下载 为什么使用 As…

.gitignore 的基本用法

.gitignore 文件是 Git 版本控制系统中一个非常重要的配置文件&#xff0c;用于指定哪些文件或目录应该被 Git 忽略&#xff0c;不纳入版本控制。合理使用 .gitignore 可以避免将临时文件、编译产物、敏感信息等不必要的文件提交到代码仓库中。 1. .gitignore 的基本用法 &…

华为OD机试真题——分糖果(2025A卷:100分)Java/python/JavaScript/C/C++/GO最佳实现

2025 A卷 100分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式; 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析; 本文收录于专栏:《2025华为OD真题目录+全流程解析+备考攻略+经验分…

通过chrome插件自动生成博客评论,高效发外链

最近crazy cattle 3d这个词爆火&#xff0c;很多人都在做&#xff0c;竞争异常激烈&#xff0c;甚至可以说是惨不忍睹。 从最近的数据看&#xff0c;胜出的主要是crazycattle3d.com, crazycattle3d.io, crazy-cattle-3d.com这几个&#xff0c;流量最高的crazycattle3d.com已经…

创建一个简易的风扇动画界面:基于 WPF 和 XAML 的实现教程

在本教程中&#xff0c;我们将通过使用 WPF (Windows Presentation Foundation) 和 XAML (Extensible Application Markup Language) 创建一个简单的“台式风扇”界面。我们将使用 XAML 绘制风扇的外观&#xff0c;包含风扇叶片、风扇框架、支架和按钮等元素&#xff0c;并通过…

VPet虚拟桌宠,一款桌宠软件,支持各种互动投喂等. 开源免费并且支持创意工坊

&#x1f4cc; 大家好&#xff0c;我是智界工具库&#xff0c;每天分享好用实用且智能的开源项目&#xff0c;以及在JAVA语言开发中遇到的问题&#xff0c;如果本篇文章对您有所帮助&#xff0c;请帮我点个小赞小收藏小关注吧&#xff0c;谢谢喲&#xff01;&#x1f618; 工具…

HTTP Digest 认证:原理剖析与服务端实现详解

HTTP Digest 认证&#xff1a;原理剖析与服务端实现详解 HTTP 协议中的 Digest 认证&#xff08;摘要认证&#xff09;是一种比 Basic 认证更安全的身份验证机制&#xff0c;其核心设计是避免密码明文传输&#xff0c;并通过动态随机数&#xff08;Nonce&#xff09;防范重放攻…

PDF 表单按钮动态边框效果

问题描述 用户在 Acrobat X 中创建 PDF 表单时遇到一个需求&#xff1a;表单以网格形式列出多个选项&#xff0c;当点击某个选项时&#xff0c;需要在选项周围显示边框&#xff08;圆形或方形&#xff09;&#xff0c;再次点击时边框消失。 试过的解决方案 在文本上方放置透…

部署Gitlab-CE with Docker私有云环境

应用环境 Ubuntu 20.04.6 LTS (GNU/Linux 5.15.0-139-generic x86_64) Docker version 28.1.1, build 4eba377 文章目录 拉取容器镜像生成Run脚本参数解读实例脚本环境配置管理员密码遗忘服务邮箱配置邮件测试 运维问题集锦(1) 端口映射关系(2) 服务日志(3) 分支受保护 项目操作…

MyBatis 的动态 SQL 特性来实现有值字段才进行插入或更新

MyBatis 动态 SQL 解决方案 <!-- 动态INSERT语句 --> <insert id"addDailyFreezeTer" parameterType"com.linyang.pecker.pojo.DailyFreezeTerminalBean">INSERT INTO dailyfreezeter_info<trim prefix"(" suffix")" …

网络原理与 TCP/IP 协议详解

一、网络通信的本质与基础概念 1.1 什么是网络通信&#xff1f; 网络通信的本质是跨设备的数据交换&#xff0c;其核心目标是让不同物理位置的设备能够共享信息。这种交换需要解决三个核心问题&#xff1a; 如何定位设备&#xff1f; → IP地址如何找到具体服务&#xff1f;…

CUDA编程笔记(1)--最简单的核函数

本文用来记录cuda编程的一些笔记以及知识 本笔记运行在windows系统&#xff0c;vs编译器中&#xff0c;cuda版本是12.6 先看一下最基本的代码例子&#xff1a; #include<iostream> #include<cstdio> #include "cuda_runtime.h" #include "device…

系统架构中的限流实践:构建多层防护体系(二)

系统架构中的限流实践:构建多层防护体系 一、接入层限流:流量拦截第一关二、应用层限流(服务内限流)Java生态方案对比三、分布式限流(跨服务限流)四、数据层限流(数据库/缓存限流)1. 数据库防护策略2. 缓存优化方案五、中间件层限流(消息队列/分布式服务)六、客户端限…

AI学习笔记二十八:使用ESP32 CAM和YOLOV5实现目标检测

若该文为原创文章&#xff0c;转载请注明原文出处。 最近在研究使用APP如何显示ESP32 CAM的摄像头数据&#xff0c;看到有人实现把ESP32 CAM的数据流上传&#xff0c;通过YOLOV5来检测&#xff0c;实现拉流推理&#xff0c;这里复现一下。 一、环境 arduino配置esp32-cam开发环…

uni-app(5):Vue3语法基础上

Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统&#xff0c;只关注视图层&#xff0c;…