在 vuejs el 中显示 ADS答案

【问题标题】：Showing ADS in vuejs el在 vuejs el 中显示 ADS
【发布时间】：2017-09-09 05:44:49
【问题描述】：

据我们所知，如果我们在“el”vuejs 中添加<script> 标签，会出现错误。这让我无法在 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 中不能放广告吗？

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

我刚刚搭建了一个可以加载的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>

【讨论】：

【解决方案2】：

这是不可能的，因为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>

【讨论】：

所以，我做 2 个区域？ 1 个区域仅用于 Vue（用于编译数据、组件等）和其他区域用于展示广告？

【解决方案3】：

先生，我认为这是不可能的，但我有一个替代方案，也许可以帮助您 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>

最后，在 ads 元素之后为另一个 Vue el 再次创建 html 元素。我希望它可以帮助你:)

【讨论】：

那么，结构是这样的吗？ <div id="vue1"></div> <div id="ads-place"></div> <div id="vue2"></div>