![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue3学习
文章平均质量分 62
念衢
这个作者很懒,什么都没留下…
展开
-
使用Echarts实现项目数据可视化
1、安装插件,全局引入,页面布局结构如下图。 # echarts 底层依赖 ZRender(ZRender基于canvas),一个轻量级的二维绘制库 封装后端请求重点是地图注册以及数据,至于地图geo组件配置 ,参考官方debugg:南海诸岛不显示,国家主权问题,有点危险 ,如果隐藏还可以参考博文原创 2022-12-06 23:35:06 · 846 阅读 · 0 评论 -
表格数据方法、分页方法及组件的封装和分页组件的复用
1、数据获取与显示的通用方法封装 table.js2、数据转换指令方式: 服务方式: 查看请求后端接口:发现需要两个参数——当页数和每页条数 前端的方法是用公式计算,参考博文 这里用后端的方法:分页由后端完成,所以每次切换页面的数据条数和当前页码时,都要根据接口请求参数,发送请求。debug:总条数和数据页码不显示。 修改添加scss样式后: 在common文件夹下,新建Pagin.vue组件,把上一个页面与分页相关的代码复制过来,修改后如下:原创 2022-12-05 23:35:09 · 514 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅻ——信息管理页(增删改查封装)
在utils下新建table.js拷贝信息列表到信息管理页面,修改根节点的class命名为InfoLists,同时并改scss后,在信息管理页进行使用封装好的getData方法。原创 2022-12-03 01:12:24 · 809 阅读 · 0 评论 -
表单校验规则
使用element-ui的datePicker组件选择时间,传递的表单里用户的时间格式为:,所以这里value=“2022-11-02“校验规则:用户输入时间必须在的当前系统时间之后。1、系统时间如果不转换对象为string,就直接比较的话,结果不对2、因为系统月份是从0开始计算的, 所以获取到的系统的月份会比生活中的少1,所以获取的系统月份需要加一str;把str字符串根据“-”符号,将str字符串进行拆分成数组str.join("-");将str数组中的元素用“-”进行连接。原创 2022-11-28 16:46:29 · 470 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅺ——信息列表页(弹窗复用增改、CRUD前端基础实现)
因为需求发生了点变化,所以把之前的代码稍改一下,把之前的信息列表全复制到用户列表中,最后效果一样。调整一下页面元素布局和样式:按钮、图标等。调整后。原创 2022-11-27 01:20:53 · 902 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅹ——前端数据表格的删除、查找
1、拿到id或者行数据对象2、查看后端接口方法,写api方法,将操作连接上后端后端请求操作成功,但是前端数据表格未更新,最简单的一种方法数据删除后要重新获取数据===》依旧显示成功,但是前端数据表格未变化,排查后,看封装请求方法的api.js文件,发现:1、方法没有获取参数;原创 2022-11-24 23:00:33 · 1145 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅸ——数据表格渲染及处理+前端分页
在页面添加table表格,从element-ui官网查找,包括数据一起复制过来,查看显示没有问题后,把tableData清空为空数组。原创 2022-11-21 22:54:45 · 1719 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅷ——公用组件之面包屑
新建共用组件Breadcrumb.vue,从element-ui官网找组件。导入面包屑到Home.vue显示使用。原创 2022-11-21 21:54:13 · 333 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅶ——公用组件(Header+Footer+Menu)
components下新建文件夹common,新建三个组件:Header.vue Footer.vue Menu.vue从element-ui官网找到想要的组件,粗略写好后,挂载在主页Home.vue上,原创 2022-11-19 00:10:43 · 1059 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅵ——首页、登录页、404页面
1、为了方便起见,先将element-ui的使用改为全局引入的方式。2、写登陆页面:2.1、components文件夹下新建Login.vue2.2、从找需要的组件:+3、修改路由:启动项目(使用重定向)和输入http://localhost/login,进入的页面都是为登录页面运行结果:4、登录验证4.1 简易版,适用于小项目和简单的验证规则,实现:将验证规则直接写在html中当输入框失去焦点时,会自动进行表单校验4.2登录验证进阶版。原创 2022-11-17 23:02:03 · 3251 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅴ——axios使用与封装、配置路由和路由懒加载
如果不应用懒加载的话,很多页面都会打包到同一个js文件中,文件将会异常的大。造成进入首页时,需要加载的内容过多,时间过长,在浏览器中可能会出现短暂的空白页,从而降低用户体验,而运用路由懒加载是将各个模块分开打包,用户查看的时候再加载对应的模块,减少加载用时。2、在 main.js导入使用axios,因为是用的比较多,所以采用的是全局引入,挂载到原型的方式。实现2、: 使用Vue异步组件,修改router文件夹下的index.js文件为下。实现1、:修改router文件夹下的index.js文件为下。原创 2022-11-17 13:11:26 · 525 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅳ——图标库的使用
在main.js中引入。原创 2022-11-17 12:35:52 · 204 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅲ——使用CSS预处理器
使用(scss可以嵌套使用。在App.vue的style中进行引入使用。的scss改为less,两者语法通用的。重置之后:会更紧凑,看起来更舒服。原创 2022-11-17 12:26:53 · 188 阅读 · 0 评论 -
通用后台管理系统前端界面Ⅱ——按需配置element-ui
①作为一个独立的模块进行引入,在项目下新建plugins文件夹,再新建element.js文件(更推荐)②直接在main.js文件进行引入。使用element-ui。原创 2022-11-17 11:54:29 · 271 阅读 · 0 评论 -
通用后台管理系统前端界面
##安装指定版本的vue脚手架工具 或者是已安装了,该命令则为使用4.5.15版本的vue/cli。2.1 效果:自动打开项目,终端输入“npm run serve”后自动弹出项目主页。③使用Vue Project Manager ,使用命令行输入。1.1 局部安装vue-cli 工具,方便不同版本进行切换。后续项目还可以看到使用的依赖、module,对启动速度等进行优化。局部安装vue-cli 4.5.15 和创建项目。###查看当前vue脚手架工具版本。会弹出vue项目托管器。原创 2022-11-16 22:44:39 · 1012 阅读 · 0 评论 -
vue3使用element-plus
1、下载包2、引入全局引入+挂载:引入记得有css文件(下载不下来可能是项目正在运行,先关掉)按需引入:先下载两个插件修改vue.config.js文件。原创 2022-11-16 16:40:05 · 3202 阅读 · 0 评论 -
vue3新特性 Ⅱ
▣ provide() / inject()实现嵌套组件之间的数据传递。以前外层只允许一个根节点,即最外层会包一个div,现在可以不用。在生命周期钩子前加上on来访问 并且需要保持小驼峰的命名方式,▣子组件中使用inject()获取上层传递过来的数据。▣父组件中使用provide()向下传递数据。(只能父组件向子组件传递数据,不能反向)▣只能在setup()函数中使用。原创 2022-11-15 22:37:00 · 2725 阅读 · 0 评论 -
vue3 新特性
这对代码压缩更友好,因为变量的名字可以变得更短,但对象的属性名则不能。选项式 API 在单个组件的逻辑复杂到一定程度时,也面临了一些限制,主要体现在需要处理多个逻辑关注点的组件中,同一个逻辑关注点相关的代码没有被归为了一组,程序员为了一个逻辑关注点在不同的选项块间来回滚动切换,如果是大项目,后期维护非常困难。执行,所以无法像2.x 中一样使用this获取当前组件,修改data变量,所以3.x是通过接收setup(props,ctx)的方法,获取到当前组件的实例ctx(context)和props。原创 2022-11-11 23:56:01 · 1513 阅读 · 0 评论 -
JS和TS的异同
TypeScript :是JavaScript 的超集(ts是微软开发的开源编程语言,vue3的底层代码也是ts),即包含JavaScript 的所有元素,能运行JavaScript 的代码,并扩展了JavaScript 的语法。js有的类型:boolean类型、number类型、string类型、array类型、undefined、null。ts新增的类型:tuple类型(元组类型)、enum类型(枚举类型)、any类型(任意类型)4、ts增加了接口interface、泛型、类、类的多态、继承等。原创 2022-11-05 15:38:26 · 3219 阅读 · 0 评论 -
vue状态管理——Vuex
Vuex 是一个专为 Vue.js 应用程序开发的。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。简单理解vuex就是把组件共享状态抽取出来以一个全局单例模式管理,把共享的数据函数放进vuex中,任何组件都可以进行使用。什么时候我们该使用它?Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。原创 2022-11-05 00:33:31 · 1564 阅读 · 0 评论 -
vue引入路由——帮助管理页面跳转逻辑
1、安装路由2、准备两个存在相互跳转逻辑的页面新建文件夹views新建文件 AboutViews.vue HomeViews.vue3、配置独立文件新建文件夹router 新建文件 index.jshistory 表示访问方式4、在main.js文件进行全局导入和挂载5、最后使用或 router-link 标签——的声明式导航,并router-link标签添加to属性值 ==》来是router文件夹下的index.js文件中的配置,最后运行显示。原创 2022-11-03 17:18:06 · 389 阅读 · 0 评论 -
跨域问题 —— 前端解决方案
【代码】跨域问题 —— 前端解决方案。原创 2022-11-02 16:24:36 · 86 阅读 · 0 评论 -
axios 网络封装
网络请求有很多,但终归是发送和接收,并且axios发送的数据不能是对象,只能是字符串的形式,所以可以使用统一的工具类对axios发送请求的数据进行处理;以此类推,接收返回的请求,可以通过判断不同的状态码,进行不同的处理(500服务器内部错误、404访问地址不存在等)新建如下: index里封装所有的网络请求 path里放所有的路径。原创 2022-11-02 16:11:06 · 450 阅读 · 1 评论 -
电脑更新后,突然node、npm无法识别
可以用 nvm use 14.10.0 进行证实,exit status1:目前绝大部分问题是权限不足导致的,正常运行。但此时返回的没有星号,证明node版本下载好后,使用切换出现问题。所以点击菜单,右键,使用管理员身份打开,再进行nvm ues。如果还是不行,可能需要检查npm或者环境变量的配置。1、cmd 输入 nvm list 检查。正常应如下图,带星号返回。原创 2022-11-02 15:09:52 · 1025 阅读 · 0 评论 -
vue3——使用axios
浏览器页面在向服务器请求数据时,因为返回的是整个页面的数据,页面都会强制刷新一下,这对于用户来讲并不是很友好。简单一点:可以理解为ajax i/o system,这不是一种新技术,本质上还是对原生XMLHttpRequest的封装,可用于浏览器和nodejs的HTTP客户端,只不过它是基于Promise的,符合最新的ES规范。实现ajax的方式有多种,如jQuery封装的ajax,原生的XMLHttpRequest,以及axios。的(即同一套代码可以运行在浏览器和node.js中)。原创 2022-11-01 22:19:27 · 5966 阅读 · 3 评论 -
vue使用第三方例子 —— swiper
纯js打造的开源 、强大的触摸滑动插件 ,面向移动端。可实现触屏焦点图、触屏Tab切换、触屏轮播图切换等效果。1.1.1 使用终端执行命令,进行安装,save命令进行保存到package.json中。1.1.2新建轮播图组件。效果:多了显示当前位置的指示器,高亮显示。1.1.4 添加指示器。1.1.3主组件引入。原创 2022-11-01 18:06:52 · 1638 阅读 · 0 评论 -
vue3事件处理 组件 组件交互 数据传递
3.2 ◉父组件从子组件取值 数据从子组件传递到父组件 使用自定义事件 $emit。v-model.lazy 只有当用户提交或enter键后才触发,去同步数据。◉创建时:beforeCreate、created(组件创建完成不代表,已显示)一般把 定时器和性能消耗的组件 放在beforeUnmount 函数中销毁,处理掉。◉ 渲染时:beforeMount、mounted。同时父组件想要显示子组件传递过来的数据,则。2、组件的组织——嵌套的组件树。页面一启动就会自动调用该函数。原创 2022-10-30 21:56:49 · 1226 阅读 · 0 评论 -
v-for 添加key提高性能
当用v-for渲染列表时,默认使用“就地更新”的策略,当数据发生变化,vue不会移动DOM元素来匹配数据项的顺序,而是就地更新每个元素,并且确保它们在每个索引位置正确渲染。如果没有key那可能就需要全部都重新渲染,而有key就不用,所以说提高了性能。② 当对象没有id时。原创 2022-10-30 21:28:50 · 194 阅读 · 0 评论 -
v-if 和 v-show 的区别
v-if 和 v-show 都能实现元素的显示隐藏 1. v-show 只是简单的控制元素的 display 属性,而 v-if 才是条件渲染(条件为真,元素将会被渲染,条件 为假,元素会被销毁); 2. v-show 有更高的首次渲染开销,而 v-if 的首次渲染开销要小的多; 3. v-if 有更高的切换开销,v-show 切换开销小; 4. v-if 有配套的 v-else-if 和 v-else,而 v-show 没有 5. v-if 可以搭配 template 使原创 2022-10-30 16:52:19 · 351 阅读 · 0 评论 -
vue3创建项目
ps:项目名不能大写,必须全小写,可以用-进行分割。安装好后,查看是否安装成功。保存为将来项目的预置?原创 2022-10-30 16:45:12 · 368 阅读 · 0 评论