<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script> <script src="../../../vue.config.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> </div> <script> import Vue from 'vue' var app=new Vue({ el : '#app', data : { message : 'hello world' }, template:'<div>{{message}}</div>', created () { this.getIndexHtml() }, methods:{ getIndexHtml() { fetch('index.html') .then(res=>res.text()) .then(html=>{ this.index.Html = html }) } } }) </script> </body> </html>打开网页以后页面没有进行vue渲染

时间: 2024-03-05 12:55:05 浏览: 222

在你的代码中，有两个问题： 1. 在浏览器中无法直接使用 `import` 语法，需要使用 `script` 标签来引入 Vue 库，或者使用打包工具将代码打包成浏览器可识别的代码。因此，你需要将 `import Vue from 'vue'` 改成 `var Vue = window.Vue` 或者引入 Vue 库的 `CDN` 地址。 2. 在 Vue 3.x 版本中，不再支持使用 `template` 属性直接定义模板，需要使用 `render` 函数或者 `.vue` 单文件组件的方式来定义模板。因此，你需要将 `template` 属性的值改成 `render` 函数。下面是修改后的代码： ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.47/vue.cjs.js"></script> <script src="../../../vue.config.js"></script> </head> <body> <div id="app"> <p>{{message}}</p> </div> <script> var Vue = window.Vue // 或者使用 Vue 的 CDN 地址来引入 Vue 库 var app=new Vue({ el : '#app', data : { message : 'hello world' }, render(h) { // 使用 render 函数来定义模板 return h('div', this.message); }, created () { this.getIndexHtml() }, methods:{ getIndexHtml() { fetch('index.html') .then(res=>res.text()) .then(html=>{ this.index.Html = html }) } } }) </script> </body> </html> ``` 注意：由于你的代码中还涉及到 `vue.config.js` 文件，因此你需要确认这个文件是否存在并且正确引入。

阅读全文

相关推荐

-doctype-html-html-lang-en-dir-ltr-head-meta-name:

HTML中的<meta>标签的使用详解

梦幻之森圣诞树：html网页代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body> Cannot POST / </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>boot-01首页</title> </head> <body> 工程首页 BMI测试 BMI测试 </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Not found</title> </head> <body> Not found </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图书首页</title> </head> <body> 图书信息表 title auth pushdate </body> </html>、

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格标签的基本使用</title> </head> <body> 1 2 3 8 2 23 </body> </html>合并单元格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>我的web课程大作业</title> </head> <body> <script type="module" src="/src/main.js"></script> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <style type="text/css"> </style> </head> <body> 上 中 下 </body> <body> w </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewData["Title"] - Furion</title> </head> <body> @RenderBody() </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{%block title %} {% endblock%}</title> </head> <body> 我是父模版 {% block body%} {% block body%} </body> </html>

前端面试攻略（前端面试题、react、vue、webpack、git等工具使用方法）

常用的java基础类包括MD5、错误处理、映射、服务等等

大家在看

AWS(亚马逊)云解决方案架构师面试三面作业全英文作业PPT

形成停止条件-c#导出pdf格式

python大作业基于python实现的心电检测源码+数据+详细注释.zip

IEC 62133-2-2021最新中文版.rar

SAP各模块字段与表的对应关系

最新推荐

前端面试攻略（前端面试题、react、vue、webpack、git等工具使用方法）

常用的java基础类包括MD5、错误处理、映射、服务等等

租赁合同编写指南及下载资源

【项目管理精英必备】：信息系统项目管理师教程习题深度解析（第四版官方教材全面攻略）

最具代表性的改进过的UNet有哪些？

惠普P1020Plus驱动下载：办公打印新选择

数字电路实验技巧：10大策略，让你的实验效率倍增！

altium designer布线

Rust与OpenGL共同打造的迷宫游戏

数字电路设计基础：9大技巧带你从理论飞跃到实践

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>主页</title> <style type="text/css"> </style> </head> <body> 上中下 </body> <body> w </body> </html>