在百度联盟代码位管理中创建好对应的代码位之后,点击获取代码,会看到这样一段js

直接复制粘贴到自己网页中便可显示对应广告。

在vue中由于都是vue组件,不支持直接在组件中加入这样一段一段的js代码,我们采用如下方法:

1、首先在index.html中引入生成的代码中的js,

2、在vue组件中在想要显示广告位代码的地方写一个 <div id="ad_1"></div>

3、在对应的组件的mounted钩子中加入以下函数:

//悬浮样式
(window.slotbydup=window.slotbydup || []).push({
id: 'u319733',
container: 'ad_1'
});

id为生成的代码中的cpro_id,container为创建的div的id

到此,广告已经可以展示。

参考链接:https://segmentfault.com/q/1010000007738867

vue如何加入百度联盟广告的更多相关文章

  1. vue如何加搜狗联盟广告

    搜狗联盟广告和百度联盟广告大同小异,但是好在百度联盟广告的使用方法网上还是可以找到一些,而搜狗联盟广告的教程网上几乎找不到,都是最基本的创建代码位的教程. 在vue中如果要加入搜狗联盟广告,就不能直接 ...

  2. 移动端网页使用flexible.js加入百度联盟广告样式不一致问题解决

    flexible.js是淘宝推出的一款移动端手机自适应的库,源码内容很简洁,当网页使用了该库之后,页面会在head中加入对应的页面响应式的meta标签. 当使用flexible.js的时候,引入百度联 ...

  3. 百度联盟广告 http://cpro.baidustatic.com/cpro/ui/c.js

    <script src="http://cpro.baidustatic.com/cpro/ui/c.js" type="text/javascript" ...

  4. vue如何加入百度ssp广告位代码

    vue如何加入百度联盟广告,可以参考 :http://www.cnblogs.com/beileixinqing/p/8379184.html 这里讲述vue如何加入百度ssp媒体的广告 这里是百度异 ...

  5. Google AdSense的CPC点击单价超百度联盟(2014)

    很久没有关注AdSense了,一是访问不太方便,二是网站投放AdSense广告相当少,估计每天收入都不到1美元,所以就懒得去看了,一般都是几个月才去看一看. AdSense还行吗? AdSense点击 ...

  6. 广电的宽带网络真流氓,替换google的广告为百度的广告

    以前联通也有干过这事,最近联通,有没有继续干,不清楚.没有用联通了. 最近,连到某wifi,发现网站的google广告,居然显示成百度的,特别去访问另一家网站,发现,本该是google广告的位置,同样 ...

  7. Vue中使用百度地图——设置地图标注

    知识点:创建Map实例,为指定的位置设置标注 参考博客:https://www.cnblogs.com/liuswi/p/3994757.html 1.效果图:初始化地图,设置指定经纬度为地图中心点坐 ...

  8. Springboot+Vue实现仿百度搜索自动提示框匹配查询功能

    案例功能效果图 前端初始页面 输入搜索信息页面 点击查询结果页面 环境介绍 前端:vue 后端:springboot jdk:1.8及以上 数据库:mysql 核心代码介绍 TypeCtrler .j ...

  9. vue中引入百度统计

    vue作为单页面的,引入百度统计,需要注意不少. 一.基本的流量统计 在index.html 入口文件中引入百度统计生成的一连串代码: var _hmt = _hmt || []; (function ...

随机推荐

  1. Java springboot项目的jar发布方式

    做springboot的都知道,发布方式不是war发布了,是jar发布,启动jar就可以直接运行,并且环境都是集成的. 首先,先将项目打包成jar,这里假设你的eclipse已经安装了maven插件. ...

  2. Where-To-Put-The-Auto-Layout-Code(AutoLayout代码应该放在哪里?)

    Where-To-Put-The-Auto-Layout-Codehtml, body {overflow-x: initial !important;}html { font-size: 14px; ...

  3. Spirng MVC启动流程

    以Tomcat为例,想在Web容器中使用Spirng MVC,必须进行四项的配置: 修改web.xml,添加servlet定义.编写servletname-servlet.xml( servletna ...

  4. C语言 · 错误票据

    历届试题 错误票据   时间限制:1.0s   内存限制:256.0MB        锦囊1 排序. 锦囊2 把所有的编号排序,再扫描一遍数组,即可找到重复的和遗漏的.   问题描述 某涉密单位下发 ...

  5. layer.open如何关闭自身弹出窗口

    1. 弹出窗口中本身可以添加按钮事件如下: layer.open({ title: '打印' ,type: 2 ,content: [ctx + '/saleOrder/eorderEdit?orde ...

  6. IDEA快捷键笔记

    Keymap:Mac OS X idea快速清除无用的引用:command+alt+o 跳转: 不同窗口之间的跳转(Next project window): alt + command + ] Pr ...

  7. 红楼梦人物关系图,一代大师成绝响,下回分解待何人,kindle读书摘要

      人物关系图: https://www.cnblogs.com/images/cnblogs_com/elesos/1120632/o_2033091006.jpg 红楼梦 (古典名著普及文库) ( ...

  8. C/C++中near和far的区别

    C/C++中near和far的区别 关键字near和far受目标计算机体系结构的影响.目前编程中使用不多. near关键字创建一个指向可寻址内存低端部分的目标指针.这些指针占用内存的单一字节,并且他们 ...

  9. sparkR的一个运行的例子

    在sparkR在配置完成的基础上,本例采用Spark on yarn模式,介绍sparkR运行的一个例子. 在spark的安装目录下,/examples/src/main/r,有一个dataframe ...

  10. CSS遮罩层的实现

    偶然发现自己原来写了一个CSS遮罩层,虽然这个东西没什么技术含量,但如果本人离开公司后又遇见此类问题,那么可能又得花些时间来找资料了.所以决定还是把它记下来吧. 直接上代码吧. 第一步,html代码: ...