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

使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)

news 来源：原创 2025/6/18 23:55:47

new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括：
•data：定义组件的数据属性。
•el：指定 Vue 实例应该挂载到哪个 DOM 元素上（通常是一个选择器字符串，如 #app）。
•methods：定义组件的方法。
•computed：定义计算属性。
•watch：定义观察者，监听数据的变化。
•components：注册局部组件。
•template 或 render：定义组件的模板或渲染函数。
$mount() 是 Vue 实例的一个方法，用于手动将 Vue 实例挂载到一个 DOM 元素上。它有两种使用方式：
•$mount()：如果没有传入参数，Vue 会创建一个脱离文档流的元素，并将实例挂载到该元素上。你可以稍后将该元素插入到 DOM 中。
•$mount(el)：传入一个 DOM 元素或选择器字符串（如 ‘#app’），Vue 会将实例挂载到指定的 DOM 元素上。
new Vue({...}).$mount() 的典型用法场景
场景 1：动态创建并挂载组件假设你有一个 Vue 组件，但不想在页面加载时立即挂载它，而是根据某些条件动态创建并挂载。你可以使用 new Vue({…}).$mount() 来实现这一点。

// 动态创建并挂载组件
const MyComponent = {template: '<div>Hello, World!</div>',data() {return {message: 'Hello, Vue!'};}
};// 创建 Vue 实例并挂载到 #app
new Vue({render: h => h(MyComponent)
}).$mount('#app');

在这个例子中，MyComponent 是一个 Vue 组件，我们通过 new Vue({...}).$mount('#app') 将它挂载到 #app 元素上。

场景 2：延迟挂载有时候你可能希望延迟挂载 Vue 实例，直到某个条件满足。你可以先创建 Vue 实例，然后在适当的时机调用 $mount() 来挂载它。

// 创建 Vue 实例，但不立即挂载
const vm = new Vue({data: {message: 'Hello, Vue!'},template: '<div>{{ message }}</div>'
});// 延迟挂载
setTimeout(() => {vm.$mount('#app');
}, 2000);

在这个例子中，Vue 实例在 2 秒后才被挂载到 #app 元素上。

场景 3：挂载到脱离文档流的元素如果你不想立即将组件插入到 DOM 中，可以使用 $mount() 创建一个脱离文档流的元素，稍后再将其插入到 DOM 中。

// 创建 Vue 实例并挂载到一个脱离文档流的元素
const vm = new Vue({data: {message: 'Hello, Vue!'},template: '<div>{{ message }}</div>'
}).$mount();// 稍后将该元素插入到 DOM 中
document.getElementById('app').appendChild(vm.$el);

在这个例子中，vm.$el 是 Vue 实例的根元素，你可以稍后将其插入到任何地方。

el 选项 vs $mount()
在 Vue 2.x 中，el 选项和 $mount() 方法都可以用来挂载 Vue 实例，但它们有一些区别：
•el 选项：当你在创建 Vue 实例时直接传递 el 选项，Vue 会立即挂载到指定的 DOM 元素上。这种方式适用于大多数简单的场景。

new Vue({el: '#app',data: {message: 'Hello, Vue!'},template: '<div>{{ message }}</div>'
});

•$mount() 方法：$mount() 提供了更多的灵活性，允许你在创建 Vue 实例后延迟挂载，或者挂载到脱离文档流的元素上。这在需要动态创建组件或延迟挂载的场景中非常有用。

const vm = new Vue({data: {message: 'Hello, Vue!'},template: '<div>{{ message }}</div>'
}).$mount('#app');

Vue 3 中的变化
在 Vue 3 中，new Vue({...}) 的写法已经被移除，取而代之的是 createApp 函数。因此，在 Vue 3 中，你应该使用 createApp 来创建应用实例，并通过 mount 方法将其挂载到 DOM 元素上。

import { createApp } from 'vue';
import App from './App.vue';const app = createApp(App);
app.mount('#app');

如果你仍然想使用类似 new Vue({…}).$mount() 的写法，可以在 Vue 3 中使用 createApp 和 mount 的组合来实现类似的效果。

