;

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

vue中路由参数变化,数据不刷新的问题的处理 2019年1月7日
;

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日
;

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

支付宝返回数据处理 2019年1月2日
;

问题描述:数据通过后台请求获得,通过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日
;

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

碳水的GI值怎么看?减肥如何做到高蛋白、低碳水? 2018年12月22日
;

路径: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日
;

dolly zoom 如果你喜欢看悬疑恐怖片,或许你看过这种让人毛骨悚然这种镜头——画面中间人物大小位置不变,而身后的背景却缓缓放大或缩小,就像空间扭曲了一样。 电影《迷魂记/Vertigo》 这种镜头就叫做滑动变焦(Dolly Zoom)。 1958年,导演希区柯克第一次把这个技巧用在电影《迷魂记/Vertigo》中,表现恐高的男主角站在高处向下看时候的眩晕反应。后来这种技法用在许多电影中,这用于渲染某种紧张的情绪,或者强调画面中的人物所处的环境。所以…… “拍摄原理很复杂吗?” “不,手机也可以拍!” 一边调整摄影机内的变焦镜头产生变焦效果,一边推动摄影机前后移动,就能拍出滑动变焦的镜头。 要实现这种效果,理论上讲只要设备能够变焦都能做到,包括手机。以下含多张动图及教程讲解……看完你也可以拿起手机拍起来! 手机教程 灵眸妹手持手机拍摄 iPhone 8 Plus 拍摄效果 通过上图我们发现,手持手机虽然可以拍出滑动变焦,但出来效果似乎不够“滑”,主要难题在于:(1)手不够稳导致画面抖动 ( 2)屏幕变焦按钮不好操控 “如何拍出更顺畅的滑动变焦?” 是时候拿出这个神器 灵眸手机云台2 灵眸教程 (1)选一个有特色或有纵深感的景; 让拍摄对象和摄影师之间有一定间距; (2)将手机安装到灵眸手机云台2上,连接DJI GO App,相机设置调至视…

移动变焦 2018年10月18日
;

创建一个具有指定原型且可选择性地包含指定属性的对象。 Object.create(prototype, descriptors)

javascript中的继承 2018年10月17日
;

一、原型 ①所有引用类型都有一个__proto__(隐式原型)属性,属性值是一个普通的对象 ②所有函数都有一个prototype(原型)属性,属性值是一个普通的对象 ③所有引用类型的__proto__属性指向它构造函数的prototype var a = [1,2,3]; a.__proto__ === Array.prototype; // true 二、原型链 当访问一个对象的某个属性时,会先在这个对象本身属性上查找,如果没有找到,则会去它的__proto__隐式原型上查找,即它的构造函数的prototype,如果还没有找到就会再在构造函数的prototype的__proto__中查找,这样一层一层向上查找就会形成一个链式结构,我们称为原型链。 举例,有以下代码 function Parent(month){ this.month = month; } var child = new Parent(‘Ann’); console.log(child.month); // Ann console.log(child.father); // undefined 在child中查找某个属性时,会执行下面步骤: 访问链路为: ①一直往上层查找,直到到null还没有找到,则返回undefined ②Object.prototype.__proto_…

什么是原型和原型链? 2018年10月16日
;

premiere亮度键抠图 对应英文菜单:luma key https://www.jb51.net/softjc/616766.html premiere怎样让视频画面逐渐放大 https://jingyan.baidu.com/article/0a52e3f4eb915fbf62ed72f7.html premiere中时间重映射怎么用? https://jingyan.baidu.com/article/48b558e3fe4b997f38c09ae1.html Pr让视频画面跟音乐节奏鼓点走 https://jingyan.baidu.com/article/09ea3ede4dea20c0aede390e.html https://m.bilibili.com/video/av29486147.html 跳轴 rgb分离

premiere教程 2018年10月12日
;

安装 步骤一:新建目录puppeteerProject 步骤二:初始化项目npm init 步骤三:npm i puppeteer (此处需要下载Chromium,如果下载失败更换为cnpm) 中途会下载Chromium,大小300M 保存路径\node_modules\puppeteer\.local-chromium\win64-588429\chrome-win32 配置相关 const browser = await puppeteer.launch({ headless: false, // default is true 打开运行界面 executablePath: ‘C:/Users/Administrator/AppData/Local/Google/Chrome/Application/chrome.exe’ // 在正式的chrome浏览器中运行代码 slowMo: 250 // slow down by 250ms }); 防止被反爬虫识别 puppeteer特征属性 navigator.userAgent配置中如果headless未设置或者为true,此时userAgent中会包含headlessChrome navigator.webdriver正常浏览器中并没有这个属性,puppeteer被特别添加,可以用如下代码…

puppeteer介绍 2018年9月28日
;

通过在有限的土地上投入大量的劳动力来获得总产量增长的方式,即边际效益递减的方式,称为没有发展的增长即“内卷化”。 模拟经营类游戏的最大问题根本就不在于道德困境,而在于内卷化困境。不断升级的建筑、越来越细分的科技树,就如同现实中越来越复杂的社会结构和组织形态,带来的却是没有实际发展的不断增长,最终还是陷在“人口—食物—住房”的死循环里打转。清代以来,山东“内卷化”导致的“闯关东”和游戏制作方推出新地图、新DLC并无二致。 什么是真实?这其实挺重要。 游戏是虚拟的,但好的游戏又无一不是真实的。我们玩游戏,是想体验虚拟世界,但实际上,我们是想体验真实。 更重要的是,我们的情感和道德是“真实”的。

内卷化 2018年9月15日
;

<meta name="theme-color" content="#42b983" /> 参考链接:http://www.webhek.com/post/how-to-change-the-color-of-header-bar-and-address-bar-use-theme-color.html

theme-color设置浏览器地址颜色 2018年9月9日