Javascript 模板[Vue.js]中带有脚本标记的广告

在我们的项目中，我们以前使用过Thymeleaf，但现在我们转到Vue.js，我们在使用相同的广告脚本时遇到了一些问题。脚本如下所示。我只修改了网址

<script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
<script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>

如果我们将这些标签放在

中，网页将显示以下消息：

模板应该只负责将状态映射到UI。 避免在模板中放置带有副作用的标记，例如 ，因为它们不会被解析

所以我一直在谷歌上搜索，寻找一个类似的案例。有一些插件可以为谷歌广告做到这一点，但它们不会为我们工作。转义脚本标记

在某种程度上是有效的，但是脚本在加载之后才添加到DOM中，因此它不会运行

有人遇到过类似的问题吗？如果是，你的解决方案是什么

Vue文件如下所示：

<template>
  <aside class="sidebar-ad ui-wide">
    <script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
    <script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>
  </aside>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>

导出默认值{
数据（）{
返回{}
}
}

您可以尝试使用此软件包

---

您不应该将Vue模板视为最终的HTML模板，尽管它们的语法几乎相同，并且也符合HTML语法

模板只是数据的UI框架（这就是为什么它被称为数据驱动范式）。它们被解析并转换为渲染函数，最终生成最终的反应式DOM树。在这个过程中，

标记确实很常见，因为它不是任何逻辑发生的地方

但是，如果您真的需要在组件中嵌入任何第三方脚本，有一种简单的方法可以做到这一点。

首先，为脚本创建容器：

<template>
    <div id="component-root">
        <!-- (...) -->
        <div v-el:script-holder></div>
    </div>
</template>

然后动态创建

标记并将其直接插入DOM树（使用纯香草JS）：

导出默认值{
数据（）{
返回{}；
},
就绪（）{
让scriptEl=document.createElement（'script'）；
scriptEl.setAttribute（'src'，'https://cdn.com/somescript.js');
scriptEl.setAttribute（'data-some-param'，'paramvalue'）；
这是.els.scriptHolder.appendChild（scriptEl）；
},
}

this.$els.scriptHolder

返回实际的DOM元素，调用

appendChild（）

强制浏览器插入DOM节点并像在普通HTML代码呈现过程中一样运行脚本

除了

$els

之外，还可以使用

$el

返回组件根DOM元素（在本例中为

），甚至可以使用

$root.$el

返回Vue应用程序根DOM元素

---

请注意，

this.$els

是Vue 1的一项功能，在Vue 2中已被

$refs

取代：

我制作了一个Vue组件来处理模板标记内的脚本加载

就我个人而言，我使用它在我的vuejs应用程序中加载广告

在这里：

---

有解决办法。也适用于

样式

标记

<component is="script" src="https://www.example.com/example.js" async></component>

在index.html文件中添加这些脚本是的，我可以这样做，但是我必须编写一个脚本，将广告移动到我需要的地方。这是我想避免的。。你也有这个实现…嘿，你有没有让它工作过？我现在处境相同，找不到解决问题的好办法。不，不幸的是没有。我最后把广告放在了Vue代码之外，因为我没有时间或资源继续搜索一个好的解决方案。它不适用于单个文件组件和网页包，因为它使用了

render（）

函数。我可以重写整个程序包以适应我的项目，但我希望我可以避免。我使用了这个，它非常有用。它也适用于我的单文件组件。对于更新的Vue 2语法，请改用属性

ref

：

<component is="script" src="https://www.example.com/example.js" async></component>