使用new Vue创建Vue 实例并使用$mount挂载到元素上(包括el选项和$mount区别)

new Vue({...}) 是创建一个新的 Vue 实例的方式。你可以通过传递一个选项对象来配置这个实例。常见的选项包括： •data：定义组件的数据属性。 •el：指定 Vue 实例应该挂载到哪个 DOM 元素上（通常是一个选择器字符串，如…...

编程日记 2025/6/3 6:40:44

【理论】测试框架体系TDD、BDD、ATDD、MBT、DDT介绍

一、测试框架是什么测试框架是一组用于创建和设计测试用例的指南或规则。框架由旨在帮助 QA 专业人员更有效地测试的实践和工具的组合组成。这些指南可能包括编码标准、测试数据处理方法、对象存储库、存储测试结果的过程或有关如何访问外部资源的信息。 A testing framewo…...

编程日记 2025/6/4 10:49:00

机器学习全流程解析：数据导入到服务上线全阶段介绍

目录 1. 数据导入 2. 数据预处理 3. 超参数搜索与优化 4. 模型训练 5. 模型评估 6. 模型压缩与优化 7. 模型注册与版本管理 8. 服务上线与部署总结 1. 数据导入数据源：数据库、文件系统、API等。数据格式：CSV、JSON、SQL 数据库表、Parquet …...

编程日记 2025/5/31 9:19:50

shell脚本练习

1、shell 脚本写出检测 /tmp/size.log 文件如果存在显示它的内容，不存在则创建一个文件将创建时间写入。 if [ -f /tmp/size.log ];thencat /tmp/size.logelsestat exist.sh | awk -F: "NR5" > /tmp/size.logfi 2、写一个 shel1 脚本,实现批量添加…...

编程日记 2025/5/31 4:42:09

金山WPS Android面试题及参考答案

说说你所知道的所有集合？并阐述其内部实现。在 Android 开发（Java 语言基础上）中有多种集合。首先是 List 集合，主要包括 ArrayList 和 LinkedList。 ArrayList 是基于数组实现的动态数组。它的内部有一个数组来存储元素，当添加元素时，如果数组容量不够，会进行扩容操作…...

编程日记 2025/5/29 10:10:43

分类模型为什么使用交叉熵作为损失函数

推导过程让推理更有体感，进行下面假设： 假设要对猫、狗进行图片识别分类假设模型输出 y y y，是一个几率，表示是猫的概率训练资料如下： x n x^n xn类别 y ^ n \widehat{y}^n y n x 1 x^1 x1猫1 x 2 x^2 x2猫1 x …...

编程日记 2025/6/2 14:55:24

高等数学学习笔记 ☞ 单调性、凸凹性、极值、最值、曲率

1. 单调性 1. 单调性定义：设函数在区间上有定义，对于区间上任意两点，若： ①：当时，恒有，则称函数在区间上单调递增。 ②：当时，恒有，则称函数在区间上单调递减…...

编程日记 2025/6/3 1:50:59

【操作系统】详解操作系统及其结构

考察频率难度40%--60%⭐⭐ 这又是一类面试考察题，是关于操作系统的一些概念问题，很少会单独拎出来作为一个问题进行提问，但却是必须要掌握的。因为如果这个你不会，其他的问题就已经没有回答的必要了。什么是操作系统&#xff1…...

编程日记 2025/6/2 8:49:07

primitive 的 Appearance编写着色器材质

import { nextTick, onMounted, ref } from vue import * as Cesium from cesium import gsap from gsaponMounted(() > { ... })// 1、创建矩形几何体，Cesium.RectangleGeometry：几何体，Rectangle：矩形 let rectGeometry new…...

编程日记 2025/5/30 8:34:53

自动化测试框架搭建-接口数据结构设计

目的确认数据库如何保存接口数据，既有扩展性，数据又全又好用根据用途设计数据库字段区分环境：可以明确当前接口自动化用例，是在哪个环境需要执行的模块：微服务架构，不同测试同学负责不同的模块&…...

