当前位置: 首页 > news >正文

『VUE』36. Vue的应用概念(分析流程)

目录

    • 创建应用
    • 挂载应用
    • 可执行文件
    • 公共资源
    • 总结


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

创建应用

首先引入createApp ,然后借助createApp 创造一个app对象

main.js

import { createApp } from "vue";
import App from "./App.vue";const app = createApp(App);

挂载应用

将应用实例挂载在一个容器元素中。
通过mount挂载才会渲染等一系列工作.
参数可以是一个实际的 DOM 元素或一个 CSS 选择器 (使用第一个匹配到的元素)。返回根组件的实例。
如果该组件有模板或定义了渲染函数,它将替换容器内所有现存的 DOM 节点。否则在运行时编译器可用的情况下,容器元素的 innerHTML 将被用作模板。

在 SSR 激活模式下,它将激活容器内现有的 DOM 节点。如果出现了激活不匹配,那么现有的 DOM 节点将会被修改以匹配客户端的实际渲染结果。

对于每个应用实例,mount() 仅能调用一次。

app.mount("#app");

可执行文件

浏览器的本质可执行文件是html js css等,vue最终通过webpack/vite等工具将代码转为一个main.js用于执行.
真正的入口是index.html文件,最终的呈现入口.


公共资源

src下的assets文件夹存放图标字体图片等公共资源
在这里插入图片描述


总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


相关文章:

『VUE』36. Vue的应用概念(分析流程)

目录 创建应用挂载应用可执行文件公共资源总结 欢迎关注 『VUE』 专栏,持续更新中 欢迎关注 『VUE』 专栏,持续更新中 创建应用 首先引入createApp ,然后借助createApp 创造一个app对象 main.js import { createApp } from "vue"; import A…...

《基于FPGA的便携式PWM方波信号发生器》论文分析(三)——数码管稳定显示与系统调试

一、论文概述 基于FPGA的便携式PWM方波信号发生器是一篇由任青颖、庹忠曜、黄洵桢、李智禺和张贤宇 等人发表的一篇期刊论文。该论文主要研究了一种新型的信号发生器,旨在解决传统PWM信号发生器在移动设备信号调控中存在的精准度低和便携性差的问题 。其基于现场可编…...

mac上的建议xftp 工具

mac上的建议xftp 工具 最近使用mac比较频繁了,但是第一次重度使用mac里面有很多的工具都是新的,有的window版本的工具无法使用。 xftp 的平替 Cyberduck 从它的官网上下载是免费的,但是如果使用 Apple store 要花费198呢。这不就剩下一大笔…...

Hive | Hive 表如何查看所有分区

文章目录 概述使用 SHOW PARTITIONS 命令查看特定分区的信息获取详细的分区信息总结 概述 Apache Hive 是一个构建在 Hadoop 之上的数据仓库工具,它提供了 SQL 类似的查询语言(称为 HiveQL),使得用户能够更容易地进行大数据处理和…...

MySQL系列之数据类型(Numeric)

导览 前言一、数值类型综述二、数值类型详解1. NUMERIC1.1 UNSIGNED或SIGNED1.2 数据类型划分 2. Integer类型取值和存储要求3. Fixed-Point类型取值和存储要求4. Floating-Point类型取值和存储要求 结语精彩回放 前言 MySQL系列最近三篇均关注了和我们日常工作或学习密切相关…...

4.6 JMeter HTTP信息头管理器

