vue组件用法 vue组件不用template的写法

本文旨在指导如何在 vue 3 中不依赖独立的 `.vue` 组件文件，直接在现有 dom 点击这里下载 cdn 文件 `createapp` api 结合 dom Vue 2 和 Vue 2

在 Vue 2 New Vue({...}) 语法直接将一个 Vue 实例挂载到页面上的某个 DOM 元素：Vue 3 引入了Composition API和createApp函数，其核心理念和实现方式有所不同，但同样提供了不依赖独立组件文件创建响应式实例的能力。 Vue 3 是 createApp 函数创建，然后调用 .mount() 方法将其挂载到 DOM 元素上。虽然不再是直接 new Vue，但其目标是一致的：为特定的 DOM 区域赋予 Vue CreateApp 的配置对象中定义组件的逻辑和模板。 2. 通过 CDN 引入 Vue 3 创建实例

当您在未使用构建工具的纯前端项目中工作时，可以通过 CDN 将 Vue 3。2.1 从 DOM 下载到 DOM 中。 元素，将其内容作为模板。

立即学习“前端免费学习笔记（深入）”；

JavaScript代码：//CDN Vue导入const { createApp， ref } = Vue；const app = createApp({ setup() { // 使用ref创建响应式数据 const msg = ref(quot；Hello Vue 3!quot；)； // 返回要在模板中引入的数据和方法 return { msg }； }，}).mount('#app')； // 挂载到 id 为 'app' 的 DOM 元素登录后复制

HTML 代码：lt；!DOCTYPE htmlgt；lt；html lang=quot；zh-CNquot；gt；lt；headgt； lt；meta charset=quot；UTF-8quot；gt； lt；titlegt；Vue 3 CDN 现有 DOM 模板 lt；/titlegt； lt；!-- Vue 3 的全局构建版本 --gt； lt；script src=quot；https：//unpkg.com/vue@3/dist/vue.global.prod.jsquot；gt；lt；/scriptgt；lt；/headgt；lt；bodygt； lt；div id=quot；appquot；gt； lt；divgt；{{ msg }}lt；/divgt； lt；输入 v-model=quot；msgquot； /gt； lt；/divgt；lt；/bodygt；lt；/htmlgt；登录后复制

说明：通过 lt；script src="..."gt；标签引入 Vue 3。createApp 接收一个选项对象，其中 setup 函数是 Composition API 的入口。ref 函数用于创建响应式引用，其值可以通过 .value 访问。mount('#app') 将应用挂载到 ID 为 app 的 div 元素上，该 div 内部的 HTML将作为 Vue 实例的模板。2.2 使用内联模板

如果您需要 Vue CreateApp 的选项中直接提供一个模板字符串。

CDN Vue 代码：// CDN Vue 导入 const { createApp， ref } = Vue；const app = createApp({ setup() { const msg = ref(quot；Hello Vue 3 (Inline Template)!quot；)； return { msg }； }， // 提供一个内联字符串模板： ` lt；divgt；{{ msg }}lt；/divgt； lt；input v-model=quot；msgquot； /gt； `}).mount('#app')； // 挂载到 id 为 'app' 的 DOM 元素登录后复制

HTML 代码：lt；!DOCTYPE htmlgt；lt；html lang=quot；zh-CNquot；gt；lt；headgt； lt；meta charset=quot；UTF-8quot；gt； lt；titlegt；Vue 3 CDN内联模板lt；/titlegt；lt；!-- 引入Vue 3 的全局构建版本 --gt；lt；script src=quot；https://unpkg.com/vue@3/dist/vue.global.prod.jsquot；gt；lt；/scriptgt；lt；/headgt；lt；bodygt；lt；div id=quot；appquot；gt；lt；/divgt；lt；!-- 挂载点，其内容将被内联模板替换--gt；lt；/bodygt；lt；/htmlgt；登录后复制

说明：与前一种方式不同，挂载点div#app可以是空的，因为模板用于小型、自包含的组件或应用片段。3. Vue CLI或Vite）来搭建项目。

在这种环境下，Vue 模块通过 import 语句引入。

JavaScript 代码（如 main.js 或 app.js）：import { createApp， ref } from 'vue'；const app = createApp({ setup() { const msg = ref(quot；Hello Vue 3 (Module Environment)!quot；)； return { msg }； }， // 下载 .vue 文件 template： ` lt；divgt；{{ msg }}lt；/divgt； lt；input v-model=quot；msgquot； /gt； `}).mount('#app')；登录后复制

HTML代码（例如index.html)：lt；!DOCTYPE htmlgt；lt；html lang=quot；zh-CNquot；gt；lt；headgt； lt；meta charset=quot；UTF-8quot；gt； lt；titlegt；Vue 3 ---------- JavaScript文件--gt； lt；script type=quot；modulequot； src=quot；/src/main.jsquot；gt；lt；/scriptgt； lt；/bodygt；lt；/htmlgt；登录后复制

说明：通过 import { createApp， ref } from 'vue' 导入 Vue 核心功能。其余与 CDN JavaScript 文件的逻辑，并通过 lt；script type="module" src="..."gt； 引入。4. 它是 Composition API 它是 Composition API 的核心，用于定义的响应式状态、计算属性、方法和周期钩子setup 函数中返回。ref 函数：在 setup 生命函数中，ref 字符串、数字、布尔值），ref Value。模板来源：现有 DOM 模板：挂载点内部的 HTML 会被 Vue 编译为模板。内联模板选项：Vue 3 描述: View: Vue View 3 下载 Vue 3，每次只部分部分。

通过掌握现代方法，您可以在 Vue 3 无论是直接在浏览器中使用 CDN，还是在分层开发环境中。这为开发者提供了极大的便利性，能够根据项目需求选择最合适的开发模式。如需了解更多高级方案，例如多应用实例多个复杂的组件组合，建议考察 Vue 3 官方文档。

以上就是 Vue 3不使用独立组件文件创建响应式应用实例指南的详细，更多请关注乐哥常识网相关文章！相关标签： vue javascript java html js 前端 vite 浏览器 app 工具 前置开发 ai cdn JavaScript html 字符串 JS 对象 dom 大家都在看： 服务端渲染_Nuxt.js生命周期 JavaScript 虚拟内容列表_大数据渲染方案脚手架工具_javascript项目初始化解决 Vue 3 TypeScript项目中第三方库的类型声明问题JavaScript类型安全_TypeScript集成开发