编程日记 2025/6/3 8:22:57

Python自学 - 使用自定义异常

<< 返回目录 1 Python自学 - 使用自定义异常在Python中， 不仅可以使用内置异常，用户还可以创建自己的异常。自定义异常需要继承自Exception类或其子类，如下是一个自定义异常示例： 示例1：一个简单的自定义异常…...

编程日记 2025/6/2 10:36:51

微信小程序-Docker+Nginx环境配置业务域名验证文件

在实际开发或运维工作中，我们时常需要在 Nginx 部署的服务器上提供一个特定的静态文件，用于域名验证或第三方平台验证。若此时使用 Docker 容器部署了 Nginx，就需要将该验证文件正确地映射（挂载）到容器中，并…...

编程日记 2025/6/4 15:30:00

“AI智能服务平台系统，让生活更便捷、更智能

大家好，我是资深产品经理老王，今天咱们来聊聊一个让生活变得越来越方便的高科技产品——AI智能服务平台系统。这个系统可是现代服务业的一颗璀璨明珠，它究竟有哪些魅力呢？下面我就跟大家伙儿闲聊一下。一、什么是AI智能服务平台系…...

编程日记 2025/6/4 1:29:22

【PPTist】插入形状、插入图片、插入图表

一、插入形状插入形状有两种情况，一种是插入固定的形状， 一种是插入自定义的形状。插入固定的形状时，跟上一篇文章绘制文本框是一样一样的，都是调用的 mainStore.setCreatingElement() 方法，只不多传的类型不一…...

编程日记 2025/6/3 13:44:29

云集电商：数据库的分布式升级实践｜OceanBase案例

电商行业对数据库有哪些需求云集电商作为一家传统电商企业，业务涵盖了美妆个护、服饰、水果生鲜、健康保健等多个领域，在创立四年后在纳斯达克上市（股票代码：YJ）。与京东、淘宝、拼多多等电商平台不同，云…...

编程日记 2025/6/3 19:26:58

OOM排查思路

K8S 容器的云原生生态，改变了服务的交付方式，自愈能力和自动扩缩等功能简直不要太好用。有好的地方咱要夸，不好的地方咱也要说，真正的业务是部署于容器内部，而容器之外，又有一逻辑层 Pod 。对于容器和…...

编程日记 2025/6/4 12:51:51

Q_OBJECT宏报错的问题

在Qt中继承QObject，并且加上Q_OBJECT宏，有时候会报错，比如我的错误： error: debug/httpmgr.o:httpmgr.cpp:(.rdata$.refptr._ZTV7HttpMgr[.refptr._ZTV7HttpMgr]0x0): undefined reference to vtable for HttpMgr 意思是没有虚…...

编程日记 2025/6/2 5:33:13

详细总结 Objective-C 的关联对象功能： 1. 基本使用 // 1. 设置关联对象 objc_setAssociatedObject(id object, const void *key, id value, objc_AssociationPolicy policy);// 2. 获取关联对象 id objc_getAssociatedObject(id object, const void *key);// 3. …...

编程日记 2025/6/4 17:12:19

Linux之进程

Linux之进程一.进程进程之形ps命令进程状态特殊进程孤儿进程守护进程进程创建之创建子进程进程特性优先级进程切换（分时操作系统） 二.环境变量三.进程地址空间四.进程终止&进程等待五.进程替换六.自定义shell 本篇博客希望简略的介绍进程&#xff…...

编程日记 2025/6/1 16:02:39

数据库事务

一事务的概念为什么要有事务，我们先前没学事务，也能写sql语句，事务的意义是什么? 由来: 是为了服务应用层开发，降低开发难度。假如没有事务，那我们身为开发人员，要处理转账需求，此时一定是有…...

编程日记 2025/6/4 12:26:23

Python statistics 模块

在数据分析和科学计算中，统计学是一个非常重要的工具。 Python 提供了一个内置的 statistics 模块，专门用于处理基本的统计计算。本文将详细介绍 statistics 模块的功能和使用方法，帮助初学者快速掌握如何使用这个模块进行基本的统计分析。 …...

