Vue
文章平均质量分 55
vue
牛先森家的牛奶
语言只是一门工具
展开
-
vue问题总结(2)
vue问题总结(2)vue中props传值给data时-props有值但data却是空的问题问题描述:设计vue组件时,常常有这样一个应用场景:父组件通过接口请求回来的数据传给子组件, 然后在子组件内部我们会用一个props来接收,并且将该props赋值给data里面的一个变量(便于我们后期对这个数据操作,如果直接修改props,vue会报错)这样会有一个问题,就是组件接受到的props是有值的,但是赋给data里面的变量却是空的。解决如下:...原创 2021-06-17 11:02:03 · 76 阅读 · 0 评论 -
vue问题总结(1)
vue问题当组件的children共用子组件时 导致路径跳转问题vue验证码失效问题当组件的children共用子组件时 导致路径跳转问题解决如下:原因:因为当两个组件共用时,没有组件的创建和销毁,也就是组件复用了,所以出现路由跳转了,但是页面内容并没有改变或者说刷新的问题。所以这里需要用到 watch监听路由的变化 用来改变某些参数,为了达到我们的需求。 watch: { // // 监听实例属性,如果有变化则执行这里的代码 // userId: function (ne原创 2020-10-29 11:40:29 · 619 阅读 · 1 评论 -
移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动
移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动原创 2024-03-14 16:22:30 · 265 阅读 · 0 评论 -
vue通过下标修改数组里面内容,同时通过下标修改数组对象里面的内容,然后页面数组更新了。。。
vue通过下标修改数组里面内容,同时通过下标修改数组对象里面的内容,然后页面数组更新了。。。原创 2024-01-11 00:30:21 · 612 阅读 · 0 评论 -
vue之为什么data属性是一个函数而不是一个对象?
为什么data属性是一个函数而不是一个对象原创 2023-02-15 11:13:26 · 510 阅读 · 0 评论 -
vue2源码之生命周期篇
vue2源码之生命周期篇原创 2023-02-15 11:07:11 · 503 阅读 · 0 评论 -
Vue常用的修饰符有哪些有什么应用场景
Vue常用的修饰符有哪些有什么应用场景原创 2023-02-15 11:04:56 · 665 阅读 · 0 评论 -
整理项目中vue.config.js打包优化
项目中vue.config.js打包优化原创 2023-02-15 11:02:42 · 590 阅读 · 0 评论 -
vue项目之echarts的整理汇总2(持续更新中)
vue和echarts原创 2022-11-17 15:42:49 · 214 阅读 · 0 评论 -
vue项目本地开发使用Nginx配置代理后端接口
vue项目本地开发使用Nginx配置代理后端接口原创 2022-07-17 00:05:09 · 2670 阅读 · 0 评论 -
vue代理的devServer中before设置mock后和真实接口一起对接的问题
vue代理的devServer中before设置mock后和真实接口一起对接的问题原创 2022-07-08 18:24:20 · 2650 阅读 · 0 评论 -
Ant Design Vue框架的按需引入的全部组件汇总
Ant Design Vue框架的按需引入的全部组件汇总原创 2022-06-23 19:24:12 · 2198 阅读 · 3 评论 -
vue项目页面的打印和下载PDF加loading效果(加水印)
vue项目页面的打印和下载PDF(加水印)原创 2022-06-21 14:13:01 · 3099 阅读 · 0 评论 -
mui-player自定义底部导航在vue项目中显示不出来问题
mui-player自定义底部导航在vue项目中显示不出来问题原创 2022-06-14 10:38:29 · 611 阅读 · 1 评论 -
vue项目之移动端vw布局-配置postcss.config.js
vue项目之移动端vw布局-配置postcss.config.jsvue项目之移动端vw布局-配置postcss.config.jspostcss.config.js文件package.json文件vue项目之移动端vw布局-配置postcss.config.jspostcss.config.js文件// https://github.com/michael-ciniawsky/postcss-load-configmodule.exports = { "plugins": { "po原创 2022-04-11 00:05:18 · 2009 阅读 · 0 评论 -
vue之Vue.use的场景
vue之Vue.use的场景首先看下使用场景。基于vue官网提供如下:插件—Vue.js1、新建plugin文件夹2、新建test.js文件,内容如下:export default ((Vue, data) => { // ... console.log(Vue, data); // vue 123 第二个参数是main.js调用时 传递过来的})3、新建test2.js文件,内容如下:function test1(Vue, data) { // ... cons原创 2022-04-01 09:48:09 · 1066 阅读 · 0 评论 -
怎么判断移动端横屏还是竖屏?
怎么判断移动端横屏还是竖屏?怎么判断移动端横屏还是竖屏?CSS判断横屏竖屏:JS判断横屏竖屏:怎么判断移动端横屏还是竖屏?CSS判断横屏竖屏:@media screen and (orientation: portrait) { /*竖屏 css*/ } @media screen and (orientation: landscape) { /*横屏 css*/ }JS判断横屏竖屏: // 移动端的浏览器一般都支持window.orientation这个参数,通过这个参数原创 2022-03-13 18:26:59 · 1243 阅读 · 0 评论 -
vue 切换页面(路由)时保持滚动条回到顶部
vue 切换“页面”(路由)时保持滚动条回到顶部vue项目做pc端的时候,发现在两个页面切换时 滚动条没有回到顶部而是保持原先的位置;这是由于vue是单页面应用,只是更换了路由内容,还在当前页面滚动条是不会回到顶部的。解决办法是在切换路由的时候,将滚动区域的滚动条复位为0。 // 使用 watch 监听$router的变化, watch: { '$route': function(to, from) { document.body.scrollTop = 0 do原创 2022-01-27 09:59:49 · 3072 阅读 · 0 评论 -
vue中computed和watch搭配使用,监听props传递的两个或多个值的变化
vue中computed和watch搭配使用,同时监听两个或多个值的变化<template> <van-popup :value="show" :style="{ height: '7rem' }" @click-overlay="handleCancel" class="smart-room-popup" position="bottom" round > <header class="header mt20"原创 2022-01-26 17:12:24 · 4060 阅读 · 0 评论 -
vue后端传文件流转化成blob对象,前端点击下载返回undefined
vue后端传文件流转化成blob对象,前端点击下载返回undefined效果如下处理后的返回<template> <div class="content-box"> <div class="container"> <div>。。。</div> </div> </div></template><script>export default { pr原创 2021-12-28 16:57:10 · 4429 阅读 · 4 评论 -
elementui之封装下载模板和导入文件组件
elementui之封装下载模板和上传组件封装代码如下:<template> <div> <el-dialog :title="exportStatus? '导入结果' : '一键导入数据'" :visible.sync="dialogVisible" width="905px" :before-close="handleClose" class="export-standard-speech"原创 2021-11-23 14:04:39 · 1806 阅读 · 0 评论 -
Vue实现文件上传和oss上传(带进度条和取消上传功能)和拖拽后点击按钮上传(加loading效果)
Vue实现文件上传(带进度条和取消上传功能)代码实现这里我只写了单一文件上传的demo,并且只限制了文件大小不能超过5M。如果想限制上传的文件类型,可自行在input标签中进行设置,如果想要实现多个文件一起上传,先要设置input标签属性multiple=“multiple”,然后利用循环将每一个文件数据存入到formData中,最后作为参数传给服务端进行处理。因为个人习惯原因,我先对axios进行了封装,创建service.js文件,代码如下:import axios from "axios";原创 2021-11-05 09:59:55 · 4052 阅读 · 0 评论 -
浅谈vue和react的框架的比较
浅谈vue和react的框架的比较浅谈vue和react的框架的比较数据绑定组件化和数据流数据状态管理渲染和更新问与答浅谈vue和react的框架的比较从四个大方面进行浅谈比较:数据绑定、组件化和数据流、数据状态管理、渲染和更新数据绑定Vue 在数据绑定上采取了双向绑定策略,依靠Object.defineProperty (Vue 3.0 已迁移到 Proxy)及监听 DOM 事件实现 具体实现方法已经在前面剖析过了,简单来说就是,为了监听数据的改变,需要对数据进行拦截/代理;对于监听视图的改原创 2021-11-03 14:37:19 · 401 阅读 · 0 评论 -
vue项目之echarts的整理汇总(持续更新中)
vue项目之echarts的整理汇总(持续更新中)vue项目之echarts的整理汇总(持续更新中)echarts安装柱状图和折线图饼状图vue项目之echarts的整理汇总(持续更新中)echarts安装这里不多说,npm安装和按需加载可看官网获取 Apache EChartsnpm install echarts -S柱状图和折线图上手先看效果,不然无法继续进行下去,代码如下<template> <div class="page-two"> <原创 2021-10-29 11:11:40 · 730 阅读 · 2 评论 -
vue问题之数据更新而DOM节点不能立即更新问题(使用vue的this.$nextTick())
vue问题之数据更新DOM节点中不能立即更新问题(使用vue的this.$nextTick()函数)问题描述:父组件有数组数据,遍历子组件,然后父组件里面使用子组件中的数据,但是当子组件对应的数据被删除时,页面更新了,但是当拿子组件中的数据时,却没有更新;Vue.nextTickVue 中的 nextTick 涉及到 Vue 中 DOM 的异步更新;Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束原创 2021-10-25 11:43:46 · 3718 阅读 · 0 评论 -
vue项目之数量占比进度条实现
vue项目之进度条实现vue项目之进度条实现封装如下组件使用效果如下vue项目之进度条实现功能说明:1、点击开始,滚动条自动加;2、点击停止,滚动条停止加;封装如下<template> <div> <div class="progress-bar"> <div class="progress" :style="{ width: progressRatio + '%'原创 2021-10-13 15:26:39 · 2509 阅读 · 0 评论 -
vue项目之index.html引入JS文件
vue项目之index.html引入JS文件注意路径的写法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-contr原创 2021-10-13 09:28:05 · 6337 阅读 · 1 评论 -
vue项目坑之记录数据更新页面不更新问题
vue项目之记录数据更新页面不更新问题vue项目之记录数据更新页面不更新问题问题点vue项目之记录数据更新页面不更新问题遇到这个问题很奇怪,可以对JS的学习不够扎实,亦或者对vue内部原理不够清晰,说说我遇到的问题吧,先来几个截图说明情况;改后效果:问题点使用map方法时,之前是return item,其实数据打印的都一样的,并看不出来任何变化,现在改为如下写法还有一处地方是对这个数据里面的树形进行了修改,改了如下写法:问了大佬,说可能是深浅拷贝的原因,让我多尝试打印看看数据和页面目原创 2021-09-30 10:36:47 · 1080 阅读 · 0 评论 -
vue项目中js文件使用vue的this实例
vue中其他.js文件使用this实例vue中其他.js文件使用this实例main.js中导出vuerequest.js中导入main.js并使用vue中其他.js文件使用this实例在main.js中引入vue,然后在vue文件中直接使用this(this指向的是vue实例),但是在实际开发中,我们往往会引入外部的js文件使用this,这个this就会指向window,并不是我们期待的vue实例,那么就需要重新引入vue文件(import Vue from ‘vue’),这样很麻烦。在目前项目中原创 2021-09-28 14:57:25 · 3419 阅读 · 0 评论 -
vue之移动端适配
vue之移动端适配vue之移动端适配index.scss公共文件public 中 index.html 文件main.js中引入scss文件App.vue文件页面的样式写法如下vue之移动端适配网上方案很多,适配原理什么的不多说,说说我项目中使用的适配方案;index.scss公共文件html,body { width: 100%; height: 100%; background-color: #f2f2f2; font-family: 'Encode Sans Condense原创 2021-09-27 18:13:37 · 478 阅读 · 0 评论 -
vue项目之左右滚动布告牌实现
vue项目之布告牌实现封装:功能:1、根据内容长度判断是否可滚动;2、鼠标的移入移除判断是否可滚动;<template> <div id="notice-board-wrapper" ref="noticeBoard"> <ul id="notice-board"> <li v-for="(item, index) in lists" :key="index">{{ item }}</li> </ul原创 2021-09-22 12:12:36 · 1219 阅读 · 0 评论 -
vant list组件滚动保留滚动条位置
vant list组件滚动保留滚动条位置,需结合keepAlive使用1、保存位置的前提是用的keepAlive组件来做缓存,app.vue代码<template> <div id="app"> <keep-alive> <router-view v-if='$route.meta.keepAlive'/> </keep-alive> <router-view v-if='!$route.meta原创 2021-09-12 10:59:20 · 4763 阅读 · 1 评论 -
vue项目之关键字搜索高亮
vue项目之关键字搜索高亮封装自定义指令import Vue from 'vue'// 用于高亮文本function hightLight (el, binding) { const match = binding.value const reg = new RegExp(match, 'g') const txt = binding.arg let str = '' if (txt) { str = txt.replace(reg, `<span style="原创 2021-09-07 12:13:36 · 273 阅读 · 0 评论 -
vue之原生上传图片加水印并压缩图片大小(2)
vue之原生上传图片并压缩图片大小vue之PC原生上传图片加水印vue之PC原生上传图片加水印<template> <div class="content-box"> <div class="container"> <div class="title"> 点击上传图像(支持image/jpg,image/jpeg,image/png,image/gif格式图片且大小不能超过10MB) </div&g原创 2021-09-03 09:35:41 · 474 阅读 · 1 评论 -
vue项目之axios请求统一配置了超时时间,单独接口请求时重设超时时间
vue项目中axios请求统一配置了超时时间,单独接口请求时重设超时时间根据官网推荐:axios配置官网默认请求时间接口请求:// 任务新建export function newTaskAdd(data) { return request({ url: '/api/taskPlan/add', method: 'post', data })}重设超时时间的接口请求:// 任务新建export function newTaskAdd(data) {原创 2021-08-02 10:21:08 · 9187 阅读 · 6 评论 -
vue项目之移动端better-scroll的使用
vue项目之移动端better-scroll的使用vue项目之移动端better-scroll的使用vue项目之移动端better-scroll的使用封装better-scroll<template> <div class="wrapper" ref="wrapper"> <div> <slot></slot> </div> </div></template><原创 2021-07-25 14:24:59 · 351 阅读 · 0 评论 -
vue之bus总线的简单使用
vue之bus总线的简单使用vue之bus总线的简单使用vue之bus总线的简单使用场景描述:A组件中包括B,C组件,而B组件中包括D组件,这时如果D组件想要在A组件中触发C组件的方法怎么办呢?当然方案是有的,用状态管理vuex可以,用$emit传递也可以,但是我想试着用的是bus总线的方式;如下:D组件中触发bus的emit ,然后在A组件中用bus总线的on来触发方法;D组件中dataLoad(){ console.log('加载完触发事件'); this.$bus.$emi原创 2021-07-25 10:59:14 · 967 阅读 · 2 评论 -
live-server快速搭建前端服务
快速搭建服务—前端使用场景在你写好页面之后,查看打包好的文件可以实现的功能搭建临时的服务修改文件浏览器自动刷新自动打开项目你需要做的事情是npm install -g live-serveror 使用yarn来进行安装,特点就是快不过yarn我之前遇到过很奇怪的问题,具体是怎么解决的,哈哈,当然是用的npm啊yarn global add live-server然后在项目根目录执行live-server --port=8080然后你就可以看到了如果你比较懒,可以在pack原创 2021-07-21 10:02:07 · 257 阅读 · 0 评论 -
vuex之多个module引入.js文件的使用方法
引用webpack中的require.context()require.context:https://webpack.js.org/guides/dependency-management/// https://webpack.js.org/guides/dependency-management/ 中的#requirecontextconst modulesFiles = require.context('./modules', true, /\.js$/)// you do not need原创 2021-07-19 17:22:02 · 797 阅读 · 0 评论 -
vue路由权限(3)
vue路由权限(3)vue路由权限(3)router部分store部分配置权限相关菜单组件代码如下vue路由权限(3)前面记过vue路由权限的相关内容,因公司项目中使用到的差异不大,所以还是记录一下,大概实现就不讲究,想了解的可以看之前博客内容;vue权限(1)vue路由权限(2)router部分新建index.js文件import Vue from 'vue'import VueRouter from 'vue-router'import Layout from '@/layout'原创 2021-07-19 11:37:48 · 482 阅读 · 0 评论