一、DNS解析 登录域名提供商后台，添加二级域名的一条A记录 二、apache配置 路径：/etc/apache2/sites-available/willless.com.conf <VirtualHost *:80> ServerName willless.com ServerAlias blog.willless.com ServerAdmin webmaster@localhost DocumentRoot /var/www/willless/blog ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost> 多个二级域名，追加以上代码即可 如果willless.com.conf文件为初次创建，文件创建修改好后需要执行命令sudo a2ensite willless.com.conf以启用此配置 三、重启apache sudo service apache2 restart

dom2事件优点 1.It allows adding more than a single handler for an event. This is particularly useful for DHTML libraries or Mozilla extensions that need to work well even if other libraries/extensions are used. 一个事件可以注册多个监听器 2.It gives you finer-grained control of the phase when the listener gets activated (capturing vs. bubbling) 更精细的手段控制事件监听器的触发阶段 3.It works on any DOM element, not just HTML elements. 对任何dom元素有效不仅仅是html元素 0级DOM分为2个： 一是在标签内写onclick事件 <input id="myButton" type="button" value="Press Me" onclick="alert(‘thanks’);" > 二…

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…

关键点：饼图传入两份数据，一份设置label在外显示，一份在内显示，设置不同信息，位置叠加 /*饼图：项目状态*/ var myChart = echarts.init(document.getElementById(‘echarts-pie’)); // 指定图表的配置项和数据 var option = { title : { text: ‘项目状态’, x:’center’ }, color:[‘#477dea’, ‘#9a9a9a’,’#f2b644′], tooltip : { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" }, normal:{ show: true, position: ‘inside’, formatter: ‘{d}%’ }, legend: { orient: ‘vertical’, left: ‘left’, data: [‘已签单’,’实施中’,’已完成’] }, series : [ { name: ”, type: ‘pie’, radius: ‘55%’, center: [‘50%’, ‘50%’], data:[ {value:335, name:’已签单’}, {value:310, name:…

stack相同的数据会在Y轴叠加。 如果是相同的值，则会叠加在一起。取不同的值，Y轴的数据就不会叠加在一起； 或者删除掉，默认为不叠加。

title: { text: ‘天气情况统计’, //标题 subtext: ‘虚构数据’, //副标题 left: ‘center’ //标题位置 }, tooltip: { trigger: ‘item’, formatter: "{a} <br/>{b} : {c} ({d}%)" //鼠标移上去显示的内容 }, normal: { show: true, position: ‘inside’, //图形里显示（比如在饼图块上显示百分比） formatter: ‘{d}%’ //显示的内容 }, textStyle: { fontWeight: ‘normal’, //显示字体粗细等 fontSize: 10 }, legend: { //图例 // top: ‘middle’, // bottom: 10, // left: ‘center’, icon: "circle", //圆点形图例（默认是官网上的圆角矩形） itemWidth: 10, //这几个是图例宽高位置等的设置 itemHeight: 10, itemGap: 20, left: 100, top: 110, bottom: 20, textStyle: { // fontSize: 5 color: "…

1.问题描述 父元素设置display:flex,此时两个子元素无论如何设置都会放置在一行中

1.原因分析 因为容器在初始化时被设置成display:none; 2.解决方案 元素隐藏通过设置opacity: 0来实现

1，父容器需要设置高度才能生效。

画布的大小是根据background属性所传的图片尺寸决定的

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

destroyed: function () { // code }

1.原因 每次调用都会产生不同的ID，单次调用clearInterval并不能全部清除 2.解决方案 每次调用setInterval后，将ID存入一个数组，然后需要清除时候，遍历数组进行清除 3.相关代码 let id= setInterval(() => {}, 1000) this.idList.push(id) for (let i = 0; i < this.idList.length; i++) { clearInterval(this.timerId[i]) }

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

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

问题原因： img标签为行内元素(inline)，默认对其方式为vertical-align: baseline(基线对齐) 四种解决方法： 1.将img设置为block,这样就不再受行内基线的影响。 2.设置img的竖直对齐方式v-align:bottom。 3.设置父div的font-size,需要一个较大的值，原理未知。 4.设置外层的div的line-height:0,这样基线下方的位置基本可以忽略。

@-moz-document url-prefix(){ body{color:red;} } supports：https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

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) } 3.方案总结，可采取下面三种解决方案： Vue.set() Object.assign() $forceUpdated() Vue.set() this.$set(this.item,’newProperty’,’新值’) Object.assign() 直接使用Object.assign()添加到对象的新属性不会触发更新 比如这样 Object.assign(this.item,{newProperty:’新值’}) 应创建一个新的对象，合并原对象和混入对象的属性 this.item = Object.as…

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

1.实现原理 外层添加容器，设置overflow: hidden; 内部容器，设置overflow-y: scroll; 对内部容器进行偏移，使得滚动条刚好被上层容器遮挡 2.相关代码 <div class="outer"> <div class="inner"></div> </div> .outer{height: 75px;overflow:hidden;} .inner{height: 100%;padding-right: 25px;position: relative;left: 21px;overflow-y: scroll;}

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