编程日记 2025/6/2 18:39:54

AI知识-TF-IDF技术（Term Frequency-Inverse Document Frequency）

摘要 TF-IDF（Term Frequency-Inverse Document Frequency）是一种常见的统计方法，用于评估一个词对于一个文档集或一个语料库中的其中一份文档的重要性。本文将全面阐述TF-IDF的通俗理解、技术原理、应用场景，并做以总结。通俗理…...

编程日记 2025/6/2 3:16:49

spring cloud的核心模块有哪些

Spring Cloud 的核心模块就像一套精心设计的工具箱，每个模块都扮演着特定的角色，共同构建起微服务架构的坚实基础。 1. Spring Cloud Netflix（部分组件已迁移或弃用，但仍是理解 Spring Cloud 的重要参考）： …...

编程日记 2025/6/3 16:18:00

java_将数据存入elasticsearch进行高效搜索

使用技术简介： (1) 使用Nginx实现反向代理，使前端可以调用多个微服务 (2) 使用nacos将多个服务管理关联起来 (3) 将数据存入elasticsearch进行高效搜索 (4) 使用消息队列rabbitmq进行消息的传递 (5) 使用 openfeign 进行多个服务之间的api调用参…...

编程日记 2025/6/2 22:50:19

RAG中的文本切分策略详解

RAG中的文本切分策略详解 1. 选择RAG中的文本切分策略 1.1 不同的文本切分策略 1. CharacterTextSplitter - 这是最简单的方法。它默认基于字符（默认为""）来切割，并且通过字符的数量来衡量块的长度 2. RecursiveCharacterTextSplitter - 基于字符列表拆分文本。 …...

编程日记 2025/6/4 5:36:41

1-1 电场基本概念

目录： 目录目录： 1.0 电荷守恒定律 2.0 互斥与相吸 3.0 电场的概念 4.0 库伦定律 5.0 矢量的概念 1.0 电荷守恒定律电荷守恒定律是物理学中的一个基本原理，它指出在一个封闭系统内，电荷的总量是保持不变的。这意味着电荷既…...

编程日记 2025/5/31 4:55:01

SpringBoot初始化执行自定义接口

