风烟

sass代码开头增加这一行。使用sass报这个错误。

我的vue版本是2.5，但是我的vue-loader版本升级到了vue-loader：17.3.0。经查，原来是vue2不能工作在vue-loader17以上，需要降到。

一般原因就是因为视频的封面图和视频本身尺寸比例不一样，导致的。要保证poster和视频的尺寸是一样的

当query某个key只有一个的时候区的值就是一个字符串例如下面这个链接http://localhost:8080/xxx.html#/xxx?aaa=bbbthis.$route.query.aaa为bbb如果一个值重复多次http://localhost:8080/xxx.html#/xxx?aaa=bbb&aaa=bbbthis.$route.query.aaa为["bbb", "bbb"]...

<div class="left" :style="{'background-image': `url(${logoUrl})`}"></div>这样写代码的时候发现这个logoUrl死活就是渲染不出来，排查问题思路检查云端返回数据接口是否有这个字段，发现是有的然后替换了一下别的图片URL是可以的，结论是这个URL有问题经仔细查看，URL中有空格，导致渲染不出来，但是直接访问这个URL，浏览器会进行转译在这个URL所以才可以显示解决方案图片URL中不能有空格等特殊

遇到的问题因为png无法修改颜色，所以使用svg形式，然后因为webpack有对svg进行编译转化，导致成为base64，无法使用v-html解决方案想到的一个解决办法是把svg的webpack去掉{ test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name

找到错误原因代码router.beforeResolve((to, from, next) => { const matched = router.getMatchedComponents(to); const prevMatched = router.getMatchedComponents(from); // 我们只关心非预渲染的组件 // 所以我们对比它们，找出两个匹配列表的差异组件 let diffed = false; // return next(

安卓5版本手机上的H5网页无法滚动。原来是我在vue生命周期mounted的时候执行了以下代码document.body.addEventListener('touchmove', e => { e.preventDefault();});执行这段代码导致的滚动失效，当时为什么这么写呢，有些忘了，以后这块代码想起来之后，要加上注释。安卓滚动问题一般需要先想到touch的问题。一点一点排查。定位原因。...

在使用vue-awesome-swiper按照官方文档npm install swiper vue-awesome-swiper --save这么写，本地mac跑没问题，但是到了编译机就有问题，报错Can't resolve 'swiper/dist/css/swiper.css'去去swiper文件夹看文件是这么个路径，所以是不一样的。引的时候需要加没有dist，原来是另一个项目...

报错信息vue.esm.js?efeb:571 [Vue warn]: Property or method “subItem” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or f...

使用vue版的swiper组件vue-awesome-swiper，这个是最好用的，并且api和swiper基本一致。使用的时候需要拿到滑动之后当前的index。要获取activeIndex这个值。错误写法官方文档这么写有问题，我在全局引入的时候这样根本拿不到。正确写法this.$refs.mySwiper.swiper这样写才可以。然后监听@slideChange="slid...

在使用mintui这个组件的时候，下拉加载更多的时候，一开始滚动会触发系统默认滚动动画，只有等系统默认动画结束之后，再下来才会触发下拉加载动画。不能直接下拉拉到头直接就触发下拉加载动画禁止系统默认弹皮筋效果 document.body.addEventListener('touchmove', function (e) { e.preventDefault(); //阻止默认的处理...

This dependency was not found:* swiper/dist/css/swiper.css in本地拉取远程master代码，然后执行报这个错误，经查是本地vue-awesome-swiper版本不对，因为之前安装过，导致报错，应该是版本不一致导致然后删除node_modules模块重新安装也不行，经发现是自己的package-lock.json文件没有删除，导...

bug描述input单选框在iphone6手机系统ios10选择bug。手机在选择的时候竟然可以同时选择多个。代码如下<label class="label" v-for="(item, index) in values" :key="index"> <input class="input-radio" :value="item.sex" ...

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：<!-- 在双花括号中 -->{{ message | capitalize }}<!-- 在 `v-bind` 中 -->&l...

slots设置中defaultIndex就可以了slots绑定到 slots 属性的数组由对象组成，每个对象都对应一个 slot，它们有如下键名key 描述divider 对应 slot 是否为分隔符content 分隔符 slot 的显示文本values 对应 slot 的备选值数组。若为对象数组，则需在 mt-picker 标签上设置 value-key 属性来指定显示的字段名...

问题原因是安装新版的sass-loader版本过高。报错原来版本 "webpack": "^3.6.0","node-sass": "^4.13.1", "sass-loader": "^8.0.2",重新安装sass-loader版本"sass-loader": "6.0.6"这样就修复了...

axios.interceptors.response.use( response => { // 对响应数据做点什么 return response; }, error => { // 对响应错误做点什么 if (err.response.status === 401) { } ...

使用vuex，也适用了splice来改数据，修改了评论的数据，但是视图没有更新。state.tabContainer.splice(index, 1, { info: info });查看dom元素里面数据明明更新了，但是网页没有更新，解决办法在vue中我子组件watch父组件一个值，然后数据更新的时候修改这个值，设置元素宽度强制重排， this.$refs.infoC...

在使用vue动画的时候需要循环展示某个信息，我们使用@keyframes show-in { 0% { opacity: 0; transform: scale(.5) translateY(0); } 20% { opacity: 1; transform: scale(1) translateY(0);...

一般说到vue的数据绑定就是说通过Object.defineProperty方法拦截属性，把data里面每个数据的读写改为getter和setter方法，当数据更新时通知视图更新。mvvm数据双向绑定即输入框当数据发生变化的时候，data数据同步变化，即view => Data的变化Data中的数据变化时，文本节点内容同步变化，即data => view的变化要通过四个步骤...

目录结构benchmarks性能测试文件dist 构建输出后不同版本的vue文件examples vue构建的一些demoflow 静态类型检查的声明文件packages 独立的vue相关的npm包scripts 构建相关文件和配置src 源码compiler 模版编译代码core 核心代码components 内置组件代码global-api 全局api代码ins...

主要就是讨论虚拟dom的更新效率。大致原理就是比较两个节点的虚拟dom，然后差量更新。在源码中其实就是调用patch函数的过程。比对的虚拟dom其实就是我们之前说的paser函数解析出来的var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ]};接着就是一层一层的比较d...

vue源码中parse就是把template解析为ast的过程。ASTAbstract Syntax Tree（抽象语法树的意思）比如<div>test</div>写为抽象语法树{ tag:'div', type :1 , children:[ { type:3, text:'test...

思路在开发环境中使用webpack监控文件变化实时进行内存编译，然后从内存中取出编译出来的资源进行渲染第一次先进行编译，读取渲染。然后后面就监听变化，监听到变化之后通知重新渲染，如何通知呢现在的问题是实时编译了，但是只有等编译完成才去重新渲染，这就需要自动通知浏览器刷新，...

问题在一开始做实时滚动条顶部滚动对时候然后使用,在tabContainerDom滚动到距离顶部一段距离的时候显示headerFixed<div ref="headerFixed" class="header-fixed" :class="{'show': showFixedBlock}"></div>.header-fixed { opacity: 0;...

vue中export const stopBodyScroll = value => { let body = document.body; if (value) { body.style.position = 'fixed'; body.style.width = '100%'; body.style.height = '1...

我们在工作中有这样一种场景，就是我们多个页面其实长的一样，但是后端接口不一样，返回的数据接口不一样，导致我们需要写多个模版，我们追求一种可复用的方式，简单思考一下有几个解决方案方案一复用css。我们将css写到一个专门的模块中，然后不同的模版就还是不同的版本写，然后复制粘贴，保证都是一样的class。然后我们只需要改里面获取的数据字段值优点这样的好处是非常简单，而且对于后面的数据接口变化我...

查了网上的解决办法，有两种第一种：fastclick引起的焦点聚焦冲突第二种：设置user-select: auto但是使用这两种方法发现都不起作用，最后想到，既然和fastclick事件冲突了，但是click事件他肯定会触发，所以就直接在click事件里面直接强制focus就可以了。focus(e) { e.target.focus();}...

发现是自己引入的node_modules js库，没有进行es6到es5的转换，导致低端机型不支持，{ test: /\.js$/, loader: 'babel-loader', include: [resolve('src'), resolve('test')], options: { ...

经过dom层层注释缩小反馈终于找到问题所在。问题经过我在弹起弹窗的时候，设置了popupVisible为true然后触发了vue的updated生命周期钩子函数然后我在这个函数里面做了去this.$refs.container.offsetHeight导致页面重绘然后就导致了底部页面向上滚动解决办法去掉updated函数里面的重绘方法...

两种解决办法在对象设置的时候设置增加新字段，通过新复制对象来设置state.obj = Object.assign({},state.count)使用vue的set进行设置新字段Vue.set(state.count, 'count', 0);...

解决办法在蒙层弹起的时候将body设置为fixed定位在蒙层消失的时候将body恢复原位popupVisible(newValue) { if (newValue) { document.body.style.position = 'fixed'; document.body.style.width = '100%'; document....

移动端显示输入框框直接focus不会弹出软键盘解决思路我们让点击的时候可以通过点击label关联input，这个input(input1)不要通过display：none， 隐藏，我们要通过display: block;position: absolute;z-index: -1;left: -1000px;top: 0px;隐藏，这样其实我们点的时候就是点击输入框，然后键...