以vuejs el显示广告
以vuejs el显示广告
提问于 2017-09-09 05:44:49
如我们所知，如果将<script>标记放在"el“vuejs中，就会显示出一个错误。这让我不能在vue el上放任何广告
例如：
new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="app">
{{ message }}
<script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>
- 模板应该只负责将状态映射到UI。避免在模板中放置带有副作用的标签，例如，因为它们不会被解析.
所以在Vue el上放广告是不可能的吗？
回答 3
Stack Overflow用户
发布于 2018-08-29 20:42:42
我刚刚构建了一个vue组件，它可以加载
我用它来加载来自Chitika，Medianet，Propeller等公司的广告
这是回购品：
https://github.com/TheDynomike/vue-script-component
下面是如何使用它：
<template>
<div>
<VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/>
<div>
</template>
<script>
import VueScriptComponent from 'vue-script-component'
export default {
...
components: {
...
VueScriptComponent
}
...
}
</script>
Stack Overflow用户
发布于 2017-09-09 12:06:40
这是不可能的，因为el选项用于指定使用Vue.js组件编译的DOM。这就是为什么你的错误说Templates should only be responsible for mapping the state to the UI。Vue.js编译器所做的工作只是将数据、计算方法或类似的东西映射到挂载组件中。
只有在目标元素中不包含<script>标记才是可以做到的。
<div>
<div id="app">
{{ message }}
</div>
<script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>Stack Overflow用户
发布于 2017-09-10 00:34:54
我认为这是不可能的，先生，但我有一个替代方案，也许可以帮助您需要split您的html元素。
首先，使用Vue.js编译数据(如来自数据库)。
<div id="app">
{{ data }}
</div>然后创建html元素来显示广告。
<div id="ads-example">
<script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>最后一次为另一个Vue el后面的ads元素创建html元素。我希望它能帮助你:)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/46127516
复制相关文章
相似问题
腾讯云开发者
