Vue3 入口文件createApp函数

2023-11-12

2.x中,main.js是vue项目的入口文件,引入构造函数Vue,然后new Vue传入配置项生成vm实例,如下:

import Vue from "vue"
import App from "./App.vue"
import router from "./router"
import store from "./store"

new Vue({
    router,
    store,
    render: h => h(App) 
}).$mount("#app")

Vue3 中,通过使用 createApp 函数来创建应用,使用vue库的createApp方法传入基组件生成vm,然后再调用vmmount方法传入选择器将实例挂载在dom节点上。

语法:

const app = Vue.createApp({ /* 选项 */ })

传递给createApp的选项用于配置跟组件,也就是入口文件。

// 先导入createApp模块
import { createApp } from 'vue';
import App from './App.vue';

// createApp 创建一个APP实例,将入口文件放进去,参数是根组件(HelloVueApp),在使用 mount() 挂载应用时,该组件是渲染的起点。
createApp(App).mount('#app');

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 练习</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app" class="demo">
  {{ message }}
</div>

<script>
const HelloVueApp = {
  data() {
    return {
      message: 'Hello,this is Vue3!'
    }
  }
}

Vue.createApp(HelloVueApp).mount('#app')
</script>
</body>
</html>

运行结果:
在这里插入图片描述

以上代码实现了: mount('#app')Vue 应用 HelloVueApp 挂载到 <div id="app"></div>DOM元素中。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue3 入口文件createApp函数 的相关文章

  • Android Make Update-api 方法

    目录 SOC Rk3288Android Version 8 1 SOC Rk3566Android Version 11 SOC Rk3288 Android Version 8 1 众所周知 当修改到framework变量时 需要mak
  • 可视化图表种类不清楚?这两个宝藏参考网址推荐给你~~

    我是小z 不少读者会问 有啥介绍可视化类型的学习和参考资料 我平时在绘制可视化作品时 也会对种类繁多的可视化图表选择和系统绘制无从下手 今天 就推荐平时自己参考的可视化表种类网站 帮你熟悉和完善图表类型 内容如下 Chart Guide d
  • Ubuntu常用的有3种进入终端(terminal)界面方法

    Ubuntu常用的有3种进入终端 terminal 界面方法 分别如下 按快捷键 Ctrl Alt T 即可打开终端窗口 或者按 Ctrl Alt F1 F6 均可进入终端 模拟终端 不显示桌面 直接搜索 终端 并进入 注意事项 如果采用方

