Vue3——创建一个应用
文章目录
- 创建应用实例
- 挂载应用
- 没有模板的组件的挂载
- 应用配置
- 多个应用实例
其实使用脚手架创建的vue项目的main.js文件中已经为我们配置好
vue应用的创建。
import { createApp } from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')
创建应用实例
每个 Vue 应用都是通过 createApp 函数创建一个新的 应用实例。
createApp的参数应该是一个组件,应该是应用的跟组件,其他组将将作为其子组件。
该组件可以是从其他文件夹引入的.vue文件,也可以是直接编写的组件内容:
- 引入文件做参数
import { createApp } from 'vue'
import App from './App.vue'const app = createApp(App)
- 直接编写组件内容
import { createApp } from 'vue'const app = createApp({template:'<div>组件的模板内容</div>', data() {return {count: 0}}
})
挂载应用
创建好的应用实例必须在调用了 .mount() 方法后才会渲染出来。.mount()方法接受一个“容器”参数,可以是一个实际的DOM元素,也可以是一个CSS选择器字符串。
index.html(容器位置):
<div id="app"></div>
挂载:
app.mount('#app')
应用实例的内容将会被渲染在容器元素里面。容器元素自己将不会被视为应用的一部分。
.mount() 方法应该始终在整个应用配置和资源注册完成后被调用。同时请注意,不同于其他资源注册方法,它的返回值是根组件实例而非应用实例。
没有模板的组件的挂载
根组件的模板通常是组件本身的一部分:
- 在组件的配置项中编写
template配置项 - 或者在组建文件的
<template></template>中直接编写模板。
但是组件也可能并没有模板,此时如果该组件作为根组件进行挂在的时候,Vue 将自动使用容器的 innerHTML 作为模板
eg:
index.html
<div id="app"><button @click="count++">{{ count }}</button>
</div>
main.js
import { createApp } from 'vue'const app = createApp({data() {return {count: 0}}
})app.mount('#app')
页面展示一个0
应用配置
应用实例会暴露一个 .config 对象允许我们配置一些应用级的选项:
- 配置错误处理器,捕获所有子组件上的错误
app.config.errorHandler = (err) => {/* 处理错误 */
}
- 注册组件
应用实例提供了一些方法来注册应用范围内可用的资源,例如注册一个组件:
app.component('TodoDeleteButton', TodoDeleteButton)
多个应用实例
用实例并不只限于一个。createApp API 允许你在同一个页面中创建多个共存的 Vue 应用,而且每个应用都拥有自己的用于配置和全局资源的作用域。
main.js
const app1 = createApp({/* ... */
})
app1.mount('#container-1')const app2 = createApp({/* ... */
})
app2.mount('#container-2')
相关文章:
Vue3——创建一个应用
文章目录 创建应用实例挂载应用没有模板的组件的挂载 应用配置多个应用实例 其实使用脚手架创建的vue项目的main.js文件中已经为我们配置好 vue应用的创建。 import { createApp } from vue import App from ./App.vue const app createApp(App) app.mount(#app)创建应用实例…...
深度学习系列56:使用whisper进行语音转文字
1. openai-whisper 这应该是最快的使用方式了。安装pip install -U openai-whisper,接着安装ffmpeg,随后就可以使用了。模型清单如下: 第一种方式,使用命令行: whisper japanese.wav --language Japanese --model…...
【Web - 框架 - Vue】随笔 - 通过`CDN`的方式使用`VUE 2.0`和`Element UI`
通过CDN的方式使用VUE 2.0和Element UI VUE 网址 https://cdn.bootcdn.net/ajax/libs/vue/2.7.16/vue.js源码 https://download.csdn.net/download/HIGK_365/88815507测试 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset&quo…...
设计模式(行为型模式)备忘录模式
目录 一、简介二、备忘录模式2.1、备忘录2.2、原发器2.3、备忘录模式 三、优点与缺点 一、简介 备忘录模式(Memento Pattern)是一种行为设计模式,旨在捕获一个对象的内部状态,并在不破坏对象封装的前提下将其保存,以便…...
opencv案例实战:条码区域分割
前言 识别二维码是一个日常生活中常见的应用,而识别之前,需要先分割出条形码的区域来获取条形码。我们可以使用OpenCV便捷的获取条码的区域。 逐步分析 为了了解数据处理的过程,我们逐步分析并显示处理过程 查看图像 在读入时,传入参数cv2.IMREAD_GRAYSCALE可以直接按…...
《MySQL》超详细笔记
目录 基本知识 主流数据库 数据库基本概念 MySQL启动 数据库基本命令 数据库 启动数据库 显示数据库 创建数据库 删除数据库 使用数据库 查询当前数据库信息 显示数据库中的表 导入数据库脚本 表 查看表的结构 查看创建某个表的SQL语句 数据库的查询命令 查询…...
商用密码
商用密码(Commercial Cryptography)涉及到多个方面,包括但不限于数据加密、数字签名、身份验证和安全通信等。商用密码的目的是保护信息的机密性、完整性和可用性,确保数据在存储和传输过程中的安全。以下是一些Java商用密码方向的…...
css1文本属性
一.颜色(color)(一般用16进制) 二.对齐(text-align) 三.装饰(text-decoration) 四.缩进(text-indent)(一般用2em)(有单位)…...
在容器中使用buildah构建镜像
简介 buildah是一个构建OCI标准镜像的工具,可以用来替代docker build 在常见的linux发行版中可直接通过包管理工具安装使用 # centos yum install buildah# ubuntu/debian apt install buildah# alpine apk add buildah其他发行版安装方法详见 github,…...
GPT4_VS_ChatGPT(from_nytimes)
GPT4 VS ChatGPT(from nytimes ) 正如文章官网博文:https://openai.com/research/gpt-4所述,GPT4仍有很多不足之处,还不及人类水平。纽约时报报道了一些人体验GPT4的效果和一些评价: Cade Metz 要求专家使…...
中兴R5300G4服务器查看服务器、主板序列号及硬盘RAID信息
本文在操作系统带内通过指令操作查看中兴R5300G4服务器、主板序列号及硬盘RAID信息。 一、中兴R5300G4服务器查看服务器、主板序列号 在Linux服务器上,可以使用dmidecode命令来查看服务器的硬件相关信息,由于该命令要读取系统的硬件信息,因…...
部署tomcat
1 idea打包完,找到target目录下的网站 我的叫做 test.webSYS 2 linux 安装 tomcat 后 修改conf下的server.xml中的Connector的port <Connector port"9001" protocol"HTTP/1.1"connectionTimeout"20000"redirectPort"8443…...
【Java 数据结构】枚举
枚举的使用 1 背景及定义2 使用3 枚举优点缺点4 枚举和反射4.1 枚举是否可以通过反射,拿到实例对象呢? 5 总结面试问题(单例模式学完后可以回顾): 1 背景及定义 public static final int RED 1; public static final int GREEN 2; public …...
Python(20)正则表达式(Regular Expression)中常用函数用法
大家好!我是码银🥰 欢迎关注🥰: CSDN:码银 公众号:码银学编程 正文 正则表达式 粗略的定义:正则表达式是一个特殊的字符序列,帮助用户非常便捷的检查一个字符串是否符合某种模…...
docker 离线安装镜像
一、导出镜像 下载完镜像后,我们需要将其导出为tar文件,以便在离线环境中使用。 执行以下命令导出镜像: docker save -o <保存路径>/<镜像名>_<版本>.tar <镜像名>:<版本>其中,<保存路径>是…...
由vscode自动升级导致的“终端可以ssh服务器,但是vscode无法连接服务器”
问题描述 简单来说就是,ssh配置没动,前两天还可以用vscode连接服务器,今天突然就连不上了,但是用本地终端ssh可以顺利连接。 连接情况 我的ssh配置如下: Host gpu3HostName aaaUser zwx现在直接在终端中进行ssh&am…...
typecho 在文章中添加 bilibili 视频
一、获取视频来源: 可以有2种方式来定位一个 bilibili 视频: 第一种是使用 bvid 参数定位第二种是使用 aid 参数定位 如何获取这两个参数? 首先我们可以看看 bilibili 网站中的视频页面链接其实可以分为两种: 第一种是类似&a…...
Android.mk 语法详解
一.Android.mk简介 Android.mk 是Android 提供的一种makefile 文件,注意用来编译生成(exe,so,a,jar,apk)等文件。 二.Android.mk编写 分析一个最简单的Android.mk LOCAL_PATH : $(call my-dir) //定义了…...
ChatGPT高效提问—prompt基础
ChatGPT高效提问—prompt基础 设计一个好的prompt对于获取理想的生成结果至关重要。通过选择合适的关键词、提供明确的上下文、设置特定的约束条件,可以引导模型生成符合预期的回复。例如,在对话中,可以使用明确的问题或陈述引导模型生成…...
Elasticsearch 中的索引的分区(Shards)和副本(Replicas)的使用
Elasticsearch是一个高性能的、分布式的搜索与数据分析引擎,广泛用于全文搜索、结构化搜索、分析以及这三者的组合场景。在Elasticsearch中,“索引”(Index)是其最基本的数据管理单位,可以类比为传统关系数据库中的“数…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)
HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...
通过Wrangler CLI在worker中创建数据库和表
官方使用文档:Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后,会在本地和远程创建数据库: npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库: 现在,您的Cloudfla…...
理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
最新SpringBoot+SpringCloud+Nacos微服务框架分享
文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的,根据Excel列的需求预估的工时直接打骨折,不要问我为什么,主要…...
SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现
摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序,以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务,提供稳定高效的数据处理与业务逻辑支持;利用 uniapp 实现跨平台前…...
聊一聊接口测试的意义有哪些?
目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开,首…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱,社区养老保险系统小程序被用户普遍使用,为方…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列?2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
安卓基础(Java 和 Gradle 版本)
1. 设置项目的 JDK 版本 方法1:通过 Project Structure File → Project Structure... (或按 CtrlAltShiftS) 左侧选择 SDK Location 在 Gradle Settings 部分,设置 Gradle JDK 方法2:通过 Settings File → Settings... (或 CtrlAltS)…...
