songduo112的博客

目前项目中需要使用videojs来播放视频流。代码如下：<video-player ref="videoPlayers" class="vjs-custom-skin videoPlayer" :playsinline="true" :options="videoPlayer" customEventName="customstatechangedeventname"></video-player>import { getVideoPatrolList } fro

mock解决的问题开发时，后端还没完成数据输出，前端只好写静态模拟数据。数据太长了，将数据写在js文件里，完成后挨个改url。某些逻辑复杂的代码，加入或去除模拟数据时得小心翼翼。想要尽可能还原真实的数据，要么编写更多代码，要么手动修改模拟数据。特殊的格式，例如IP,随机数，图片，地址，需要去收集mock优点前后端分离让前端工程师独立于后端进行开发。增加测试的真实性通过随机数据，模拟各种场景。开发五侵入不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。用法简单符合直觉的接口

vue跳转不同页面的多种方法目录router-link跳转编程式跳转router.js：import Foo from '@/components/foo'const routes = [ { path: '/Foo', component: Foo }]const router = new VueRouter({ routes // (缩写) 相当于 routes: routes})const app = new Vue({ router}).$mount('#app')

默认情况下 Vue.js 是不支持 Sass、SCSS 的，如果想要使用它们，只需要一些简单的安装配置即可。1.安装依赖包（1）进入项目文件夹，执行如下两个命令安装相关的依赖包。npm install --save-dev sass-loadernpm install --save-dev node-sass（2）接着编辑 build 文件夹下的 webpack.base.conf.js 文件，在 rules 里面添加如下配置：{ test: /\.sass$/, loaders: [

vue1.*版本中：标签中加上el=‘dom’，然后在代码中this.$els.dom这样就拿到了页面元素。<div class="box" v-el:myBox>你好</divthis.$els.my-box.style.color = 'red';vue2.*版本中：在标签中加上ref=‘dom’，然后在代码中this.$refs.dom这样就拿到了页面元素。<div class="box" ref="myBox">你好</divthis.$ref

在vue项目中,难免会有列表页面或者搜索结果列表页面,点击某个结果之后,返回回来时,如果不对结果页面进行缓存,那么返回列表页面的时候会回到初始状态,但是我们想要的结果是返回时这个页面还是之前搜索的结果列表,这时候就需要用到vue的keep-alive技术了。keep-alive 简介keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。用法也很简单：<keep-alive> <component> <!-- 该组件将被

一.登录拦截用户登录成功后服务端返回token的值，然后前端使用axios中请求拦截器（service.interceptors.request.use）再每个的请求接口上加上Authorization:token的值，服务端通过这个Authorization来获取token的值，来进行判断token的值是否过期，如果过期则接口返回403,前端得到403的状态，则提示用户返回登录页。1.request.jsimport axios from 'axios';import { Message, Mes

可以使用 v-cloak 指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。当网络较慢，网页还在加载Vu e.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码。我们可以使用 v-cloak 指令来解决这一问题。html:<div id="app" v-cloak> {{context}}</div>css：[v-cloak]{ display: none}我们可以使用 v-cloak 指令来解决屏幕闪动的问题，在

vue获取元素的高度主要是利用vue的ref属性<template> <div ref="picWrapper"></div></template>获取高度值：const height = this.$refs.picWrapper.offsetHeight;获取元素样式值：const height = window.getComputedStyle(this.$refs.picWrapper).height;获取元素内联样式值：con

module.exports = { root: true, parserOptions: { parser: 'babel-eslint' }, env: { browser: true, }, extends: [ 'plugin:vue/essential', 'standard' ], // required to lint *.vue files plugins: [ 'vue' ], rules: {

vue-cli构建的vue项目引入stylus文件安装stylus、stylus-loadery依赖npm install stylus stylus-loaderpackage.json文件配置上述命令并不会帮我们安装到配置文件，需要我们自己配置下，如下，添加上这两项配置"devDependencies": { ... "stylus": "^0.54.5", "stylus-loader": "^3.0.2", ... },别名配置配置别名