欢迎大家订阅【软件测试】 专栏,开启你的软件测试学习之旅! 文章目录 前言1 HTTP信息头管理器的位置2 常见的HTTP请求头3 添加 HTTP 信息头管理器4 应用场景 前言 在 JMeter 中,HTTP信息头管理器(HTTP Header Manager&#xff09…...

fpga 综合与优化设计

目录 Quartus Prime优化设置 1. 分析与综合设置 2. 物理综合优化 3. 适配设置 描述方法对综合的影响 1. 操作符的应用差异 2. 条件语句和分支语句的应用差异 3. 描述方式对综合电路的影响 优化设计方法 1. FPGA设计的基本原则 2. 常用优化设计方法 优化主要包括 4 个…...

计算机毕业设计Hadoop+Spark音乐推荐系统 音乐预测系统 音乐可视化大屏 音乐爬虫 HDFS hive数据仓库 机器学习 深度学习 大数据毕业设计

温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...

C嘎嘎探索篇:栈与队列的交响:C++中的结构艺术

C嘎嘎探索篇:栈与队列的交响:C中的结构艺术 前言: 小编在之前刚完成了C中栈和队列(stack和queue)的讲解,忘记的小伙伴可以去我上一篇文章看一眼的,今天小编将会带领大家吹奏栈和队列的交响&am…...

摄像头原始数据读取——opencv(cv::VideoCapture)

摄像头原始数据读取——opencv(cv::VideoCapture) 测试代码test.cpp #include <iostream> #include <string>#include <opencv2/opencv.hpp>std::string pixeformatcodec2string(int codec) {char pixeformat_name[5] { (char)((codec >> 0) & …...

unreal engine5中多个摄像机切换

UE5系列文章目录 文章目录 UE5系列文章目录前言一、思路二、具体实现 前言 unreal engine5中使用蓝图实现多个相机切换 一、思路 在Unreal Engine 5中&#xff0c;如果你想要在控件蓝图&#xff08;Widget Blueprint&#xff09;中获取场景摄像机的信息&#xff0c;可以按照…...

ensp静态路由实验

一、实验目的 1、熟练掌握交换机的基本配置命令 2、熟练掌握静态路由的使用方法 3. 熟练掌握交换机端口模式 二、实验内容 需求&#xff1a; 根据要求利用现有实验设备组建小型局域网 实验设备&#xff1a; 交换机S37002台&#xff1b;PC机2台&#xff1b;路由器2台。 …...

【在Linux世界中追寻伟大的One Piece】多线程(二)

目录 1 -> 分离线程 2 -> Linux线程互斥 2.1 -> 进程线程间的互斥相关背景概念 2.2 -> 互斥量mutex 2.3 -> 互斥量的接口 2.4 -> 互斥量实现原理探究 3 -> 可重入VS线程安全 3.1 -> 概念 3.2 -> 常见的线程不安全的情况 3.3 -> 常见的…...

Git中HEAD、工作树和索引的区别

在Git版本控制系统中&#xff0c;HEAD、工作树&#xff08;Working Tree&#xff09;和索引&#xff08;Index&#xff09;是三个非常重要的概念&#xff0c;它们分别代表了不同的状态或区域&#xff0c;下面我将对这三个概念进行详细的解释。 HEAD 定义&#xff1a;HEAD是一…...

洛谷 P1156 垃圾陷阱(搜索 DFS)

题目传送门https://www.luogu.com.cn/problem/P1156 解题思路 本题数据过水&#xff0c;可以使用 dfs。 对于每个垃圾&#xff0c;吃掉或者堆着。 然后考虑剪枝&#xff1a; 如果已经等不到下一个垃圾的到来&#xff0c;直接 return&#xff1b; 如果当前状态已经搜过&am…...

nodepad配置c/c++ cmd快速打开创建项目文件

前提:下载MinGw,并且配置环境变量 点击阅读次篇文章配置MinGw 无论是哪个编译器&#xff0c;执行c文件都是经历以下步骤: 编译文件生成exe文件执行该exe文件 我们先手动完成这两部 手动编译文件使用指令 gcc {你的c文件} -o {生成文件名}生成exe文件 第二步运行exe直接点击该文…...

Excel与PPT:职场两大软件的应用比拼

在职场环境中&#xff0c;Excel和PPT无疑是两款最为常用的办公软件。它们各自承担着不同的职责&#xff0c;为职场人士提供了强大的数据处理和演示功能。然而&#xff0c;哪款软件应用得更多&#xff0c;却并非一概而论&#xff0c;而是取决于个人的工作性质、岗位需求以及个人…...

春秋云境 CVE 复现

CVE-2022-4230 靶标介绍 WP Statistics WordPress 插件13.2.9之前的版本不会转义参数&#xff0c;这可能允许经过身份验证的用户执行 SQL 注入攻击。默认情况下&#xff0c;具有管理选项功能 (admin) 的用户可以使用受影响的功能&#xff0c;但是该插件有一个设置允许低权限用…...

文件系统的作用

在一个完整的嵌入式系统中&#xff0c;进行一个简单的操作&#xff08;如读取传感器数据并保存到文件&#xff09;通常会涉及多个步骤。这些步骤包括硬件初始化、数据采集、处理、存储以及与外部系统交互。以下是一个通用的操作流程及文件系统在其中的作用。 嵌入式系统的操作流…...

mysql低版本中update_time不自动更新问题

在mysql低版本时&#xff0c;update_time只有插入时才会自动插入当前时间&#xff0c;更新不会改变。 MySQL 5.7 及以上版本对于TIMESTAMP类型字段有自动更新功能相关特性在 MySQL 5.7以上版本 中&#xff0c;如果将一个TIMESTAMP类型的列设置为ON UPDATE CURRENT_TIMESTAMP属…...

【二叉树】【2.1遍历二叉树】【刷题笔记】【灵神题单】

关注二叉树的三个问题&#xff1a; 什么情况适合自顶向下&#xff1f;什么时候适合用自底向上&#xff1f;一般来说&#xff0c;DFS的递归边界是空节点&#xff0c;什么情况下要额外把叶子节点作为递归边界&#xff1f;在什么情况下&#xff0c;DFS需要有返回值&#xff1f;什…...

【深度学习】【RKNN】【C++】模型转化、环境搭建以及模型部署的详细教程

【深度学习】【RKNN】【C】模型转化、环境搭建以及模型部署的详细教程 提示:博主取舍了很多大佬的博文并亲测有效,分享笔记邀大家共同学习讨论 文章目录 【深度学习】【RKNN】【C】模型转化、环境搭建以及模型部署的详细教程前言模型转换--pytorch转rknnpytorch转onnxonnx转rkn…...

刷题日常(移动零,盛最多水的容器,三数之和,无重复字符的最长子串)

移动零 给定一个数组 nums&#xff0c;编写一个函数将所有 0 移动到数组的末尾&#xff0c;同时保持非零元素的相对顺序。 请注意 &#xff0c;必须在不复制数组的情况下原地对数组进行操作。 俩种情况&#xff1a; 1.当nums[i]为0的时候 直接i 2.当nums[i]不为0的时候 此时 …...

【单元测试】【Android】JUnit 4 和 JUnit 5 的差异记录

背景 Jetbrain IDE 支持生成 Test 类&#xff0c;其中选择JUnit5 和 JUnit&#xff0c;但是感觉这不是标准的单元测试&#xff0c;因为接口命名吧。 差异对比 两者生成的单测API名称同原API&#xff0c;没加test前缀的。使用差异主要表现在&#xff1a; setUp &#xff06; …...

LangChain——HTML文本分割 多种文本分割

Text Splitters 文本分割器 加载文档后&#xff0c;您通常会想要对其进行转换以更好地适合您的应用程序。最简单的例子是&#xff0c;您可能希望将长文档分割成更小的块&#xff0c;以适合模型的上下文窗口。 LangChain 有许多内置的文档转换器&#xff0c;可以轻松地拆分、组…...

Spring事务和事务传播机制

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:数据库 JavaEE专栏:JavaEE 软件测试专栏:软件测试 关注博主带你了解更多知识 目录 1.事务 1.1 什么是事务? 1.2 为什么需要事务? 1.3 事务的操作 2. Spring 中的事务 1. 编程式事务 2. 声明式事务Tra…...

STM32F103外部中断配置

一、外部中断 在上一节我们介绍了STM32f103的嵌套向量中断控制器&#xff0c;其中包括中断的使能、失能、中断优先级分组以及中断优先级配置等内容。 1.1 外部中断/事件控制器 在STM32f103支持的60个可屏蔽中断中&#xff0c;有一些比较特殊的中断&#xff1a; 中断编号13 EXTI…...

ChatGPT的应用场景:开启无限可能的大门

ChatGPT的应用场景&#xff1a;开启无限可能的大门 随着人工智能技术的快速发展&#xff0c;自然语言处理领域迎来了前所未有的突破。其中&#xff0c;ChatGPT作为一款基于Transformer架构的语言模型&#xff0c;凭借其强大的语言理解和生成能力&#xff0c;在多个行业和场景中…...

计算机毕业设计 | SpringBoot+vue社区医院管理系统(附源码+论文)

1&#xff0c;绪论 1.1 研究背景 互联网概念的产生到如今的蓬勃发展&#xff0c;用了短短的几十年时间就风靡全球&#xff0c;使得全球各个行业都进行了互联网的改造升级&#xff0c;标志着互联网浪潮的来临。在这个新的时代&#xff0c;各行各业都充分考虑互联网是否能与本行…...

直播实时美颜平台开发详解:基于视频美颜SDK的技术路径

视频美颜SDK作为实现实时美颜的关键技术&#xff0c;为开发者提供了高效、灵活的解决方案。本篇文章&#xff0c;小编将以“基于视频美颜SDK的技术路径”为主题&#xff0c;深入解析直播实时美颜平台的开发要点。 一、视频美颜SDK的作用与优势 视频美颜SDK是一种集成化的开发工…...

一个专为云原生环境设计的高性能分布式文件系统

大家好&#xff0c;今天给大家分享一款开源创新的分布式 POSIX 文件系统JuiceFS&#xff0c;旨在解决海量云存储与各类应用平台&#xff08;如大数据、机器学习、人工智能等&#xff09;之间高效对接的问题。 项目介绍 JuiceFS 是一款面向云原生设计的高性能分布式文件系统&am…...

【Elasticsearch】开启大数据分析的探索与预处理之旅

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家&#xff0c;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;…...

【算法】欧几里得与拓展欧几里得算法

目录 一、欧几里得算法 二、拓展欧几里得算法 2.1 裴蜀定理 2.2 拓展欧几里得算法 2.3 例题 三、线性同余方程 3.1 概念 3.2 例题 一、欧几里得算法 欧几里得算法又称辗转相除法&#xff0c;可用于求解两个数的最大公约数 其思路&#xff1a; gcd(a, b) gcd(b, a%b…...

组合数的求法

1.如果是多组查询的话&#xff0c;需要用数组去储存阶乘的值 n!/(m!(n-m)!) P4071 [SDOI2016] 排列计数 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<cstdio> #include<iostream> #include<map> #include<cstring> #include<cmath&g…...

【环境搭建】更新Docker Compose到v2.x版本以支持--profile选项

Docker版本陈旧也是搭建的环境起不来的一个重要原因&#xff0c;比如 --profile 选项是 Docker 20.10.0 版本及以上版本才开始支持的&#xff0c;在 Docker Compose v2.1&#xff08;及以上版本&#xff09;中引入用于对服务进行分组和按需启动。 更新 Docker Compose 到 v2.x…...

解决 java -jar 报错:xxx.jar 中没有主清单属性

问题复现 在使用 java -jar xxx.jar 命令运行 Java 应用程序时&#xff0c;遇到了以下错误&#xff1a; xxx.jar 中没有主清单属性这个错误表示 JAR 文件缺少必要的启动信息&#xff0c;Java 虚拟机无法找到应用程序的入口点。本文将介绍该错误的原因以及如何通过修改 pom.xm…...

AIGC-----AIGC在虚拟现实中的应用前景

AIGC在虚拟现实中的应用前景 引言 随着人工智能生成内容&#xff08;AIGC&#xff09;的快速发展&#xff0c;虚拟现实&#xff08;VR&#xff09;技术的应用也迎来了新的契机。AIGC与VR的结合为创造沉浸式体验带来了全新的可能性&#xff0c;这种组合不仅极大地降低了VR内容的…...

【博主推荐】C#的winfrom应用中datagridview常见问题及解决方案汇总

文章目录 1.datagridview绘制出现鼠标悬浮数据变空白2.datagridview在每列前动态添加序号2.1 加载数据集完成后绘制序号2.2 RowPostPaint事件绘制 3.datagridview改变行样式4.datagridview后台修改指定列数据5.datagridview固定某个列宽6.datagridview某个列的显示隐藏7.datagr…...

Selenium 自动化测试demo

场景描述&#xff1a; 模拟用户登录页面操作&#xff0c;包括输入用户名、密码、验证码。验证码为算数运算&#xff0c;如下&#xff1a; 使用到的工具和依赖&#xff1a; 1. Selenium&#xff1a;pip install selenium 2. 需要安装浏览器驱动&#xff1a;这里使用的是Edge 3…...

深度神经网络模型压缩学习笔记二:离线量化算法和工具、实现原理和细节

文章目录 一、离线量化基础概念二、离线量化难点三、离线量化算法介绍四、离线量化工具介绍五、离线量化工具整体设计结构六、离线量化工具代码解读七、实践&#xff1a;Dipoorlet量化MobileNet 一、离线量化基础概念 二、离线量化难点 三、离线量化算法介绍 四、离线量化工…...

uni-app运行 安卓模拟器 MuMu模拟器

最近公司开发移动端系统&#xff0c;使用真机时每次调试的时候换来换去的麻烦&#xff0c;所以使用模拟器来调试方便。记录一下安装和连接的过程 一、安装MuMu模拟器 百度搜索MuMu模拟器并打开官网或者点这里MuMu模拟器官网 点击下载模拟器 安装模拟器&#xff0c;如果系统…...

网络安全,文明上网(6)网安相关法律

列举 1. 《中华人民共和国网络安全法》&#xff1a; - 这是中国网络安全的基本法律&#xff0c;于2017年6月1日开始实施。该法律明确了网络运营者的安全保护义务&#xff0c;包括采取数据分类、重要数据备份和加密等措施。 2. 《中华人民共和国数据安全法》&#xff1a; …...

Perforce Automation With Python

11/2024 出版 MP4 |视频&#xff1a;h264&#xff0c; 19201080 |音频&#xff1a;AAC&#xff0c;44.1 KHz 语言&#xff1a;英语 |大小&#xff1a; 2.65 GB |时长&#xff1a; 5 小时 18 分钟 使用 Python 脚本简化与 Perforce 版本控制系统相关的生产流程 您将学 到什么 …...

卷积神经网络学习记录

目录 神经网络基础定义&#xff1a; 基本组成部分 工作流程 卷积层&#xff08;卷积定义&#xff09;【CONV】&#xff1a; 卷积层&#xff08;Convolutional Layer&#xff09; 特征提取&#xff1a;卷积层的主要作用是通过卷积核&#xff08;或滤波器&#xff09;运算提…...

Spring Cloud Alibaba

What is SCA Spring Cloud Alibaba致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用服务的必需组件&#xff0c;方便开发者通过Spring Cloud编程模型轻松使用这些组件来开发分布式应用服务。 依托Spring Cloud Alibaba&#xff0c;您只需要添加一些注解和少量…...

【AI绘画】Midjourney进阶:色调详解(上)

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: AI绘画 | Midjourney 文章目录 &#x1f4af;前言&#x1f4af;Midjourney中的色彩控制为什么要控制色彩&#xff1f;为什么要在Midjourney中控制色彩&#xff1f; &#x1f4af;色调白色调淡色调明色调 &#x1f4af…...

【滑动窗口】找到字符串中所有字母异位词

文章目录 找到字符串中所有字母异位词 class Solution { public:vector<int> findAnagrams(string s, string p) {vector<int> ret;int sLen s.size(), pLen p.size(), validChar;// 母串长度比子串长度还小 直接返回空vectorif (sLen < pLen)return ret;// …...

C++:final 关键字用于阻止类被继承或阻止虚函数被进一步重写

final 关键字的作用 C11 引入了 final 关键字&#xff0c;用于阻止类被继承或阻止虚函数被进一步重写。 防止类被继承&#xff1a;在类声明后添加 final&#xff0c;表示该类不能被继承。防止虚函数被重写&#xff1a;在虚函数声明后添加 final&#xff0c;表示该虚函数在派生…...

sql漏洞

目录 SQL漏洞产生的原因 未对用户输入进行验证和过滤&#xff1a; 动态SQL语句的拼接&#xff1a; 不安全的数据库配置&#xff1a; 缺乏安全意识和培训&#xff1a; 使用过时的技术或框架&#xff1a; 如何避免SQL漏洞产生 使用参数化查询&#xff1a; 对用户输入进行…...

SQL 复杂查询

目录 复杂查询 一、目的和要求 二、实验内容 &#xff08;1&#xff09;查询出所有水果产品的类别及详情。 查询出编号为“00000001”的消费者用户的姓名及其所下订单。&#xff08;分别采用子查询和连接方式实现&#xff09; 查询出每个订单的消费者姓名及联系方式。 在…...