;

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

videojs进度条始终为0 2019年1月7日
;

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…

vue中videojs异步加载src 2019年1月6日
;

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…

vue中多个radio遍历提交 2019年1月5日
;

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

v-for渲染报错“Error in render: “TypeError: Cannot read property” 2019年1月2日
;

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…

nuxt说明 2019年1月1日
;

1,检查是否开启了代理

接口调试注意事项 2018年12月29日
;

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

vue中设置background-image,以及class动态拼接 2018年12月26日
;

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…

vue-awesome-swiper初始设置display:none的元素失效 2018年12月25日
;

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

vue中checkbox取值 2018年12月24日
;

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

vue cli 报错‘Cannot GET /’ 2018年12月21日
;

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…

vue中video.js使用 2018年12月19日
;

1.webpack-bundle-analyzer 可视化显示打包后文件中个文件的大小 安装: npm install –save-dev webpack-bundle-analyzer 链接:https://www.npmjs.com/package/webpack-bundle-analyzer 2.vuex-persist https://www.npmjs.com/package/vuex-persist 3.Page Skeleton 相关文章:https://www.jianshu.com/p/6a4c0b281e7f

webpack常用插件 2018年12月17日
;

1.安装 npm install –save-dev prerender-spa-plugin 安装过程中,会下载puppeteer 2.配置build/webpack.prod.conf.js 基本 const path = require(‘path’) const PrerenderSPAPlugin = require(‘prerender-spa-plugin’) module.exports = { plugins: [ … new PrerenderSPAPlugin({ // Required – The path to the webpack-outputted app to prerender. staticDir: path.join(__dirname, ‘../dist’), // Required – Routes to render. routes: [ ‘/’, ‘/about’ ], }) ] } 高级 const PrerenderSPAPlugin = require(‘prerender-spa-plugin’) const Renderer = PrerenderSPAPlugin.PuppeteerRenderer module.exports = { plugins: [ … new P…

prerender-spa-plugin相关问题整理 2018年12月14日
;

路径:config/index.js build: { assetsPublicPath: ‘/’ 改为 assetsPublicPath: ‘./’ } 打包后文件如果放入子目录中,添加base属性 mode: ‘history’, base: ‘/test666/1212’,

webpack打包资源路径,以及history路由配置 2018年12月12日
;

1.文件index.html <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=自己去申请"></script> 2.bmap.vue <template> <div class="bmap"> <div id="bmap"></div> </div> </template> <script> export default { name: ‘index’, data () { return { message: ‘666’ } }, methods: {}, mounted () { var BMap = window.BMap var map = new BMap.Map(‘bmap’) // 创建Map实例 map.centerAndZoom(new BMap.Point(116.404, 39.915), 11) // 初始化地图,设置中心点坐标和地图级别 map.setCurrentCity(‘北京’) // 设置地图显示的城市 此项是必须设置的…

vue-cli引入百度地图 2018年8月2日
;

1.错误做法,添加进的所有数据会一模一样 <input v-model="newItem.question"/> data () { return { questionlist: [], newItem: { question: ”, items: [‘不愿意参加’, ‘配合参加’, ‘即使只要’] } } } methods: { add () { this.questionlist.push(this.newItem) } } 2.正确做法 <input v-model="newQuestion"/> data () { return { questionlist: [], newQuestion: ”, newItems: [‘不愿意参加’, ‘配合参加’, ‘即使只要’] } } add () { var obj = {} obj.question = this.newQuestion obj.items = this.newItems this.questionlist.push(obj) }

vue数组添加元素 2018年5月20日
;

1.问题描述 单纯使用localStorage存取参数,在页面跳转后有时候无法及时获取到参数 单纯使用route.params可以即时获取参数,但是页面刷新后,参数会丢失 2.结合两种方式的方案 父组件中传递参数 localStorage.setItem("userId", userId); this.$router.push({name:’detail’,params:{userId:userId}}); 子组件获取参数 let userId=localStorage.userId?localStorage.userId:this.$route.params.userId; 另一种方案:通过$router.query this.$router.push({name:’detail’,query:{userId:userId}}); 这样参数会出现在url中,观感欠佳 1.Params 由于动态路由也是传递params的,所以在 this.$router.push() 方法中 path不能和params一起使用,否则params将无效。需要用name来指定页面。 在路由配置文件中定义参数: path: ‘/patient/record_detail’, name: ‘record_detail’, component: r…

localStorage配合route.params实现参数的时效性及持久化 2018年3月27日
;

this.$ajax.get(url1) .then((res)=>{ this.$ajax.get(url2).then((res)=>{}); }) .then((res)=>{ this.$ajax.get(url3).then((res)=>{}); })

vue中ajax链式调用 2018年3月23日
;

没有有name属性,也没有checked <label><input type="radio" v-model="form.picked" value="已选中"/>已选中</label> <label><input type="radio" v-model="form.picked" value="未选中"/>未选中</label> data () { return { form: { picked: ‘未选中’ //和picked匹配的值会自动选中 } } 遇到的问题,以及解决 模板部分结构 <label><input type="radio" v-model="form.value1" value="是" />是</label> <label><input type="radio" v-model="form.value1" value="否" />否</label…

vue中input单选框radio 2018年3月20日
;

1.将bus注入到Vue根对象中 const bus = new Vue(); new Vue({ el: ‘#app’, router, template: ‘<App/>’, components: { App }, data:{ bus }  }); 2.组件A中触发事件 this.$root.bus.$emit(‘busevent’, 19); 3.组件B中监听事件 data () { return { valNow:” } }, mounted(){ let nowThis=this; this.$root.bus.$on(‘busevent’,function(val){ //此处this和当前this不同,所以在外部定义变量,以引用当前组件的this alert(val); nowThis.valNow=val; }) }

全局bus事件通信流程 2018年3月16日
;

1.父组件 <template> <div> <subcomponent :subdata="data"></subcomponent> </div> </template> <script> import subcomponent from ‘./subcomponent’ export default { name: ‘parentComponent’, components:{ ‘subcomponent’:subcomponent }, data (){ return{ data:” } } } </script> 2.子组件 <script> export default { name: ‘subcomponent’, props: [‘subData’], data (){ return{} }, watch:{ subdata:’showData’ }, methods:{ showData(){ alert(this.subdata); } } } </script> 其它:命名方式存疑

props引用流程及文件结构 2018年3月9日
;

场景:在父组件中表单提交数据,子组件中更新显示列表,子组件已经写完,再去添加prop略麻烦,尝试过location.reload()体验太差 模板部分 <recordDetail v-if="forceReload"></recordDetail> data部分 forceReload:true methods部分(表单验证成功后,先让组件消失,ajax返回成功后再让其显示) this.$validator.validateAll().then((msg)=>{ if(msg){ this.forceReload=false; //先强制组件消失 this.$ajax.get(‘/rest/admin/cases/create’) .then((res)=>{ this.forceReload=true; //强制组件再次渲染 }) .catch(function (error){}); }else{ this.$message({ message: ‘填写不完整!’, type: ‘warning’ }); } }); 改进方法 this.forceReload = false this.$nextTick(() => (this.forceReload = true))

父组件不借助prop,暴力刷新子组件 2018年3月8日
;

1.点击时候让当前元素的class判断条件为真 <ul> <li :class="{‘active’: index === selected }" v-for="(item, index) in list" @click="choose(index)"></li> </ul> new Vue({ el:’.top_bar’, data:{ selected: null }, methods:{ choose:function (index) { this.selected = index } } });

v-for对应项添加active类 2018年2月13日
;

<template> <el-table :data="tableData" stripe border style="width: 100%"> <el-table-column prop="checkUnit" label="医院名称"></el-table-column> <el-table-column prop="checkName" label="检查名称"></el-table-column> <el-table-column label="查看详情"> <template slot-scope="scope"> <el-button size="mini" @click="infoList_detial(scope.row.id)">查看详情</el-button> </template> </el-table-column> </el-table> </template…

element中table单元格点击事件获取id 2018年2月10日