目的：vue-cli构建的vue单页面应用，某些特定的页面，实现前进刷新，后退不刷新，类似app般的用户体验。 注： 此处的刷新特指当进入此页面时，触发ajax请求，向服务器获取数据。不刷新特指当进入此页面时，不触发ajax请求，而是使用之前缓存的数据，以便减少服务器请求，用户…

Ajax 技术的出现，让我们的 Web 应用能够在不刷新的状态下显示不同页面的内容，这就是单页应用。在一个单页应用中，往往只有一个 html 文件，然后根据访问的 url 来匹配对应的路由脚本，动态地渲染页面内容。单页应用在优化了用户体验的同时，也给我们带来了许多问题，例如 S…

最近在写项目的时候碰到一个场景：一个地图应用，有个侧边栏，侧边栏里面放着很多选项，选项改变的时候，应用会根据侧边栏的条件请求数据，然后在地图上放 markers 。页面可以简单抽象成如下结构：

Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-model，v-…

一般入门级的无需太早考虑这方面的，只要专心学好Vue的使用姿势便可。 这种情况一般报错信息可以看到是哪个包抛出的信息，一般卸载这个模块,安装重新安装下即可。 官方解释如下: data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。 Vue 在2.2的时候…

最近在尝试写几个UI组件，并通过阅读element-ui的源码，与其反复比较，然后认真思考，最后总结出一些自己的一些心得和体会。在造轮子的过程中，既巩固了html,css,js基础，又加深了对vue源码的理解，更重要的是给了我一个温习和实践所学过的设计模式和思想的机会，来编写更…

在Vue构建的单页面应用（SPA）中，路由模块一般使用vue-router。vue-router不保存被切换组件的状态，它进行push或者replace时，旧组件会被销毁，而新组件会被新建，走一遍完整的生命周期。 但有时候，我们有一些需求，比如跳转到详情页面时，需要保持列表页的…

上面的代码的效果是，当我们输入firstName后，wacth监听每次修改变化的新值，然后计算输出fullName。 这里 watch 的一个特点是，最初绑定的时候是不会执行的，要等到 firstName 改变时才执行监听计算。那我们想要一开始就让他最初绑定的时候就执行改怎么办…

在普通页面中，点击浏览器的返回按钮，在返回到上一页时会处在上次浏览的位置。单页面应用中，由于始终是同一个页面， 因此需要自行实现页面返回时的锚点。Vue-router 的 Scroll Behavior 可以用于解决这个问题，但是只能应用在 HTML5 history 模式。本文实现了在 hash 模式下的锚点跳转。