【问题标题】: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 编译器所做的工作只是将数据、计算方法或类似的东西映射到你挂载的组件中。

      只有你能做的就是不在你的目标元素中包含&lt;script&gt;标签。

      <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 元素。我希望它可以帮助你:)

      【讨论】:

      • 那么,结构是这样的吗? &lt;div id="vue1"&gt;&lt;/div&gt; &lt;div id="ads-place"&gt;&lt;/div&gt; &lt;div id="vue2"&gt;&lt;/div&gt;
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-09-23
      • 1970-01-01
      • 1970-01-01
      • 2021-11-13
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多