在Vue.js应用程序中动态加载JavaScript脚本
如何在Vue.js应用程序中动态加载JavaScript脚本？
以下是一个简单的解决方案：
<script async v-bind:src="srcUrl"></script>
<!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
但是第一行不加载脚本（它不向HTML添加script元素）。
第二行是有效的。第二行是相同的，只是将app变量替换为纯文本（srcUrl）=
我的错误在哪里？
完整的演示供参考（它应该在空白页面上加载谷歌自定义搜索引擎）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="load-script">
<div>{{ srcUrl }}</div>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<script async v-bind:src="srcUrl"></script>
<!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
</div>
<script>
new Vue({
el: '#load-script',
data: {
srcUrl: "https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"
}
});
</script>
</body>
</html>
我找到了相关的问题，但它们似乎没有准确描述这种情况：
为什么是vue
共有1个答案
您可以添加
如果您使用的是Vue，您可以在页面加载时使用其安装的属性将脚本添加到load-cript div：
Vue({
mounted: function () {
let divScripts = document.getElementById('load-script');
let newScript = document.createElement('script');
newScript.src = 'https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37';
divScripts.appendChild(newScript);
}
});
作为向Vue属性添加函数的替代方法，有一个名为LoadScript的简单Vue插件可以加载和卸载脚本。
import LoadScript from 'vue-plugin-load-script';
Vue.use(LoadScript);
要加载脚本：
Vue.loadScript('https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37')
.then(() => {
// do something after script loads
})
.catch(() => {
// do something if load fails
});
要卸载脚本，请执行以下操作：
Vue.unloadScript('https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37')
.then(() => {
// do something after script unloads
})
.catch(() => {
// do something if unload fails
});
-
我已经动态加载了一个CSS文件，并将其放置在Windows8应用程序的标记中。 下面是我加载CSS的方法 当我在Visual Studio中使用DOM Explorer查看加载的内容时，我看到的正是我所期望的，中的最后一个标记是包含CSS的。 但是，当我查看我的页面时，加载的CSS不会产生影响。 我通过在HTML源代码中手动添加另一个标记来测试这一点，这起了作用，但动态标记没有作用。 我怎样才能让
-
问题内容： 是否可以在运行时加载特定的程序包？我想要一种插件，每个插件具有与其他插件相同的功能，但行为不同，并根据配置文件加载一个或另一个。 问题答案： 您可能会考虑在运行时执行“插件”程序包，方法是编写一个新程序（例如到temp目录），然后通过exec.Command执行，类似于 您将在此处看到一些类似的代码。
-
这是我的第一个问题。我一路寻找，尝试了很多，但没有得到我想做的。问题是：我有一个应用程序使用SoundPool播放声音，仅此而已。但是要加载的东西很多(>50)，一个一个加载需要时间。看一看； @Override公共视图onCreateView（LayoutInflater inflater,ViewGroup container,Bundle savedInstanceState）{View V
-
我在Chrome开发控制台上观察到以下错误，即使使用Incognito窗口： 拒绝加载脚本的https://localhost:5001/_framework/aspnetcore-因为它违反了以下内容安全策略指令：“script src'sha256-ZT3q7lL9GXNGhPTB1Vvrvds2xw/kOV0zoeok2tiV23I=”。请注意，未显式设置“script src elem”，
-
问题内容： 我有这个模块，它将外部库与其他逻辑一起组成组件，而无需将标签直接添加到index.html中： 我注意到ES6规范是静态的，并且在TypeScript编译期间而不是在运行时进行了解析。 无论如何使其可配置，以便从CDN或本地文件夹加载file.js？如何告诉Angular 2动态加载脚本？ 问题答案： 如果使用的是system.js，则可以在运行时使用： 如果您使用的是webpack，
-
我有一个小的Flask应用程序，它使用python dotenv库加载我存储在名为的文件中的环境变量。一切都很好，但我最近意识到我实际上从未调用方法，所以我不确定它是如何工作的。出于好奇，我试着绕过它： 我甚至删除了导入（）-仍然有效 我重命名了<代码>。env到-不工作 我用