;

父created–>子created–>子mounted–>父mounted

vue中父子组件中生命周期函数顺序 24 天前
;

unpkg是一个快速的全球内容交付网络,适用于npm上的所有内容。 语法:unpkg.com/:package@:version/:file 例子: 使用固定版本: unpkg.com/react@16.7.0/umd/react.production.min.js unpkg.com/react-dom@16.7.0/umd/react-dom.production.min.js 使用version范围 unpkg.com/react@^16/umd/react.production.min.js 如果省略文件路径(即使用“裸”URL),则unpkg将提供unpkg字段指定的文件,或者回退到。 package.json main unpkg.com/jquery 在URL的末尾附加一个以查看包中所有文件的列表。 unpkg.com/lodash/

unpkg的cdn引用 2019年12月11日
;

this.$message.closeAll()

element关闭message 2019年11月24日
;

1.问题描述 默认情况,v-html中的class并不生效 2.原因 scoped属性导致css仅对当前组件生效(用css3的属性选择器+生成的随机属性实现的),而html绑定渲染出的内容可以理解为是子组件的内容,子组件不会被加上对应的属性,所以不会应用css.解决的话把scoped属性去掉就行了 2.解决方案 类名前添加>>> 参考链接:https://blog.csdn.net/weixin_42412046/article/details/80804285

vue中v-html使用样式 2019年11月22日
;

1.子元素中checkbox绑定的v-model属性如果在初始化时候没有值,会导致后面值无法选中,所以如果checkbox绑定的值为后期添加,就需要在list渲染之前进行添加

element checkbox 全选功能失效 2019年11月9日
;

1.问题描述 chrome和edge都正常,ie11中打开一片空白,控制台报错 2.处理步骤 安装babel-polyfill问题依旧 所有的函数写法fn(){}改为fn:function(){}问题依旧 main.js中挨个注释所有的第三方组件发现是一个库导致

vue2项目在ie11中显示空白 2019年11月8日
;

<el-date-picker v-model="due_date" type="date" size="small" value-format="yyyy-MM-dd" :picker-options="pickerOptions0" placeholder="pick date"> </el-date-picker> 1.今日以后 pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() – 8.64e7 } } 2.前一个月 pickerOptions0: { disabledDate(time) { const lastMonthTime = new Date().setMonth(new Date().getMonth() – 1) return time.getTime() > Date.now() || time < lastMonthTime } } 3.后一个月 pickerOptions0: { disabledDate(time) { const lastMonthTime…

element时间选择,今日以后,今日前后一个月 2019年11月6日
;

1.新建.htaccess <IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ – [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /demo/index.html [L] </IfModule> 注意最后一行demo替换为自己项目的子路径 2.将.htaccess文件放入项目所在的目录中 3.无需重启apache

vue路由history模式apache相关配置 2019年6月7日
;

1.问题描述 运行npm run unit报错 2.修改单元测试配置文件 路径: test/unit/jest.conf.js 移除: mapCoverage: true, 添加: "verbose": true, "testURL": "http://localhost/" 参考资源: aip:https://jestjs.io/docs/zh-Hans/using-matchers 配置参数:https://jestjs.io/docs/zh-Hans/configuration#collectcoverage-boolean 其它:https://www.jianshu.com/p/9786e3c66848

vue-cli单元测试报错 2019年6月1日
;

1.问题描述 404页面本身来源复杂,通过this.$router.go(-1)及this.$router.go(-2)或者history.back()都很难覆盖所有场景, 而且上面的方案很容易导致死循环-上一个页面出错跳到404,返回回去又继续跳到404。 2.问题根源 此时问题关键点,上一个路由到底是什么,此时就需要用到组件内的路由守卫 3.知识点 beforeRouteEnter中无法通过this获取到组件实例,但是可以在回调函数next中访问组件实例 4.相关代码 页面返回上一级按钮绑定back事件 data () { return { fromPathName: ” } }, beforeRouteEnter: (to, from, next) => { next(vm => { vm.fromPathName = from.name }) }, methods: { back: function () { if (this.fromPathName === ‘details’ || this.fromPathName === ‘video’) { this.$router.push({name: ‘library’}) } else { this.$router.push({name: this.fromPathNa…

vue中404页面获取页面来源 2019年3月13日
;

外层容器添加类名swiper-no-swiping

swiper禁止通过鼠标滑动 2019年3月4日
;

destroyed: function () { // code }

vue中在浏览器后退按钮后执行代码 2019年2月28日
;

mounted: function () { window.addEventListener(‘scroll’, () => { let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop if (scrollTop > 60) { // 1 } else { // 2 } }) }

vue中监听scroll事件 2019年2月26日
;

问题原因: name: ‘myFooter’, components: { myFooter } name部分和components部分重名导致,修改不同即可

vue报错:‘RangeError: Maximum call stack size exceeded’ 2019年2月26日
;

1.问题描述 直接修改数组某一项的值,数据变化后ui并不跟着变化 2.解决方案,要用到,数组更新检测 错误的代码 setOptionVal: function (index, val) { this.SubjectListData[index].optionIdStringResult = val } 正确的代码 setOptionVal: function (index, val) { let tempVal = this.SubjectListData[index] tempVal.optionIdStringResult = val this.$set(this.SubjectListData, index, tempVal) } 相关链接:https://cn.vuejs.org/v2/guide/list.html#%E6%95%B0%E7%BB%84%E6%9B%B4%E6%96%B0%E6%A3%80%E6%B5%8B

vue数据变化ui不刷新 2019年2月14日
;

1.相关文件 src/App.vue 2.相关代码 <template> <div id="app" class="loading"> <router-view/> </div> </template> mounted: function () { let ele = document.getElementById(‘app’) setTimeout(function () { ele.classList.remove(‘loading’) }, 1500) } #app{ height: 100%; } .loading:before{ content: ”; position: fixed; width: 100%; height: 100%; left:0; top:0; background:#fff url(/static/img/loading.gif) center center no-repeat; z-index: 99999999; }

vue首屏添加loading 2019年2月13日
;

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

vue-awesome-swiper轮播出现空白 2019年2月13日
;

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

vue中使用js-cookie 2019年1月26日
;

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 }) })

vue中使用videojs-hotkeys 2019年1月23日
;

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

vue分页组件 2019年1月16日
;

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

vue根据当前路由判断是否加载组件 2019年1月15日
;

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

vue中定义全局变量 2019年1月11日
;

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

vue中后退再进入videojs播放器无法初始化 2019年1月9日
;

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…

videojs关闭modal 2019年1月8日