SpringBoot初始化执行自定义接口直接加载接口的方法上即可 PostConstructpublic void init() {//加载初始化数据}PostConstruct‌是一个在Java EE 5规范中引入的注解，用于标记在依赖注入完成后需要执行的方法。这个注解定义在javax.annotation包中，而不…...

编程日记 2025/5/28 21:43:52

【Ubuntu与Linux操作系统：一、Ubuntu安装与基本使用】

第1章 Ubuntu安装与基本使用 1.1 Linux与Ubuntu Linux是一种开源、类Unix操作系统内核，拥有高稳定性和强大的网络功能。由于其开源性和灵活性，Linux被广泛应用于服务器、嵌入式设备以及桌面环境中。 Ubuntu是基于Debian的一个流行Linux发行版&#xf…...

编程日记 2025/5/22 16:13:44

C++大端小端判断方法

文章目录大端小端定义判断方法方法一：利用联合体（Union）特性判断方法二：通过指针类型转换判断方法三：利用位运算与移位操作判断方法四：使用系统提供的字节序相关宏（特定平台支持） 联…...

编程日记 2025/6/4 13:36:46

【IO编程】标准IO和文件IO的对比

标准 I/O 和文件 I/O 是两种常见的输入输出操作方式。它们的核心功能都是处理数据流，但使用场景和实现方式有所不同，适用于不同的需求。标准 I/O 标准 I/O 是指与标准输入、标准输出和标准错误流（分别为 stdin、stdout 和 stderr&#xf…...

编程日记 2025/6/2 17:19:30

C#范围表达式,模式匹配,逆变和协变--11

目录一.范围表达式 1.概述 2.语法 3.代码示例 4.实现原理 5.应用场景二.模式匹配 1.概述 2.核心概念 3.常用模式类型 4.Switch表达式 5.使用示例 6.优势三.逆变和协变 1.概述 2.泛型类型参数的变性 3.协变示例 4.逆变示例 5.注意事项 6.应用场景总结一…...

编程日记 2025/6/3 18:04:16

矩阵求逆的几种方式

矩阵求逆的几种方式（以二阶为例） 矩阵求逆的方法有多种，以下是常用的几种方式总结： 1. 行列式公式法这是最常见的方法，适用于 2 2 2 \times 2 22矩阵。对于矩阵： Φ [ a b c d ] , \Phi \begin{bma…...

编程日记 2025/6/2 3:12:11

全新市场阶段， Plume 生态不断壮大的 RWAfi 版图

加密市场在 2024 年迎来了新的里程碑。BTC 不仅成功推出 ETF，以 BTC 为代表的主流加密货币还在一系列传统金融机构的推动下逐步与主流金融市场接轨。与此同时，随着特朗普成功当选下一任美国总统，他承诺推出一系列友好的加密政策，并…...

编程日记 2025/6/2 18:39:36

HTTPS SSL/TLS 工作流程

目录一、HTTP/HTTPS 简介1、HTTP协议相关内容2、HTTPS协议3、HTTP版本差异： 二、HTTPS 协议工作流程解析1. 客户端请求 SSL 握手2. 服务端接收 SSL 握手连接3. TLS 握手中的密钥协商4. HTTP 数据的加密与解密5. 安全性保障三、HTTPS 协议的相关知识拓展1. TLS 与 …...

编程日记 2025/6/3 4:15:17

基于异步IO的io_uring

基于异步IO的io_uring 1. io_uring的实现原理 io_uring使用了一种异步IO机制，它通过一对环形缓冲区(ring buffer)实现用户态于内核态之间的高效通信，用户只需将IO请求放入提交队列，当内核完成IO请求时，会将结果放入完成队列&…...

编程日记 2025/6/1 10:36:00

【redis】centos7下安装redis7

在CentOS 7下安装Redis7可以通过以下两种方法实现：手动编译安装和使用YUM进行安装。 CentOS 7系统的环境和版本： $ cat /etc/centos-release CentOS Linux release 7.9.2009 (Core)手动编译安装参考官方文档：https://redis.io/docs/lates…...

编程日记 2025/6/4 4:10:07

信息系统项目管理-采购管理-采购清单示例

序号类别产品/服务名称规格/功能描述数量备注1硬件服务器高性能处理器，大容量存储10HP、DELL2网络设备高速路由器和交换机10华为3工作站多核处理器，高分辨率显示器25国产设备4移动检查设备手持式移动检查仪，可连接云平台30国产设备5打印机和扫…...

编程日记 2025/6/2 21:19:00

python 代码使用 DeepXDE 库实现了一个求解二维非线性偏微分方程（PDE）的功能

import deepxde as dde import numpy as np import matplotlib.pyplot as plt import tensorflow as tf# 设置时空计算域 Lx 1 # x 范围从 0 到 1 Ly 1 # y 范围从 0 到 1 Lt 0.05 # t 范围从 0 到 0.05 geom dde.geometry.Rectangle([0, 0], [Lx, Ly]) # 空间域 timed…...

编程日记 2025/5/30 10:54:19

后端技术选型 sa-token校验学习下结合项目学习后端鉴权

目录后端注册拦截器实现对 WebMvcConfigurer 接口的类实现静态变量方法重写注册 Spring Framework拦截器 Sa-Token中SaServletFilter拦截器思考为什么使用两个拦截器 1. Spring Framework 拦截器 2. SaServletFilter 为什么要注册两个拦截器？ 总结 …...

编程日记 2025/6/1 11:07:51

继承（8）

大家好，今天我们来学习一下继承方式相关的知识，有助于我们对java的继承有更深的了解，话不多说，来看。 1.10 继承方式在现实生活中,事物之间的关系是非常复杂,灵活多样。 Java中支持以下几种继承方式: 单继承： 多层…...

编程日记 2025/6/3 20:22:40

深度学习-图神经网络-超图概念及在Hyper-YOLO的应用（小白也看懂）

为什么需要超图？ 在一个复杂系统中，某些节点（实体）之间的互动可能不是仅限于两个节点之间的关系，而是多个节点同时参与的更复杂的关系（超边）。简单说就是为了更好的描述事物之间的关系&#xf…...

编程日记 2025/6/3 6:48:58

django基于Python的校园个人闲置物品换购平台

Django 基于 Python 的校园个人闲置物品换购平台一、平台概述 Django 基于 Python 的校园个人闲置物品换购平台是专为校园师生打造的一个便捷、环保且充满活力的线上交易场所。它借助 Django 这一强大的 Python Web 开发框架，整合了校园内丰富的闲置物品资源&…...

编程日记 2025/6/3 2:40:15

opencv的NLM去噪算法

NLM（Non-Local Means）去噪算法是一种基于图像块（patch）相似性的去噪方法。其基本原理是： 图像块相似性：算法首先定义了一个搜索窗口（search window），然后在该窗口内寻找…...

编程日记 2025/6/1 15:59:07

嵌入式系统中的 OpenCV 与 OpenGLES 协同应用

🎬 秋野酱：《个人主页》 🔥 个人专栏:《Java专栏》《Python专栏》 ⛺️心若有所向往,何惧道阻且长文章目录一、OpenCV 在嵌入式中的基石地位二、OpenGLES 为嵌入式图形渲染赋能三、二者协同的精妙之处四、面临的挑战与应对策略在嵌入式开…...

编程日记 2025/6/2 1:22:05

第三十六章 Spring之假如让你来写MVC——拦截器篇

Spring源码阅读目录第一部分——IOC篇第一章 Spring之最熟悉的陌生人——IOC 第二章 Spring之假如让你来写IOC容器——加载资源篇第三章 Spring之假如让你来写IOC容器——解析配置文件篇第四章 Spring之假如让你来写IOC容器——XML配置文件篇第五章 Spring之假如让你来写…...

编程日记 2025/6/2 10:34:43

DDD - 如何运用 DDD 进行数据库设计

文章目录 Pre概述领域对象持久化的思想领域模型的设计传统的 4 种关系1. 一对一关系2. 多对一关系3. 一对多关系4. 多对多关系继承关系的 3 种设计1. 继承关系的第一种方案：整个父类与子类都写入一张表2. 继承关系的第二种方案：各子类各自对应各自的表3…...

编程日记 2025/5/30 13:49:42

OSPF - 特殊报文与ospf的机制

👠1 携带FA地址的5类LSA 除去7类转5类的LSA会携带FA地址，还有一种情况会有FA地址 FA地址:forwarding address 转发地址，解决次优路径，避免环路5类LSA FA地址不为0，则直接通过FA地址去往目标网段 FA地址为0&#xff0c…...

编程日记 2025/5/30 19:26:05

VSCode 插件

VSCode 插件 1. GitHub Copilot - AI 代码助手功能：根据上下文提供实时代码补全，支持自然语言转代码，提供符合现代编程规范的建议。进阶技巧： 使用快捷键 Alt ] 切换多个建议。写注释时，描述业务逻辑而不是具体实现…...

编程日记 2025/6/3 13:30:19

jQuery CSS 类

jQuery CSS 类引言在网页设计和开发中，CSS（层叠样式表）起着至关重要的作用，它负责定义网页的布局、颜色、字体等视觉效果。jQuery，作为一个快速、小巧且功能丰富的JavaScript库，极大地简化了HTML文档的…...

编程日记 2025/6/3 20:40:15

CentOS下安装Docker

Docker 必须要在Linux环境下才能运行，windows下运行也是安装虚拟机后才能下载安装运行，菜鸟教程下载安装 linux 依次执行下边步骤更新 yum yum update 卸载旧的Docker yum remove docker docker-client docker-client-latest docker-common doc…...

编程日记 2025/6/3 8:14:02

相关文章：