炯炯灯的博客

今天大佬让我改个小需求，结果因为对route对象了解的不够多，未能完成任务，有点小尴尬。需求是：在venue list页面的beforeRouteEnter钩子里，对to.query进行参数校验以及初始化，说白了就是判断当前路由的query是否是我们需要的，而且符合类型要求。听上去蛮简单的的一个需求，做起来也不是很难。我就把必需的query列了出来，写了个循环判断下是否每个query都存在，...

一个很方便的loader----vue-observe-visibility应用场景一：代替position: sticky, 这个属性简单来说 可以用来让元素在未超出屏幕高度时保持relative，超出屏幕高度时呈现position: fixed的效果。可以用于实现一些很常见的需求。但是这个属性目前只有chrome支持的比较好，兼容性不是很好，所以需要替代方案-----vue-obse...

vue的diff算法用于视图更新，也可以说是dom更新。俗话说有对比才有差距，vue也是通过将dom前后进行对比，再进行更新。dom是树状结构，因此对比过程中需要先将它化成对象的形式（虚拟dom）如：var Vnode = { tag: 'div', children: [ { tag: 'p', text: '123' } ]};对比是逐层进行...

有时候在项目中打开别的网页，需要给网页设置meta，如缩放禁止等。这时候在index.html中设置失效需要额外设置。可以使用插件vue-meta：文档：https://github.com/declandewet/vue-meta#npm{ metaInfo: { meta: [ { charset: 'utf-8' }, { name: 'viewport'...

再跳转后的路由观察路由变化，进行页面刷新。watch: {     '$route' (to, from) {      this.$router.go(0); }}参考https://blog.youkuaiyun.com/wulala_orz/article/details/78928524#commentBox...

在做tab切换子路由需求的时候，点击后退键，就会返回上一个子路由，不是很符合实际需求。可以在router-link后面加上关键词repalce，就可以实现切换子路由，路径不存入history。如果是编程式路由，可以把router.push()换成router.repalce() 如<router-link to="/attend/activityCool" replace class="al...

这库看起来还不错，用的着实蛋疼。他的组件很多，基本上不可能加载全部组件，为了减小体积，肯定要按需加载但是！ 这库的组件很奇葩，有的组件引入的时候，只需要在对应的component里import就可以正常使用。譬如 Message，Message-Box而有的组件引入的时候，必须要在main.js里import并vue.use挂载才可以，注意在用到的component里引入是不行的！譬如 butto...

router-view可以实现局部加载，很方便，但是也有坑。router-view使用的前提是，局部加载的组件和加载它的组件要有父子关系，也就是说，需要在加载router-view的组件配置children路由如：{          path: '/attend',          name: '参与活动',          component: resolve => require(...

https://www.cnblogs.com/moqiutao/p/7496718.html

容器和内容嵌套规则要正确：<div class='wrapper'>    <div class='content'>content    </div></div>注意内容要用div包起来，也就是说容器内只能有一个div...

最近做新项目，写基础组件用到了vue2.6的新特性$attrs, $listeners, inheritAttrs。其实也不算新了，只是自己以前没用过，突然觉得自己更新知识的速度还是有点慢的。看来没事还是得多逛逛国外前端大佬的博客。这仨货的基础知识文档都有，这种东西还是在项目里说明比较易懂而且实用，所以我直接说下基础组件的编写过程好了，以AutoCompleteInput组件为例。首先要清...