随笔分类 -  vue

vue vue-router 实现原理
摘要：前言 单页应用只有一个页面，所有的页面切换，其实只是组件之间的隐藏显示而已，所有的页面内容都只在一个html上 vue-router是通过对window.location.hash和windown.history进行封装，来实现将hash或url的变化映射为组件的变化 vue-router在brow 阅读全文
posted @ 2022-02-10 14:49 眼里有激光 阅读(269) 评论(0) 推荐(0)
vue优化（1） vue-cli3/4 【图片压缩 】||【文件压缩】
摘要：前言 vue-cli3和vue-cli4没有大的变化，只是将对应的构建依赖更新到最新的版本 压缩图片 安装依赖 npm i webpack-image-loader imagemin-mozjpeg //imagemin-mozjpeg 是webpack-image-loader处理jpeg文件的依 阅读全文
posted @ 2021-12-10 13:53 眼里有激光 阅读(829) 评论(0) 推荐(0)
vue 组件传值provide与inject
摘要：vue 组件传值provide和inject 应用场景 当组件嵌套的层级过多时，通过prop将父组件的属性层层传递给后代组件，明显是繁琐而又低效的，vue提供了provide和inject，能够将父组件中的属性直接让所有后代组件访问到 与$parent相比用什么好处 1.不用暴露整个parent组件 阅读全文
posted @ 2021-03-27 14:46 眼里有激光 阅读(2320) 评论(0) 推荐(0)
vue 学习七 组件上使用插槽
摘要：我们有时候可能会在组件上添加元素，就像下面那样 但是最终的渲染结果却是这样 幸好，Vue 自定义的 <slot> 元素让这变得非常简单。只需要在com组件中定义 然后就可以了 slot标签在这里的作用就是将<com></com> 标签之间的代码添加进入slot中，我们可以像是用普通标签<div>一样 阅读全文
posted @ 2019-10-21 10:13 眼里有激光 阅读(408) 评论(0) 推荐(0)
vue 学习 cli3常用配置
摘要：恢复内容开始 cli3以后，构建的项目更加的简洁，配置文件也没有向cli2那样暴漏出来，但这并不代表cli3是不可配置的，我们只需要在根目录下添加一个vue.config.js作为项目的配置文件，就可以愉快的配置我们的项目了 以下就是本人常用的配置项，如果想了解更多的可以去https://cli.v 阅读全文
posted @ 2019-10-15 16:40 眼里有激光 阅读(839) 评论(0) 推荐(0)
vue 学习五 深入了解components（父子组件之间的传值）
摘要：上一章记录了 如何在父组件中向子组件传值，但在实际应用中，往往子组件也要向父组件中传递数据，那么此时我们应该怎么办呢 1.在父组件内使用v-on监听子组件事件，并在子组件中使用$emit传递数据 2.在vue中，凡是在methods中定义的方法的this，都指向当前组件实例，可以利用这个特性，在pr 阅读全文
posted @ 2019-10-13 23:04 眼里有激光 阅读(6860) 评论(0) 推荐(0)
vue 学习四 了解组件
摘要：1组件的注册 全局注册 局部注册 2组件通讯 第一种 在子组件中使用props：[],将其定义成一个数组的方式 第二种 在子组件中使用props：{} 值得一提的是，为什么组件里的data会是一个function，这是为了保证在多个地方使用这个组件的时候，组件的实例是独立的，比如说，你有一个计时器组 阅读全文
posted @ 2019-10-12 23:42 眼里有激光 阅读(380) 评论(0) 推荐(0)
vue 学习二 深入vue双向绑定原理
摘要：vue双向绑定原理 请示总体来讲 就是为data的中的每个属性字段添加一个getter/seter属性 以此来追踪数据的变化，而执行这部操作，依赖的就是js的Object.defineProperty方法Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 阅读全文
posted @ 2019-10-10 16:54 眼里有激光 阅读(236) 评论(0) 推荐(0)
vue 学习一 组件生命周期
摘要：先上一张vue组件生命周期的流程图 以上就是一个组件完整的生命周期，而在组件处于每个阶段时又会提供一些周期钩子函数以便我们进行一些逻辑操作,而总体来讲 vue的组件共有8个生命周期钩子 beforeCreate 实例创建前 create 实例创建后 beforeMount dom挂载前 mounte 阅读全文
posted @ 2019-10-09 18:28 眼里有激光 阅读(237) 评论(0) 推荐(0)
vue 中使用 lazyload 插件 数据更图片不更新 的原因 及解决方案
摘要：在使用lazyload插件的img标签上，加上:key标识即可 阅读全文
posted @ 2019-06-05 16:51 眼里有激光 阅读(596) 评论(0) 推荐(0)