随笔分类 -  Vue

上一页 1 2 3 下一页
Vue 操作数组问题
摘要：一、问题引入 由于 JavaScript 的限制，Vue 不能检测到以下数组的变动： 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如：vm.items.length = newLength 二、解决方法 为了解决第 阅读全文
posted @ 2022-10-25 16:09 盼星星盼太阳 阅读(70) 评论(0) 推荐(0)
父组件和子组件生命周期钩子函数执行顺序
摘要：Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分： 加载渲染过程 父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted 阅读全文
posted @ 2022-10-25 16:06 盼星星盼太阳 阅读(43) 评论(0) 推荐(0)
父组件监听到子组件的生命周期
摘要：一、问题引入 父组件监听到子组件的生命周期 二、$emit手动触发 // Parent.vue <Child @mounted="doSomething"/> // Child.vue mounted() { this.$emit("mounted"); } 三、@hook钩子 // Parent. 阅读全文
posted @ 2022-10-25 16:03 盼星星盼太阳 阅读(47) 评论(0) 推荐(0)
axios 获取服务端自定义设置的响应头问题
摘要：一、问题引入 前端post请求文件下载，需要获取响应头中的文件名，文件名由后端放在自定义响应头中，或者放在Content-Disposition响应头中，本地调试获取不到自定义响应头数据 二、问题解决 思路： 1.首先检查响应拦截器是否直接返回的res.data,这个时候获取的是不包含请求头的，所以 阅读全文
posted @ 2022-09-14 16:28 盼星星盼太阳 阅读(2123) 评论(0) 推荐(0)
axios取消重复请求与更新token并续订上次请求
摘要：一、问题引入 当用户发起一个请求时，判断token是否已过期，若已过期则先调refreshToken接口，拿到新的token后再继续执行之前的请求。 难点：当同时发起多个请求，token 过期会调用多次更新 token 接口；此时刷新token的接口还没返回，此时其他请求该如何处理，在刷新token 阅读全文
posted @ 2022-09-14 12:05 盼星星盼太阳 阅读(1433) 评论(0) 推荐(1)
v-model动态绑定
摘要：一、使用计算属性 v-model绑定computed中的属性，computed能返回不同值 二、使用变量名 常用于列表渲染，绑定不同的变量名， 假如变量a = 'pageid'存储的变量名pageid，想用v-model绑定pageid，可以 v-model="$data[a]" 在列表中根据下标动 阅读全文
posted @ 2022-07-12 11:41 盼星星盼太阳 阅读(3981) 评论(0) 推荐(0)
Echarts自定义图例legend
摘要：场景：如下图，饼图图例显示样式 方法一、利用富文本rich与formatter回调 查阅echarts官方文档，legend图例配置中： 1.单独配置多个图例； // 图例类型名称 const legendLabels = [ { type: 'square', labels: [ '大类资产配置收 阅读全文
posted @ 2022-04-21 16:22 盼星星盼太阳 阅读(6849) 评论(0) 推荐(0)
静态资源打包assets和static的区别
摘要：静态资源打包assets和static的区别 在项目打包时发现，虽然默认static文件夹里面的内容不会被打包，但是static中的图片文件，如果是通过相对路径引入到css样式中，那么在最终打包时，在css文件中发现，其仍然会被转换成base64的图片文件数据，在这种情况下，即使替换打包文件中的st 阅读全文
posted @ 2021-12-27 09:15 盼星星盼太阳 阅读(621) 评论(0) 推荐(0)
CDN链接失效，切换本地文件
摘要：场景：如今的前端项目很多使用CDN，但是万一使用的CDN服务器出现问题，导致引用的CDN文件都拿不到，项目崩溃打不开。 处理方案：如果引用CDN的文件出错了，拿不到，那么就引用本地相对应的文件。 下面以Vue项目为列: 项目的启动页 /index.html <script src="http://c 阅读全文
posted @ 2021-12-27 09:09 盼星星盼太阳 阅读(947) 评论(0) 推荐(0)
vue横向平滑滚动消息通知
摘要：场景：横向平滑滚动展示消息；消息列表是接口获取；类似于游戏中的广播消息 方法一、纯css animation 在css中定义关键帧，并写入animation样式 // animation: line 20s linear infinite; // @keyframes line{ // 0%{ // 阅读全文
posted @ 2021-10-22 11:56 盼星星盼太阳 阅读(1707) 评论(0) 推荐(0)
elementui表格中使用Popover 弹出框
摘要：场景：在elmentui表格中使用Popover 弹出框，进行删除二次确认 <el-table-column label="操作" align="center" fixed="right"> <template slot-scope="scope"> <el-popover v-if="scope. 阅读全文
posted @ 2021-10-21 10:37 盼星星盼太阳 阅读(1819) 评论(0) 推荐(0)
vue项目中iframe嵌套其他项目，iframe父子页面传值
摘要：场景：vue后台管理系统项目嵌入其他项目 一、iframe引入其他项目地址 <iframe ref="newScreen" @load="sendMessage" frameborder="0" :src="url" width="100%" height="100%" id="ysOpenDevi 阅读全文
posted @ 2021-09-22 18:26 盼星星盼太阳 阅读(4403) 评论(1) 推荐(0)
Vue相关原理以及手写一个MyVue
摘要：一、Vue基本原理 建立虚拟DOM Tree，通过document.createDocumentFragment()，遍历指定根节点内部节点，根据{{ prop }}、v-model等规则进行compile； 通过Object.defineProperty()进行数据变化拦截； 截取到的数据变化，通 阅读全文
posted @ 2021-07-13 11:50 盼星星盼太阳 阅读(206) 评论(0) 推荐(0)
Vue Router懒加载报错问题解决方案
摘要：场景：vue项目路由改成了懒加载方式，清空项目文件，重新下载配置运行后，就发现控制台报以下错误，刷新页面后，就不会再报错，应该使用路由懒加载后，组件加载异常导致的。另外，因为项目里用了懒加载，每次重新build之后有修改过的文件哈希码会改变，导致路由跳转到有修改过的页面会报页面文件404。 以下错误 阅读全文
posted @ 2021-06-25 09:32 盼星星盼太阳 阅读(3959) 评论(0) 推荐(0)
Vue中html导出docx文件
摘要：方法一、技术实现：fileSaver.js+html-docx-js 1.npm安装 $ npm install --save html-docx-js $ npm install --save file-saver 2.引入 import htmlDocx from 'html-docx-js/d 阅读全文
posted @ 2021-06-22 15:17 盼星星盼太阳 阅读(5134) 评论(0) 推荐(0)
Vue中防抖与节流的使用
摘要：Vue中防抖与节流的使用 场景：点击按钮下载资源，防止服务器压力过大，前端使用节流或者防抖； 一、防抖与节流介绍 1、防抖(debounce)：触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间； 2、节流(thorttle)：高频事件触发，但在 n 秒内只会 阅读全文
posted @ 2021-04-02 16:07 盼星星盼太阳 阅读(1993) 评论(0) 推荐(0)
Vue中实现input输入格式限制
摘要：1.使用修饰符实现数字输入 在VUE中可以在v-modal后添加修饰符的形式来限制输入，比如： <input v-model.number="testValue" type="number"> .number可以实现限制数字输入，但是会有以下问题： 会出现type="number"自带样式，当然可以 阅读全文
posted @ 2021-03-09 11:12 盼星星盼太阳 阅读(1256) 评论(0) 推荐(0)
axios设置请求超时时间与超时取消请求
摘要：一、设置超时时间，超时取消请求 场景：调用第三方接口不太稳定，需要设置超时时间，超时取消请求并提示连接超时 使用cancelToken参数，axios自带cancelToken参数 1.axios请求外部 const CancelToken = axios.CancelToken; let canc 阅读全文
posted @ 2021-01-21 11:42 盼星星盼太阳 阅读(6880) 评论(0) 推荐(0)
Vue组件注册命名方式(驼峰和短横线)
摘要：定义组件名的方式有两种： 1.使用 kebab-case Vue.component('my-component-name', { /* ... */ }) 当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-co 阅读全文
posted @ 2020-12-10 17:08 盼星星盼太阳 阅读(1559) 评论(0) 推荐(0)
ElementUI中el-checkbox使用v-model绑定默认选中
摘要：1.v-model绑定值为布尔true或false el-checkbox能默认选中； 2.v-model绑定值为数字0或1 需增加:true-label="1"，:false-label="0"，能进行回选 <el-checkbox v-model="v.effectStatus" :true-l 阅读全文
posted @ 2020-09-14 15:26 盼星星盼太阳 阅读(8594) 评论(0) 推荐(2)

上一页 1 2 3 下一页