1.问题描述 轮播处于子组件中，数据通过props从父组件异步获取，父组件中用了async函数 2.问题所在及解决方案 后来发现是因为，data部分list数组中写入了静态的数据，删除后空白轮播消失，但是loop无效 父组件中引用子组件的地方的加入判断v-if="swiperBannerData.length>0"，问题消失

player.on( ‘durationchange’, function( e ) { window.console.log( ‘videoJS: durationchange’ ); }); player.on( ‘ended’, function( e ) { window.console.log( ‘videoJS: ended’ ); }); player.on( ‘error’, function( e ) { window.console.log( ‘videoJS: error’ ); }); player.on( ‘firstplay’, function( e ) { window.console.log( ‘videoJS: firstplay’ ); }); player.on( ‘loadedalldata’, function( e ) { window.console.log( ‘videoJS: loadedalldata’ ); }); player.on( ‘loadeddata’, function( e ) { window.console.log( ‘videoJS: loadeddata’ ); }); player.on( ‘loadedmetadata’, function( e ) { win…

1.安装 npm i js-cookie 相关链接:https://www.npmjs.com/package/js-cookie

目录 声明：词条人人可编辑，创建、修改和认证均免费 详情 沉默的螺旋 新闻传播学概念 本词条是多义词，共2个义项 展开 沉默的螺旋（The Spiral Of Silence）是一个政治学和大众传播理论。理论基本描述了这样一个现象：人们在表达自己想法和观点的时候，如果看到自己赞同的观点受到广泛欢迎，就会积极参与进来，这类观点就会越发大胆地发表和扩散；而发觉某一观点无人或很少有人理会（有时会有群起而攻之的遭遇），即使自己赞同它，也会保持沉默。意见一方的沉默造成另一方意见的增势，如此循环往复，便形成一方的声音越来越强大，另一方越来越沉默下去的螺旋发展过程。理论是基于这样一个假设：大多数个人会力图避免由于单独持有某些态度和信念而产生的孤立。

1.安装 npm install videojs-hotkeys 2.main.js中引入 import videojshotkeys from ‘videojs-hotkeys’ Vue.use(videojshotkeys) 3.videojs中使用 let player = videojs(‘#my-player’, { autoplay: true, preload: ‘auto’, // aspectRatio: ’16:9′, playbackRates: [1, 1.25, 1.5, 1.75, 2], controlBar: { volumePanel: { inline: false }, fullscreenToggle: true, customControlSpacer: false } }, function () { this.addClass(‘test666’) this.hotkeys({ volumeStep: 0.1, seekStep: 5, enableModifiersForNumbers: false }) })

1.安装 npm install vuejs-paginate –save 2.main.js中引入 import Paginate from ‘vuejs-paginate’ Vue.component(‘paginate’, Paginate) 3.模板文件中使用 <paginate :page-count="20" :click-handler="clickCallback" :prev-text="’Prev’" :next-text="’Next’" :container-class="’className’"> </paginate> methods: { clickCallback (page) => { console.log(page) } } 相关链接：https://github.com/lokyoung/vuejs-paginate

<answer v-if="$route.path==’/video’"></answer>

1.变量保存在js文件中 hostUrl.js var user = ‘http://user.abc.com’ var api = ‘http://api.abc.com’ export default { user, api } 2.main.js中引入并挂载 import hostUrl from ‘./utils/hostUrl’ Vue.prototype.hostUrl = hostUrl 3.页面中使用 this.hostUrl.user

1，问题原因 单页应用中，只有一个播放器实例，再次进入页面并修改配置，并不能生效 2.解决思路 页面退出时候，对播放器实例进行销毁 3.相关代码 beforeDestroy () { this.player.dispose() } 相关文章： 原因说明：https://github.com/videojs/video.js/issues/4865 相关处理：https://github.com/videojs/video.js/issues/4167#issuecomment-344731747 https://github.com/videojs/video.js/blob/master/docs/guides/react.md

1.问题描述 let modalStr = ` <div class="nextSectionClose"> <img class="pointer" id="modalSectionClose" title="关闭" src="/static/img/icon_close.png"> </div> <div class="row1" id="sectionDone">当前小节已学完</div> <div class="row1 hide" id="courseDone">恭喜你已学完本课程</div> <div class="row2"> <span id="buttonPractice">做练习</span> <span id="buttonNextChapter">继续学习下一节</span> <span class="hide" i…

1.问题描述 详情页之间跳转，路由不变，只变参数，地址栏可以看到url变了，但是页面数据无变化 2.处理思路 监听路由对象，数据请求的参数从url中实时获取 3.相关代码 watch: { ‘$route’ () { this.getData() } } getData: function () { ajax(‘/api’, { id: this.$route.query.id }, res = { console.log(res) }) } 注意此处id写法

1，问题描述 视频通过js初始化，视频正常播放时候进度始终不动， 同时，控制台报错"No compatible source was found for this media" 2，解决方法 直接删除模板部分的<source></source>标签

1.问题描述 video标签中写入固定视频地址可以正常播放，但是更换为ajax返回的值后，无法播放，审查元素发现，src中的视频是正确的 2.问题原因 仅仅更换src并不能正确切换video的视频地址，需要借助videojs api 3.处理思路 视频的初始化必须等到ajax数据返回以后，作为参数传入，此处用到async/await 3.具体代码 import ‘video.js/dist/video-js.min.css’ import videojs from ‘video.js’ init: function (src) { let player = videojs(‘#my-player’, { autoplay: false, preload: ‘auto’, aspectRatio: ’16:9′, playbackRates: [1, 1.25, 1.5, 1.75, 2, 10], controlBar: { volumePanel: { inline: false }, fullscreenToggle: true, customControlSpacer: false } }, function () { this.addClass(‘test666’) }) } let source = { src: src } pla…

1.问题描述 后台返回数据结构 [ { id:1, question:’吃饭没？’, options:[ { id:101, answer:’吃了’ }, { id:102, answer:’没吃’ } ] }, { id:2, question:’多大了？’, options:[ { id:201, answer:’100岁’ }, { id:202, answer:’200岁’ } ] } ] 提交时候的数据结构 [ {"questionId":1,"optionId":101}, {"questionId":2,"optionId":201} ] 2.遇到的问题 提交数据要和返回数据结构一致，但是出现了新的字段，options如何实时绑定上去 3.处理思路 后台数据返回后，注入新的的属性optionsCheck用来通过v-mode绑定所选值，提交时候再对整个数据进行遍历，筛选出所需值保存在临时对象中，再push进最终的提交数据中 4.处理过程 属性注入 let list = res.data.list for (let i = 0; i < list.length; i++) { list[i].optionsCheck = ” } 模板部分绑定ra…

const div = document.createElement(‘div’) div.innerHTML = res.html document.body.appendChild(div) document.forms.alipaysubmit.submit()

问题描述：数据通过后台请求获得，通过v-for渲染 解决办法：v-for外层写上v-if判断 <ul v-if="data"> <li v-for="item in data.dataList"></li> </ul> 注意：v-if部分为list的上一级数据节点

1.安装 npx create-nuxt-app <项目名> 2.运行 cd nuxt npm run dev 3.打包/启动 cd nuxt npm run build npm start 资源路径： vue:/static/img/facebook.png nuxt:/img/facebook.png 全局css: nuxt.config.js store修改: vue const store = new Vuex.Store({ state, getters, mutations, actions }) export default store 改为 const createStore = () => { return new Vuex.Store({ state, getters, mutations, actions }) } export default createStore VeeValidate 安装nuxt-validate：https://www.npmjs.com/package/nuxt-validate js-cookie 安装：cookie-universal-nuxt https://www.npmjs.com/package/cookie-universal-nuxt vue-awesome…

1，检查是否开启了代理

background-image设置 :style="{backgroundImage: ‘url(‘ + item.coverPic + ‘)’}" <div class="cardLeft" :style="{‘background-color’:item.color}"></div> class动态拼接 需要的效果class="status status1" :class="’star star’+Math.round(item.courseScore)" class条件判断 :class="{active:page==item}" 多个class的条件判断 :class="{active:page==item,done:status==0}"

1.问题描述 通过tab切换两个swiper,初始隐藏的一个无法正常滑动 dom结构 <ul> <li>menuOne</li> <li>menuTwo</li> </ul> <div> <div class="item"> <swiper></swiper> </div> <div class="item" style="display:none;"> <swiper></swiper> </div> </div> 2.解决方案 配置中添加 observer: true, observerParents: true dom结构修改，删除外层div <ul> <li>menuOne</li> <li>menuTwo</li> </ul> <div> <swiper class="item"></swiper> <swiper class="item&qu…

理论上，checkbox的值应该是boolean类型，true-value和false-value的意思是，用指定值替换选中使本来应该的true，反之亦然。 <input type="checkbox" name="" v-model="expSevenDayStatus" :true-value=’1′ :false-value="0">

食物的三大营养是碳水化合物、脂肪、蛋白质，减脂增肌的饮食原则是高蛋白低碳水低脂肪。看下面这组数据就明白为什么要高蛋白低碳水低脂肪了吧？ 1g蛋白质=4kcal 1g脂肪=9kcal 1g碳水化合物=4kcal 今天先来说说碳水化合物怎么选？ 在大多数人的印象里中，糖也许是一种有甜味的零食或调味品，但如果你开始健身或者关注营养学，有人告诉你米面、土豆地瓜也是糖，可不要太惊讶，因为本质上他们都是一种东西——碳水化合物！ 在每天要进口的食物中，碳水化合物应该算作「大宗货物」，大部分人60%的热量摄入都源于此，这也是减脂和增肌食谱的主要区别之处。当碳水化合物消化后转为糖，供给能量，多余的就会储存在体内转化为糖原和脂肪。碳水到底该吃什么，怎么吃，就成为一个至关重要的问题。 一、碳水化合物和糖到底是什么关系？ 碳水、蛋白质和脂肪是人类最主要的能量来源，作为三大巨量营养素之一，每克碳水 在营养学中，碳水化合物消化后会变成糖，糖可以分为： 1. 单糖（ 1 个单糖）：葡萄糖、果糖、半乳糖 2. 双糖（ 2 个单糖）：蔗糖（果糖+葡萄糖）、乳糖（半乳糖+葡萄糖）、麦芽糖（葡萄糖+葡萄糖） 3. 寡糖（ 2-9 个单糖）：麦芽寡糖、过寡糖、甘露寡糖、壳寡糖等 4. 多糖（10 或10 个以上的单糖）：淀粉、糖原、纤维素等 我们常说的五谷杂粮，蔬菜水果都含有不同量…

路径：config/index.js assetsPublicPath: ‘./’ 修改为 assetsPublicPath: ‘/’

1.安装 npm install video.js –save 2.相关报错处理 Parsing error: x-invalid-end-tag .eslintrc.js文件 rules: { … ‘vue/no-parsing-error’: [2, { ‘x-invalid-end-tag’: false }] } https://github.com/videojs/video.js https://github.com/videojs/http-streaming https://docs.videojs.com/ https://github.com/videojs/video.js/issues/3473 https://docs.videojs.com/controlbar 配置说明：https://docs.videojs.com/tutorial-options.html 组件配置：https://docs.videojs.com/tutorial-components.html 自定义组件：https://docs.videojs.com/tutorial-components.html icon font:https://github.com/videojs/font https://github.com/vid…