Vue
关注
分享
扫一扫
文章平均质量分 78
Vue.js是一套构建用户界面的渐进式框架。Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和 Vue 生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。
雨季mo浅忆
你来我就好好珍惜，
你走我就好好生活。
展开
-
Vue _ 教程版 01 基础
目录目标一、Vue 基础1.1、介绍1.2、声明式渲染和组件化1.3、MVVM 模式二、Vue 基础使用2.1、传统 Dom 操作2.2、使用 Vue 实现2.3、vue devtools工具安装2.4、Vue 实现数据绑定的原理原创 2021-08-25 22:20:20 · 638 阅读 · 0 评论
-
Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化
Vue2实现主内容滚动到指定位置时，侧边导航栏也跟随选中变化需求背景：PC端项目需要实现一个有侧边导航栏，可点击跳转至对应内容区域，类似锚点导航，同时主内容区域上下滚动时，可实现左侧导航栏选中样式能实时跟随变动的效果。原创 2024-09-25 00:00:00 · 542 阅读 · 0 评论 -
Vant2框架tab切换list不加载问题（切换后onload不继续触发）
Vant2框架tab切换list不加载问题（切换后onload不继续触发）遇到的问题：van-list 加载，页面上有个切换的 van-tab，实现切换不同的类型，加载不同的list的功能。Vant2 的 List 列表 就有个 bug，当切换 tab 的时候，它的 onload 没有自动触发。然而在当前标签页，如果列表已经加载完毕再去切换，onload 就可以实现自动触发原创 2024-07-31 23:45:00 · 533 阅读 · 0 评论 -
Vue2中实现聊天界面滚动条自动滑动到最底部
Vue2中实现聊天界面滚动条自动滑动到最底部原创 2024-04-29 09:00:00 · 1120 阅读 · 0 评论 -
Vue之v-on事件修饰符的含义及使用
Vue之v-on事件修饰符的含义及使用背景：Vue 拆封了一个组件，在组件里面会使用一个方法来改变父组件传过来的值，但是在子组件里面操作父组件的数据变更，实在比较麻烦（因为单向数据流），So 能不能直接在组件上面绑定事件方法呢，因此就在封装的组件上面写了 ：@click="getDataList"但是绑定的 click 方法会不生效，So 要想解决，就需要用到v-on 事件修饰符 的.native 了 ， 接下来就来讲解一下各修饰符的含义及使用。原创 2024-04-18 23:45:00 · 737 阅读 · 0 评论 -
Vue_管道符“｜”（单竖线）的用处
Vue_管道符“｜”（单竖线）的用处目录1、管道符是什么2、应用场景原创 2024-04-18 08:00:00 · 1890 阅读 · 0 评论 -
Vue2移动端项目使用$router.go(-1)不生效问题记录
Vue2移动端项目使用$router.go(-1)不生效问题记录目录1、this.$router.go(-1) 改成this.$router.back()2、存储 from.path，使用 this.$router.push3、hash模式中使用h5新增的onhashchange事件做hack处理4、this.$router.go(-1) 之前添加一个 replace 方法原创 2024-01-18 18:00:00 · 1885 阅读 · 0 评论 -
Element｜Upload结合Progress实现上传展示进度条
Element｜Upload结合Progress实现上传展示进度条背景 ： 项目里的 附件上传 题型组件，用户在上传过程中，如果文件较大，上传过程较慢，而又没有一个类似 Loading... 的加载过程的话，会显得干愣愣的，用户体验较差，所以需要添加一个进度条来提示用户上传的进度，下面有两种方式，一种假的，一种真的，伙伴们可根据需求自行选取实现。原创 2024-01-11 23:00:00 · 9268 阅读 · 5 评论 -
Vant2组件库van-list+Toast下拉加载滚动条回顶问题
Vant2组件库van-list+Toast下拉加载滚动条回顶问题目录List 列表Toast 轻提示解决方案1、不使用Toast 的 加载提示2、修改调整pointer-event 属性值3、判断是否为第一次加载再使用4、forbidClick 设置为 false5、自定义组件原创 2024-01-08 23:45:00 · 3101 阅读 · 0 评论 -
Element｜InfiniteScroll 无限滚动组件的具体使用方法
Element｜InfiniteScroll 无限滚动组件的具体使用方法在前端开发中，很多页面都需要实现无限滚动的效果，即当页面滚动到底部时，自动加载更多的数据。Element Infinitescroll 是一款方便易用的 Vue 组件，可以帮助我们快速实现无限滚动功能。目录InfiniteScroll 无限滚动基本用法详细说明v-infinite-scroll 指令infinite-scroll-disabled 属性infinite-scroll-distance 属性总结原创 2023-12-30 13:15:00 · 5023 阅读 · 0 评论 -
记录新招大佬针对项目所提出的优化点建议
记录新招大佬针对项目所提出的优化点建议目录1、将 debounce 封装函数替换为 v-debounce全局自定义指令1-1、原debounce 封装函数1-2、替换的v-debounce全局自定义指令2、使用 Vue 中 style scoped 深度访问新方式 :deep()2-1、 >>>2-2、/deep/2-3、::v-deep2-4、:deep()3、Edge 浏览器与 IE 浏览器实现滚动条兼容4、利用 scss 提取图片路径公共部分5、避免原创 2023-12-21 00:00:00 · 896 阅读 · 0 评论 -
Vue2之防抖_debounce封装函数&v-debounce自定义指令(传参/不传)
Vue2之防抖_debounce封装函数&v-debounce自定义指令(传参/不传)目录1、防抖2、debounce- 封装函数3、v-debounce全局自定义指令原创 2023-10-20 20:00:00 · 1549 阅读 · 0 评论 -
记录解决IOS滚动跳转不生效问题
记录解决IOS滚动跳转不生效问题目录背景 ：解决过程 ：解决方案 ：最终代码 ：背景 ：项目类似于问卷星里面的问卷调查，当你点击提交按钮时，页面会有弹窗提醒你有哪些题型没回答，点击确认之后，页面滚动条会自动跳转至未回答项的 offsetTop 高度位置原创 2023-08-24 08:00:00 · 824 阅读 · 0 评论 -
项目难点：解决IOS调起软键盘之后页面样式布局错乱问题
项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题原创 2023-08-15 05:00:00 · 2697 阅读 · 1 评论 -
解决Vue2中控制台报错 [WDS] Disconnected! 问题
解决Vue2中控制台报错 [WDS] Disconnected! 问题Vue2 项目打开控制台时发现如下报错 ：[WDS] Disconnected! client?9556:172其实并没有对项目运行本身造成什么实质性的影响，但是一条红色的提示摆在那里确实不太好看，还是把他给解决掉吧。原创 2023-07-19 23:45:00 · 1237 阅读 · 0 评论 -
移动端Vue2实现文件图片上传功能
基于 Vue2 + Vant2 组件库实现 ：移动端 Vue2 实现文件图片上传功能原创 2023-07-09 00:00:00 · 1274 阅读 · 0 评论 -
Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符
Vue项目在IE浏览器页面白屏且报错SCRIPT1010:缺少标识符背景 ：Vue2 项目在谷歌浏览器运行好好的，在 IE 浏览器打开就会出现各种的问题。。原创 2023-07-07 07:00:00 · 3287 阅读 · 0 评论 -
记录基于Vue.js的移动端Tree树形组件
Vue 树形选择器（ Vue tree select ）组件在搭建 Vue 的 app 中特别常用，Vue tree select 除了简单的树形结构外，还有非常多样的功能来配合不同场景的使用。比如搜索过滤，前端添加删除树枝，前端编辑修改子树名，拖拽排序，对用户操作事件记录等。本文记录了我自己使用多年最好用的 2款 Vue tree select 组件，每一款都经过我实际测试，推荐给大家。原创 2023-06-09 09:00:00 · 16309 阅读 · 3 评论 -
Vue2移动端实现一个可拖拽悬浮球组件
【前端】Vue2移动端实现一个可拖拽悬浮球组件原创 2023-05-18 20:12:26 · 3696 阅读 · 2 评论 -
Vue2之vue.config.js的webpack配置文件详解
Vue 之 vue.config.js 的webpack配置文件详解目录一、常用配置项1、导出模块2、publicPath 部署应用包的基本Url3、outputDir 输出文件目录4、assetsDir 打包后生成的静态资源目录5、lintOnSave6、productionSourceMap 生产环境的 source map7、devServer8、css相关配置原创 2022-02-25 20:00:00 · 12525 阅读 · 0 评论 -
解决：ValidationError: Invalid options object. PostCSS Loader ......
PostCSS Loader 已使用与 API 架构不匹配的选项对象进行初始化。vue --version 这时候看到 vue-cli 已经是 @4 版本的了。卸载掉当前 5.x 的版本（ mac 版本 的前面需要加上 sudo ）直接下载 @4 版本（ mac 版本 的 前面需要加上 sudo ）- 选项具有未知属性“plugins”。最后再按照创建项目的步骤重新走一遍就 OK 了。使用 vue/cli @'./xxx/xx' 中出现错误。1、首先打开终端执行。原创 2023-03-29 23:00:00 · 7762 阅读 · 6 评论 -
vue/cli5.x运行项目报错error Replace `xxx` with `··xxx·` prettier/prettier 解决办法
vue/cli5.x运行项目报错error Replace `xxx` with `··xxx·` prettier/prettier 解决办法目录问题背景解决办法1、关闭 Prettier"prettier/prettier": "off"2、执行修复命令npm run lint --fix原创 2023-03-27 20:00:00 · 8775 阅读 · 0 评论 -
通过自定义指令v-dialogDrag实现拖拽移动
通过定义自定义指令 v-dialogDrag ，实现 元素（弹框）拖拽移动。原创 2023-02-25 00:00:00 · 736 阅读 · 0 评论 -
整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误
整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误这篇文章主要介绍了 Vue项目在 IE 浏览器显示白屏并报错 SCRIPT1002: 语法错误 的案例。目录一、关于 sockjs-client 依赖包二、关于 highlight 依赖包三、关于 swiper 依赖包四、IE 不支持 ES6 语法五、第三方插件引入导致六、本地环境正常，生产环境仍旧白屏原创 2022-12-24 00:45:08 · 9897 阅读 · 1 评论 -
记录Win7系统下的node版本升级过程及后续项目启动所遇问题
记录Win7系统下的node版本升级过程及后续项目启动所遇问题目录Windows7系统如何“安装”高版本Node后续项目运行启动时遇到的问题 Bug原创 2022-12-20 23:45:00 · 1293 阅读 · 0 评论 -
Vant 2 - 移动端 Vue 组件库 _ 问题记录
Vant 2 - 移动端 Vue 组件库 _ 问题记录发布初衷 ：记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题，方便以后再次遇到类似问题 ， 能够快时查阅解决 ，大家要是觉得有帮助的话 ， 可以收藏一下 ， 博主会不定时更新文章的目录基础组件Popup 弹出层表单组件DatetimePicker 时间选择Field 输入框Form 表单Picker 选择器Radio 单选框Uploader 文件上传展示组件List 列表导航组件Tab 标签页原创 2022-10-28 00:00:00 · 26069 阅读 · 8 评论 -
Vue 引入 .json 文件中的图片
在网上查了很多方法 ，都不见效果最后偶然发现这样引入可以获取到图片并且渲染到页面上‘@/assets/img’ 图片文件路径必须写到外面 ，如果写到 JSON 文件里面是没有效果的 ，‘@/’ 是必须写出来的 ，后面的路径可以写到 JSON 文件中原创 2022-09-19 09:00:00 · 2465 阅读 · 0 评论 -
前端Vue之Request URL：请求地址乱套问题记录
前端Vue之Request URL：请求地址乱套问题记录问题背景 ：修改配置文件 .env.development 和 vue.config.js重启前台服务器 ， 请求后端接口时一直报错，请求不成功原创 2022-09-18 00:00:00 · 3053 阅读 · 0 评论 -
Vue create 之后的空架子完善
Vue create 之后的空架子完善目录一、安装组件库二、安装图表库三、@ 符 提示 文件配置原创 2022-08-28 00:00:00 · 572 阅读 · 0 评论 -
第二次新建一个Vue前端项目我都做了哪些操作
第二次新建一个Vue前端项目我都做了哪些操作目录第二次新建项目操作原创 2022-08-27 00:00:00 · 410 阅读 · 0 评论 -
Vue_侦听器 watch 监听 computed 计算属性
Vue_侦听器 watch 监听 computed 计算属性目录侦听器 watchhandlerimmediate$watch()deep项目简单使用 ：原创 2022-08-26 00:00:00 · 2913 阅读 · 0 评论 -
Vue子组件内的props对象参数配置
Vue子组件内的props对象参数配置目录一、简单数据类型1、布尔类型 Boolean2、数字类型 Number3、字符串类型 String二、复杂数据类型1、数组 Array2、对象 Object3、函数 Function这篇文章主要介绍了 Vue 子组件内的props 对象里的 default 参数是如何定义Array 、Object 、或 Function 默认值的正确写法说明，具有很好的参考价值原创 2022-08-21 01:00:00 · 4368 阅读 · 0 评论 -
Vue自动获取焦点并且光标移至最后
Vue自动获取焦点并且光标移至最后项目需求 ：每次进入页面时，需要自动聚焦到一个文本框上，让其右侧的设置面板显现出来。并且光标最好是自动移至到最后面，优化用户的体验。代码实现 ：原创 2022-08-20 00:00:00 · 3473 阅读 · 1 评论 -
Vue 前端代码风格指南
Vue 前端代码风格指南代码规范是一个非常重要的事情 ，很多企业都有自己的代码规范体系 ，而在不同阶段体系 HTML 、CSS、JS 也有代码规范 !那么到了后期框架和库阶段规范你知道吗 ?今天为大家分享一组热门框架 VUE 的代码风格规范指南 ，希望后续在写 Vue 方面代码有所帮助 !目录一、命名规范1.1、项目文件命名1.2、Vue 组件命名1.3、代码参数命名二、代码规范2.1、Vue2.2、HTML2.3、CSS2.4、JavaScript三、注释规范四、其它...原创 2022-08-17 17:00:00 · 5474 阅读 · 3 评论 -
Vue 之 .env. 相关文件
Vue 之 .env. 相关文件目录一、 .env.development 文件二、 .env.production 文件三、.env.staging 文件原创 2022-02-27 00:00:00 · 4410 阅读 · 0 评论 -
Vue项目组件注册命名规范
Vue项目组件注册命名规范目录一、组件名二、单文件组件命名三、基础组件命名四、单例组件名五、紧密耦合的组件名原创 2022-08-14 00:00:00 · 3410 阅读 · 0 评论 -
取消页面元素滚动条并使其回到顶部
取消页面元素滚动条并使其回到顶部需求背景 ：首页页面在用户的放大缩小时 ， 页面内容可能会展示不开 ，所以此时就需要根据用户放大缩小了多少倍 ， 来使其页面滚动条展示与否 ，并且用户调整到正常比例时 ， 让其滚动条先归零 ， 回归到原始位置后再取消滚动条...原创 2022-08-11 18:00:00 · 413 阅读 · 0 评论 -
记录Vue.Draggable拖拽组件的使用历程
记录Vue.Draggable使用历程Vue.Draggable 是一款基于 Sortable.js 实现的 vue 拖拽插件。支持 移动设备、拖拽 和 选择文本、智能滚动 ，可以在 不同列表间 拖拽、不依赖 jQuery 为基础、vue 2 过渡动画兼容、支持撤销操作 ，总之是一款非常优秀的 vue拖拽组件 。.........原创 2022-07-07 19:09:00 · 24413 阅读 · 5 评论 -
Vue实现复制粘贴功能
Vue实现复制粘贴功能目录一、需求说明二、代码实现1、安装 vue-clipboard2 依赖2、在main.js文件中全局引入插件3、案例三、项目所用四、功能升华实现选中并且复制成功后带有提示信息的效果 ：...原创 2022-06-14 11:11:00 · 11799 阅读 · 1 评论 -
Vue 实现输入框的聚焦
Vue 实现输入框的聚焦目录方法一、绑定 ref方法二、使用自定义指令——官网方法三、通过事件中的事件对象 $event，找到 input方法四、使用原生原创 2022-04-19 06:00:00 · 15499 阅读 · 0 评论