vue开发
关注
分享
扫一扫
vue开发
言程序plus
全栈开发工程师，7年大型企业工作经验。优快云、阿里云、华为云等平台优质创作者；精通鸿蒙开发、前端、小程序、移动端应用开发、智慧大屏、gis、前后台管理系统等开发，数据挖掘分析运维。一直在探索AIGC，博客热衷分享实用项目和技术干货。技术栈：arkts\js\vue\react\node.js\three.js\cesuim.js\gis\uniapp\微信小程序\mysql\pgsql\java\python\opencv 。【诗词雅集】一款收录了30万首古诗词的微信小程序，旨在传承诗词经典，邂逅诗与远方。
展开
-
一文掌握elementUI构建复杂表格，合并行或列，多级表头等
前端开发过程中常常会遇到各种开发表格的场景，有时候有的表格比较简单有的比较复杂（如下图简单示例所示，有合并项和多级表头），Elementui的el-table控件也可以支持构建复杂的表格，本文将指导你如何快速开发复杂表格~~~原创 2024-01-02 10:41:27 · 8329 阅读 · 3 评论
-
vue3中如何使用 watch 函数来观察响应式数据的变化
在 Vue 3 中，可以使用watch函数来观察响应式数据的变化。这个函数可以在组件的setup函数中使用。watch()方法还可以实现更多复杂的功能，比如异步获取数据并在数据更新时重新渲染页面。原创 2024-03-26 14:18:57 · 569 阅读 · 1 评论 -
vue3中如何使用ref和reactive定义和修改响应式数据？
vue3中setup组合式api中如何定义响应式数据并且修改赋值呢？字符串/数字：“ref”是vue3中用来存储值的响应式数据源，它可以定义字符串，数字等；数组/对象：引入reactive 用来定义对象数据包括数组和对象原创 2022-12-01 10:43:18 · 9640 阅读 · 3 评论 -
一文读懂vue3和vue2的API风格对比
在 setup 中，我们可以按逻辑关注点对部分代码进行分组，然后提取逻辑片段并与其他组件共享代码。Vue3 组合式 API（Composition API） 主要用于在大型组件中提高代码逻辑的可复用性。传统的组件随着业务复杂度越来越高，代码量会不断的加大，整个代码逻辑都不易阅读和理解。都不用写了，不仅是数据，计算属性和方法，甚至是自定义指令也可以在我们的。用起来已经非常方便了，但是我们还是有很烦的地方，比如。，组件只需引入不用注册，属性和方法也不用返回，函数中返回，有的时候仅一个。原创 2022-12-01 11:08:18 · 1485 阅读 · 3 评论 -
vue循环生成的el-checkbox的控件双向绑定失效问题(选中、取消失效)
做到这里后，以为实现了功能，看效果发现问题: 点击时候，el-checkbox没有勾上，也没变化，但是checked的数值确实是变化了，但视图没有变化，那就说明：这样给值的checked没有和组件双向绑定上！！！原创 2022-09-23 15:29:28 · 7185 阅读 · 16 评论 -
el-table fixed固定列导致错位的解决方法介绍
Element UI table组件可以通过设置fixed=right属性实现列的固定，但是在某些情况下会导致固定列的样式错乱,只要刷新页面即出现表格错位问题,下面就总结下解决样式错乱实现方案。就可以解决错位问题了，到此这篇关于el-table fixed固定列导致错位的解决方法的文章就介绍到这了。对 Table 进行重新布局。当 Table 或其祖先元素由隐藏切换为显示时，可能需要调用此方法。原创 2024-07-17 21:45:00 · 4330 阅读 · 2 评论 -
vue3实现路由跳转
vue3的语法趋势于react了，需要什么就按需引入，不是将所有的方法绑定到vue中，再以this.$router.push的方法来使用，而且从vue-router模块里面引入：原创 2022-09-07 17:42:08 · 1142 阅读 · 2 评论 -
vue3路由重定向
指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面；1.新建项目 并引入vue和vue-router；4.使用redirect 属性设置路由重定向；3.createRouter定义和配置路由；2.使用Vue.use注册路由；原创 2022-09-07 17:09:36 · 10079 阅读 · 2 评论 -
vue父子组件及非父子组件通信
1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现父组件：<parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰</parent>data(){ return { msg: [1,2,3] };}...原创 2018-07-30 10:58:00 · 113 阅读 · 0 评论 -
nvm安装和使用保姆级教程（详细）
nvm和npm都是node.js版本管理工具，为了解决node.js各种版本存在不兼容现象可以通过它可以安装和切换不同版本的node.js。如果下载node过慢，请更换国内镜像源, 在 nvm 的安装路径下，找到 settings.txt，设置node_mirro与npm_mirror为国内镜像地址。nvm list或nvm ls查看目前已经安装的版本 （ 当前版本号前面没有 * ， 此时还没有使用任何一个版本，这时使用 node.js 时会报错 ）打开CMD，输入命令 nvm ，安装成功则如下显示。原创 2023-03-13 18:17:05 · 32237 阅读 · 17 评论 -
nodeJs中npm详解
npm 是Node.js的模块依赖管理工具。作为开发者使用的工具，主要解决开发node.js时会遇到的问题。如同 RubyGems 对于 Ruby 开发者和 Maven 对于Java开发者的重要性，npm 对与 Node.js的开发者和社区的重要性不言而喻。本文包括五点：package.json 、npm 的配置、npm install 命令、npm link 命令和其它 npm ...原创 2017-06-09 22:03:00 · 878 阅读 · 0 评论 -
使用Flexible实现手淘H5页面的终端适配
/*使用方式：在页面顶部引入flexible.js，将页面视觉设计稿切成10份，例如640px宽的视觉设计稿可切分成10个64px宽，以此为基准，手动计算页面中元素宽高和字体相对于64px比值，将这个比值作为元素宽高或字体大小的rem值即可*/曾几何时为了兼容IE低版本浏览器而头痛，以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代，为了处理各终端的适配而乱了手脚。对于混迹各社区的偶，时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配？那么趁此Am...原创 2021-11-04 18:09:07 · 1515 阅读 · 0 评论 -
移动端页面开发适配 rem布局原理
我们拿到的设计图一般是以640，750，1080分辨率为基准设计的，而现在的手机终端各式各样，分辨率不同，逻辑像素不同 ，适口不同，所以为了让我们的页面在每个设备上都可以良好的展示，那么就需要为这些设备做统一的处理，这个过程就称为移动端适配。需要知道的一些概念：物理像素(physical pixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，可以理解为我们平时说的分辨率；设备独立像素(density-independent pixel)原创 2017-03-19 21:36:00 · 4862 阅读 · 6 评论 -
远程仓库上创建一个新的分支 `b` 并将远程分支 `a` 的内容克隆到 `b` 分支上
要在远程仓库上创建一个新的分支 `b` 并将远程分支 `a` 的内容克隆到 `b` 分支上，你可以按照以下步骤进行操作：原创 2023-08-15 18:07:05 · 889 阅读 · 0 评论 -
大学生必看之：Git如何提交代码
你可以使用以下任一方式提交代码，然后开始分支管理、代码评审与合并等操作。原创 2024-03-18 12:59:13 · 570 阅读 · 1 评论 -
npm镜像地址设置和查看
npm镜像地址设置和查看。原创 2023-02-13 18:38:08 · 4223 阅读 · 1 评论 -
git本地怎么拉取远程新的分支
6. 现在，你已经成功拉取了远程仓库的新分支，并在本地创建了一个对应的分支。你可以在这个分支上进行开发工作。这将列出所有的远程分支，你可以在其中找到你感兴趣的新分支。这将创建一个新的本地分支，并将其设置为追踪对应的远程分支。是远程仓库中新分支的名称。确保将这些占位符替换为实际的值。是你希望在本地创建的分支的名称，是本地克隆的仓库所在的目录，请注意，以上命令中的。是远程仓库的URL，原创 2023-11-02 11:45:49 · 8903 阅读 · 0 评论 -
报错：Error: The project seems to require yarn but it‘s not installed
拉完代码后启动项目命令行显示：出现这个原因的话，如果在项目里面是因为项目中存在：.lock 文件解决方法：博主使用第一种方案解决了问题，附带图片：原创 2023-04-11 15:49:59 · 2152 阅读 · 0 评论 -
cnpm报错：“Error：Cannot find module ‘fs/promises” 解决方案
根据分析，原因是Node.js版本太低导致的（也可以说是cnpm版本太高），由于低版本的Node.js对于promises的引入方式与高版本的是不一样，而cnpm版本太高的话，Node是不支持’fs/promises’引入方式的。安装低版本cnpm：npm install cnpm@7.1.0 -g --registry=https://registry.npm.taobao.org。升级到最新的版本：n latest（最新版本）n stable（最新稳定版本）原创 2023-03-14 15:53:45 · 1010 阅读 · 0 评论 -
最全js取整方法记录
最全js取整方法记录原创 2023-02-02 23:21:33 · 277 阅读 · 0 评论 -
Vue中强制更新数据的两种方式
this.$set()方法是Vue自带的可对数组和对象进行赋值，并触发监听的方法。有时候我们发现修改了数据源后视图并没有更新，这里提供两种解决方案。使用forceUpdate强制渲染，更新视图和数据。Vue中强制更新数据的方法有两种。原创 2022-12-28 09:31:12 · 12630 阅读 · 0 评论 -
vue 提示 this.getOptions is not a function 报错
问题的分析：可能是由于node版本安装太高，导致下载以前老版本或者老项目package.json里面依赖的时候， less-loader 的版本下的过高了，不兼容 getOptions 函数方法，所以需要对 less-loader 进行降级处理。3、重新启动项目 npm run dev 即可。1、先删掉现在的高版本的less-loader。2、再下载指定低版本的less-loader。原创 2022-09-07 16:46:04 · 3440 阅读 · 0 评论 -
vue.js window.removeEventListener 移除
vue项目中的小坑记录下，想要移除window的addEventListener，需要把后面的function挂在到this上，removeEventListener 和 addEventListener 中对应的参数要一致。beforeDestroy() { //在组件生命周期结束的时候销毁。 window.removeEventListener('scroll',...原创 2018-12-25 15:52:00 · 2518 阅读 · 0 评论 -
3D旋转动画练习 demo
<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{margin:0;padding:0;}body{background: black;}div{ width:400px; ...原创 2017-03-19 21:45:00 · 147 阅读 · 0 评论 -
前端性能优化之gzip
前言：如果你是个前端开发人员，你肯定知道线上环境要把js，css，图片等压缩，尽量减少文件的大小，提升响应速度，特别是对移动端，这个非常重要。常用的前端性能优化方法有如下几种一、减少http请求二、CSS Sprites三、使用oss及CDN加速四 、css,js代码压缩五、将样式表放在头部，将脚本放在底部六 精简JavaScript，内存的管理，堆栈的释放七 避免重定向...原创 2019-02-18 14:21:00 · 243 阅读 · 0 评论