随笔分类 - Vue.js
摘要：对于Vue的双向绑定，现在基本是个前端都听说过，面试官也喜欢问这个问题。但对于Vue双向绑定的原理，掘金、博客园和segmentfault等技术社区充斥着大量的错误文章。这些文章的题目基本样子如下 “面试题：如何实现Vue的双向绑定”或“Vue源码解读：Vue双向绑定原理”，文章里写的Vue 2.0
阅读全文
摘要：在对Vuex进行模块化开发的时候， const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) 我们可以通过store.state.a取得 moduleA 的状态，在store注入到vue实例的时候，子组件可以通过thi
阅读全文
摘要：之前写过一篇文章 ES6与React中this完全解惑 其实Vue也是相同的道理。在Vue的官方文档中提到： 不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMet
阅读全文
摘要：Vue的v-for不绑定key，默认行为和绑定key="index"是差不多的，官方没有默认这种行为的情况下，会导致所有列表DOM重新渲染。key="index"这种行为无法最大化性能，比如在第一个元素插入新元素，会导致所有列表DOM重新渲染。绑定key后，发现绑定的key值的元素变化了，就重新渲染
阅读全文
摘要：下面的代码证明不通过mutation，而直接修改state修改确实生效了。这样子多人协作岂不是很容易出问题。对于这个问题，在创建 store 的时候传入 strict: true, 开启严格模式，那么任何修改state的操作，只要不经过mutation的函数，vue就会 throw error。 参
阅读全文
摘要：Vue根组件已有挂载DOM'#app'，在render又引进一个组件，该组件最外层也是用了'#app'，为何根组件的DOM'#app'会被替换掉。
阅读全文
摘要：基于Vue Router 2018年8月的官方文档示例，改造一下，通过一个最简单的例子，解决很多初学者的一个困惑。 首先是官方文档示例代码 效果如下 但此时，你点击子组件路由链接，会发现进入新路由后，页面外层的'Hello App!'等文字等仍然都在。不想要这些东西该怎么办？ 其实这个很好办，先看咱
阅读全文
摘要：今天看新项目代码，有import '@/assets/css/theme/index.css'一类的代码，里面的@是做什么的呢。 找到这篇文章https://www.cnblogs.com/boshow/p/8758927.html，这个是webpack使用loader里配置的 @ 等价于 /src
阅读全文
摘要：好久没用过vuex了，vuex官方示例的计算器counter是用的webpack打包了单文件组件，不方便回顾，今天把代码改成了html引人的方式，方便回顾 下面是vue model组件，当时做千分位格式化用的 vue只输入数字https://segmentfault.com/q/1010000007
阅读全文
摘要：在入口main.js里构建scss是通过引入模块的方式 在.vue组件里是单独构建的 里面的rem()是_functions.scss里定义的一个scss函数 然而这个rem()函数一直用不了，找问题找了很长时间，当然最后还是解决了。 webpack在对main.js里引入的scss编译时，可以看成
阅读全文
摘要：在通过vue-cli安装了webpack-simple 后，就自动安装好vue-loader了，但此时若写了含有sass的.vue组件，运行npm run dev时会报错。此时，需要我们在webpack.config.js里对vue-loader进行更详细的配置，官网给出来了，当然我们只需一个scs
阅读全文
摘要：npm run dev命令后并不会在dist目录下生成build.js文件，开发环境下build.js是在运行内存中的。 在package.json的scripts属性的dev后面加上--port 8090可以指定监测端口为8090。 通过官方下载下来的，运行npm run dev没问题，但运行np
阅读全文
摘要：以vue-router2.x讲解。 1.定义路由时，某路由对象里同时有component和redirect重定向参数，会怎样处理？ 答： 忽略component，直接用redirect的值重定向到新路由路径，使用新路径的组件。 例如，下面的第三个路由链接被点击时，会直接重定向到.....#/，然后使
阅读全文
摘要：github文档 用着不错，官方的文档例子很简单 直接用就可以了，自己把CSS改一下，就能用在现在的项目上了。
阅读全文
摘要：Vue2.0删除了很多1.0的比较实用的过滤器，如filterBy，orderBy。官方文档给了通过计算属性实现1.0搜索过滤器功能，自己又加入了大小写通用检索功能，比较简单，学一下。
阅读全文
摘要：比如基于jquery的select2插件，在vue下单独用有很多问题，其实对于这类插件，可以用vue的自定义指令和组件来包装，解决冲突的问题。引用官方vue1.0和2.0的两个例子，学习一下。 例子1.0 例子2.0 大功告成。说说基于vue1的，对于下拉单选，用vue官方的例子即可，对于多选，看下
阅读全文
摘要：直接上代码 子组件通过$emit触发父组件的事件，$emit后面的参数是向父组件传参，注意，父组件的事件处理函数直接写函数名即可，不要加(),参数直接传递到了父组件的methods的事件处理函数了。 结果 点击几次后变成 另外，写一个小拾遗。vue子组件用了定义模板组件功能，然后在父组件里定义一个H
阅读全文
摘要：最近做项目，上线前一直有个bug，不知道是什么原因引起的， 怀疑是渲染线程的原因。 今天看vue官方2.0的文档，在深入响应式原理的一节看到，“你应该注意到 Vue 执行 DOM 更新是异步的，只要观察到数据变化，Vue 就开始一个队列，将同一事件循环内所有的数据变化缓存起来”。 就是这里解释的东西
阅读全文
摘要：onchange事件在内容改变且失去焦点时触发，因此在一些多级联动需要清空次级内容的时候，用onchange就非常有用了，尤其是浏览器会提前加载数据的情况下。有篇文章可以看一下，链接。 PS:路漫漫其修远兮，最近遇到的几个问题，孟哥都是很快给出了解决方案。。。吾辈仍需努力。
阅读全文
浙公网安备 33010602011771号