如何在vue项目中引入html页面

最新推荐文章于 2024-06-14 13:50:53 发布
最新推荐文章于 2024-06-14 13:50:53 发布
阅读量5.6w 收藏 112
点赞数 22
分类专栏： 前端 文章标签： npm 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45801837/article/details/121396196
版权

在vue项目中引入html页面的两种方法

第一种：/static/page.html

在static或public文件夹下，新建html页面，通过/static/page.html或者/page.html即可访问
在这里插入图片描述

在这里插入图片描述

第二种：通过iframe嵌入

第一种方法不需要新建路由，iframe方法在正常的vue页面中内嵌一个其他的html页面，所以需要正常建立路由。
在这里插入图片描述

加强亚索
关注
  • 22
    点赞
  • 踩
  • 112
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
专栏目录
Vue中插入HTML代码的方法
12-03
我们需要吧<p>Hello World</p>插入到<p>My name is Pjee</p>应该如何做？ 一、使用v-html v-html:更新元素的 innerHTML const text = `<p>Hello World</>` <p> My name is Pjee <p v-html='text'></p> </p> 注意：你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。 二、渲染函数 渲染函数：这是通过对VNode（虚拟DOM）的操作来生成 text()
VUE页面中加载外部HTML的示例代码
08-29
本篇文章主要介绍了VUE页面中加载外部HTML的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 项目中引入 本地html文件
最新发布
DivBOxp的博客
06-14 730
vue 项目中引入 本地html文件
如何在vue项目中嵌入jsp页面的方法(2种)
10-15
主要介绍了如何在vue项目中嵌入jsp页面的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue在index.html中引入静态文件不生效问题及解决方法
11-28
本文针对的是Vue小白，不喜勿喷，谢谢 出现该问题的标志如下 控制台warning（Resource interpreted as Stylesheet but transferred with MIME type text/html） 出现的原因及解决办法 第一种可能出现原因就是引入的静态文件在src文件夹内，这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static，这种的解决办法更改配置文件，把对应的几个配置文件内的static更改为你自己所创建的静态资源目录，由于网上大多教程所改的地方都不够完全，还是会出现该问题，
vue2： 外接html页面 iframe 使用
weixin_1095的博客
06-16 3521
contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档，可以通过所有标准的 DOM 方法来处理被返回的对象。
【vue-html】怎么在 VUE 页面中加载外部 HTML
小墨鱼的前端问题录
07-20 4291
指令时需要格外小心，因为它会将字符串中的所有 HTML 代码都渲染为实际的 HTML 内容。这可能会导致跨站脚本（XSS）攻击，因此应该仔细过滤或转义任何动态生成的 HTML 内容。这个指令可以用来将 HTML 字符串渲染为实际的 HTML 内容。库获取外部 HTML 文件的内容，并将其存储在 Vue 实例的。在 Vue 中加载外部 HTML 可以使用。然后，在模板中，我们使用。以下是一个简单的示例，展示如何使用。渲染为实际的 HTML 内容。在这个示例中，我们首先使用。
Vue中引入HTML静态资源文件（包含数据的传递）（html大屏）
weixin_49376462的博客
07-29 1万+
Vue中引入HTML静态资源文件（包含数据的传递），引入可视化大屏并出传递数据。
vue项目通过＜iframe＞嵌套静态html项目，并实现数据交互
qq_16785561的博客
11-21 1600
记录一下新项目集成老项目过程中产生的问题，需要vue项目实现引用HTML，并且实现vue页面可以传递数据到HTML页面，HTML页面也可以反向传递数据给vue页面。1、父页面（vue）传给子页面（html）2、子页面（html）传给父页面（vue）
Vue3项目中引入html页面
热门推荐
weixin_42560947的博客
11-24 1万+
Vue3项目中引入html页面
在vue中实现嵌套页面(iframe)
11-19
vue中嵌套iframe,将要嵌套的文件放在static下面。src可以使用相对路径，也可使用服务器根路径http:localhost:8088/… <iframe src=”../../static/plusPro.html” width=”1200″ height=”300″ frameborder=”0″ scrolling=”auto”style=”position:absolute;top: -300px;left: 0px;”></iframe> 补充知识：关于VUE嵌套iframe的一系列问题 此文是建立在vue-cli之上 ，当然单写也可以，下文会涉及一些关于cli的知识，
在vue项目中引入highcharts图表的方法
10-17
这将把Highcharts添加到项目的依赖列表中，使得在项目中可以正常使用。 然后，在Vue项目中的`components`目录下创建一个新的Vue组件，例如`Chart.vue`。在这个组件中，我们将定义图表的模板、脚本和样式。模板部分...
在vue项目中引入highcharts图表的方法(详解)
08-27
在 Vue 项目中引入 Highcharts 图表的方法详解 在 Vue 项目中引入 Highcharts 图表是一种常见的需求，Highcharts 是一个功能强大且灵活的图表库，可以生成各种类型的图表，如柱状图、折线图、饼图等。下面我们将...
HTML-引入Vue3和Element Plus
04-24
在本项目中，我们主要探讨如何在HTML页面中引入Vue3框架和Element Plus UI库，以便构建一个功能丰富的前端应用。Vue3是Vue.js的最新版本，提供了许多性能优化和新特性，而Element Plus则是一个基于Vue3的高质量UI...
在vue 项目下引入html页面
lqq_1125的博客
02-06 1219
在vue 项目下引入html页面
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
朝花夕拾的博客
08-10 4151
html页面同样也要根据传递过来不同的参数 去调整自己的逻辑，首先知道html是如何接收到vue传来的消息的，window监听message即可接收postMessage发送来的消息。通过window.parent['vue里面绑定的名称']（需要传递的参数） 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦！html页面接收时是通过message统一接收的，针对发送多个消息的情况下， 我们这里做下区分，将html页面通过iframe的方式嵌入进来之后，发现页面是空白的，不显示任何元素，
【前端07】vue中直接嵌入html页面
Noyade的博客
05-23 334
vue页面中引入ifraf昂me 标签，一定要注意html页面放的位置！一定要放在public里面，不然看不到。
vue-element-admin内嵌html页面
weixin_45973832的博客
03-03 984
vue-element-admin内嵌html页面
在HTML中引入vue组件
06-03
要在HTML中引入Vue组件，需要先在页面中引入Vue.js库。然后，使用Vue.component()方法来注册组件并将其添加到Vue实例中。下面是一个示例： 1. 引入Vue.js库： ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 2. 注册并引入Vue组件： ```html <div id="app"> <my-component></my-component> </div> <script> // 创建Vue组件 Vue.component('my-component', { template: '<div>Hello World!</div>' }); // 创建Vue实例 new Vue({ el: '#app' }); </script> ``` 在上面的示例中，我们创建了一个名为"my-component"的Vue组件，并将其添加到Vue实例中。然后，我们在HTML中使用该组件，将其渲染为"Hello World!"。
评论 12
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值