vue动态引用script脚本标签

于 2024-08-16 14:36:05 发布
阅读量84 收藏
点赞数 1
文章标签： 前端 javascript 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46005282/article/details/141259186
版权

项目中有个功能是复制链接后，新开一个浏览器标签页打开分享页，但是这个分享页不需要之前引入的script标签，引入就会导致页面加载过慢。

之前是直接在head中引入

优化后

先把上面引入的script标签删除，获取当前的url，如果当前url不包含分享页的路由就动态添加script脚本

qq_46005282
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue动态加载外部依赖js代码实现
11-19
- 本案例中，我们将通过创建一个名为`myScript.vue`的组件来封装动态加载JS文件的功能，使得该功能可以方便地被其他模块引用。 2. **动态加载JS文件的实现** - 在浏览器环境中，可以通过创建`<script>`标签并动态...
vue引用外部JS的两种种方法
10-15
Vue.js作为一种流行的前端框架，允许开发者通过多种方式在项目中引用外部JavaScript库或者自定义脚本。...对于Vue引用外部JS的详细参考，本文已经进行了详细介绍，相信会给需要的朋友们提供有价值的参考。
vue中动态设置（创建）javascript的script 标签&js脚本内容&外部js详解
初心 - 杨瑞超个人博客
06-15 1万+
动态通过src引入 // 创建script标签，引入外部文件 let script = document.createElement('script') script.type = 'text/javascript' script.src = 'http://xxx.xxx.js' document.getElementsByTagName('head')[0].appendChild(script) 创建script标签并写入脚本 let script = document.createElem.
vue使用javascript动态创建script - 动态引入外部js文件
热门推荐
大华阿大华的博客
07-01 2万+
// 创建script标签，引入外部文件 let script = document.createElement('script') script.type = 'text/javascript' script.src = 'http://xxx.xxx.js' document.getElementsByTagName('head')[0].appendChild(script) // 创建s...
vue3页面script脚本中使用i18n国际化语言
qq_42483955的博客
07-26 1089
解决国际化语言在vue页面脚本中使用
VUE3笔记
书生的博客
10-25 789
vite是一个web开发构建工具，由于其原生的ES模块导入方式，可以实现快速的冷服务器启动。通过终端中运行以下命令，可以使用vite快速构建vue项目。
vue使用render函数自定义标签动态导入js文件
qq_43818838的博客
11-26 1583
Render、createElement参数的说明和使用，
vue如何引入script的在线链接
weixin_44192363的博客
07-23 1659
<template> <view>引入一个动态厨娘</view> </template> <script> export default { mounted() { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = `https://cdn.jsdel
通过创建script标签来引入外部js
L_csdn123的博客
04-25 5949
通过创建script 标签再引入外部的js 可以等到引入的js 结束之后再执行函数，但是直接通过import的方式引入js的话可能无法控制是否js引入完成后再执行的函数顺序了 const script = document.createElement("script"); script.type = "text/javascript"; script.src = "https://xxxxx.js"; // 这个写法是获取到页面的body标签，向节点的子节点列表的末尾添加script document.g
【bug】Vue v-html 中js脚本＜script＞标签不生效的问题
weixin_43680337的博客
01-08 5128
现象 想使用v-html 渲染拼接好的元素到vue模板中。 例子如下 定义（写死）的数据 绑定原生的html 这里绑定的content就是我回头要动态生成的html文本，最后渲染在页面上的效果如下： 问题就在于，这里的脚本没有生效。 如果单独搞一个简单的html，虽然代码完全一样却是能生效的： 解决办法 完全搞不清楚为什么页面上明明显示了脚本，却不能生效。我想应该和浏览器的对这段代码段的解析时机有关，可能把谈当做普通的标签加载了。 但是经过各种百度终于找到一...
vue3学习笔记（1）script引入vue3实现简单应用
gtd54789的博客
04-23 4318
目录一、脚本引入简单使用二、双向绑定的基本表现 一、脚本引入简单使用 script引入 <!-- vue3脚本地址为:https://unpkg.com/vue@3.2.31/dist/vue.global.js --> <script src="https://unpkg.com/vue@3.2.31/dist/vue.global.js"></script> 简单使用实现数据渲染 <body> <!-- 添加html结构 -->
Vue组件模板及组件互相引用代码实例
10-15
本文将详细讲解Vue组件的模板、组件互相引用以及组件间数据的传递。 1. **Vue组件的构成** 每个Vue组件通常包含三个主要部分： - **模板（Template）**：这是组件的HTML结构，它定义了组件如何呈现给用户。在Vue...
vue刻度尺组件文件源码
04-08
2. **组件脚本（Script）**：这部分通常包含JavaScript代码，定义组件的逻辑和属性。在这里，可能有计算属性来确定刻度的位置，方法来处理用户交互，以及暴露给父组件的props来接收外部数据。 3. **组件样式（Style...
vue@2.6.14.zip
07-12
Vue.min.js文件包含了Vue的核心库，允许开发者在HTML中使用`<script>`标签引入，并开始编写Vue应用。 在标签中，"web"代表这与Web开发相关，"vue"是Vue.js框架的标识，"离线包"再次强调了这个特性，而"本地包"则...
JAVA-WEB资源配置
最新发布
caryeko的专栏
08-15 199
用JAVA进行编写WEB项目时，我们一般需要对WEB进行统一配置，例如制定拦截路径、页面解析器、跨域配置、fastjson报文解析、文件上传大小配置等。
使用WebSocket实现一个简易的聊天室
qq_51321722的博客
08-14 419
其次，要有相关配置类以及Controller。我这里的框架是SpringBoot。首先，我们要有一个前端页面。
谷粒商城实战笔记-175~177-商城业务-检索服务-检索查询接口开发
epitomizelu的专栏
08-13 787
搜索页面搭建完成之后，点击搜索按钮，发送参数给后台服务，后台服务根据参数从Elasticsearch中查询符合条件的数据，返回给前端。
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 304
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
vue 引用echart
07-30
在Vue.js项目中引入ECharts，你需要先安装ECharts的依赖，然后在组件中导入并使用它。以下是基本步骤： 1. **安装ECharts**: 使用npm或yarn安装ECharts库： ```bash npm install echarts @vue/echarts --save # 或者使用 yarn yarn add echarts @vue/echarts ``` 2. **注册组件插件**: 如果你在main.js或其他全局脚本中配置Vue，需要注册ECharts Vue插件： ```javascript import { ECharts } from '@vue/echarts' Vue.use(ECharts) ``` 3. **在组件中引用ECharts**: 在需要图表的组件里，通过`<template>`标签内的`<echarts>`元素来使用： ```html <template> <div ref="chart" style="width: 600px;height:400px;"></div> </template> <script> export default { data() { return { chart: null } }, mounted() { this.initChart() }, methods: { initChart() { const myChart = this.$echarts.init(this.$refs.chart); // ...此处编写你的ECharts配置项和数据... myChart.setOption({ // ECharts图表配置... }); } } } </script> ``` 4. **注意兼容性和配置**: ECharts本身支持多种图表类型，你需要在初始化时传入合适的配置，并处理老版本的Vue或IE浏览器的兼容性问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值