随机推荐

  • Java 校验规则

    import java util regex Matcher import java util regex Pattern import static jodd util StringUtil isEmpty 数据校验 author lf
  • SPI菊花链原理和配置

    一 概述 在一个主机和多个从器件的典型 SPI 系统中 通常采用专门的片选信号来寻址从器件 随着从器件数量不断增加 片选线也随之增多 这种情况将给电路板布板带来很大的挑战 一个布板方法就是采用菊链结构 本文详细讲述了 SPI 系统的菊链配置
  • Python的优点和缺点

    Python的优点 1 简单 Python的语法非常优雅 甚至没有像其他语言的大括号 分号等特殊符号 代表了一种极简主义的设计思想 阅读Python程序像是在读英语 2 易学 Python入手非常快 学习曲线非常低 可以直接通过命令行交互环
  • python爬虫学习笔记-M3U8流视频数据爬虫

    M3U8流视频数据爬虫 HLS技术介绍 现在大部分视频客户端都采用HTTP Live Streaming 而不是直接播放MP4等视频文件 HLS Apple为了提高流播效率开发的技术 HLS技术的特点是将流媒体切分为若干 TS片段 比如几秒
  • Sqli-labs通关手册【1-30关】

    1 sql注入的原理 1 sql注入的原因 语言分类 解释型语言和编译型语言 解释型语言是一种在运行时由一个运行时组件解释语言代码并执行其中包含的指令的语言 而编译型语言是代码在生成时转换为机器指令 然后在运行时直接由使用该语言的计算机执行
  • Hadoop中的契约监控机制,被惊艳到了

    V xin ruyuanhadeng获得600 页原创精品文章汇总PDF 目录 一 前情概要 二 背景引入 三 问题凸现 四 Hadoop的优化方案 一 前情概要 这篇文章给大家聊聊Hadoop在部署了大规模的集群场景下 大量客户端并发写数
  • 应用存储和持久化数据卷:存储快照与拓扑调度(至天)

    本文将主要分享以下两方面的内容 存储快照概念 使用与工作原理 存储拓扑调度背景 概念 使用与工作原理 基本知识 存储快照产生背景 在使用存储时 为了提高数据操作的容错性 我们通常有需要对线上数据进行snapshot 以及能快速restore
  • 【资源】小程序项目源码、项目图片素材、全栈课程、项目效果图、小程序mpvue项目实例等资源大全

    1 微信小程序源码地址链接 https pan baidu com s 1P9ISKk9YjSHbFCIqfCM pQ 提取码 g8c3 2 130个微信小程序源码地址链接 https pan baidu com s 1Hiq 6IVvzD
  • CSDN竞赛第56期题解

    CSDN竞赛第56期题解 1 题目名称 因数 数字游戏 小Q的柠檬汁做完了 掏出了自己的数字卡牌 想要和别人做数字游戏 可是她又不想要输掉游戏 她制定好规则 每 次每个人只能把这个牌换成它的因子的某个牌 但是这个因子不能是1或者整数本身 现
  • win10更新后,wsappx占用高内存/资源管理器占用CPU高

    目录 问题记录 搜索与实践 最终解决办法 系统还原 新问题 设置搜索不能用 问题记录 2022 7 26晚 没注意点击了 关机并更新 有个intel驱动更新 不确定是否是驱动问题 第二天开机各种问题 wsappx占用大量内运存 电脑卡死 重
  • 利用SQLite数据库进行用户名、密码的注册和登录验证

    利用SQLite数据库进行存储用户名 密码等等其他信息 首先是activity main布局界面
  • Java线程池没用好,我不小心把系统搞崩了!

    V xin ruyuanhadeng获得600 页原创精品文章汇总PDF 目录 背景介绍 线程池的基本工作原理 线程池高并发场景下问题剖析 线程池高并发场景下性能优化 总结 背景介绍 大家好 今天给大家讲一个比较偏硬核技术类的知识 就是 J
  • 怎么提高编程能力?逻辑思维能力?

    一 对于程序员的编程能力的提升 学习一门简单而且可用性强的语言 写点自动签到 自动下动漫之类的日常小程序 提高编程兴趣 比如 python 可以选择教材 Learn Python The Hard Way 学习常见的算法和数据结构 根据个人
  • AOF 复写

    AOF 复写 上一篇博客我们提到AOF持久化有一个缺点是 aof持久化的文件会越来越大 导致redis因为某个原因重启时需要加载的aof文件会非常大 加载的很缓慢 针对这一缺点就引入了AOF复写 什么时AOF复写 Redis 为了避免 AO
  • 基于java+springboot+mybatis+vue+elementui的高校学习用品购物平台

    项目介绍 近年来 随着信息技术的高速发展和现代网络技术的完善 电子商务日益受到人们的重视 发展成为一种新兴商务模式 高校学习用品购物平台是电子商务的一项重要内容 高校学习用品购物平台的出现 使得学生购物变得更轻松 快捷 方便 满足了广大师生
  • Linux快速安装MySQL

    文章目录 Linux上安装MySQL 1 安装MySQL 1 上传MySQL安装包以及MySQL驱动jar包 2 解压MySQL安装包 3 卸载系统自带的mariadb 4 安装MySQL依赖 5 安装mysql client 6 安装my
  • vulnhub靶场-SOCIAL NETWORK

    1 靶机信息 靶机名称 BOREDHACKERBLOG SOCIAL NETWORK 靶机难度 中等 虚拟机环境 此靶机推荐使用Virtualbox搭建 目标 获取到root 权限 靶机地址 BoredHackerBlog Social N
  • Dockerfile(5) - CMD 指令详解

    CMD 指定容器默认执行的命令 exec 形式 推荐 CMD executable param1 param2 CMD 可执行命令 参数1 参数2 作为ENTRYPOINT的默认参数 CMD param1 param2 shell CMD
  • JetBrains IDEA插件推荐

    主题 VSCode Dark vscode的蓝黑配色 长时间写代码不伤眼 毕竟是vsocde多年的累积 配合dark黑色主题看着非常舒服 SequenceDiagram 自动生成类的调用时序图 更直观的看到类的内部调用关系 Maven He
  • Vue3 入口文件createApp函数

    在2 x中 main js是vue项目的入口文件 引入构造函数Vue 然后new Vue传入配置项生成vm实例 如下 import Vue from vue import App from App vue import router fro