![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue项目开发
文章平均质量分 50
翘阳啦
只有不断学习,才不会落后!做笔记的博客
展开
-
【ECharts】ECharts基本使用和图表的展示
1、首先在文件中引入ECharts的依赖包可以通过 BootCDN安装BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务2、准备一个容器:然后就可以通过 echarts.init 方法初始化一个 echarts 实例并通过 setOption 方法生成一个简单的柱状图,下面是完整代码。各种配置项可以查官网的手册:Documentation - Apache ECharts 只需要准备两个容器 只需要在series里设置多个类型的图标即可:.........原创 2022-07-13 18:04:00 · 1053 阅读 · 0 评论 -
【canvas】canvas和svg基本使用
canvas是HTML5的新特性,它允许我们使用canvas元素在网页上通过Javascript绘制图像canvas标签特点 绘制出的图形,并不是DOM,只有一个DOM那就是canvas,看到的都是像素点。参数:x为到画布左边的距离,y为到画布上边的距离。w为矩形的宽度,h为矩形的高度。第一种是根据轮廓画出矩形,第二种是可以填充颜色的矩形。 清除画布的参数:第一个参数是x距离,第二个是y距离,第三个是清除的宽度,第四个是清除的高度。.........原创 2022-07-13 14:06:33 · 1092 阅读 · 0 评论 -
【Vue项目笔记心得】深度选择器
对于某一个组件,如果style添加上scoped属性,给当前子组件的结构中都添加上一个data-v-xxxx自定的属性。 vue是通过属性选择器给需要添加的元素加上样式。scoped作用:只对当前的组件有用(样式) 在父组件中再添加一个子组件,子组件的根标签,会拥有父组件当中的自定义属性。 注意下面只有div标签有data-v-7ba5b90属性: 如果 子组件的根节点,和父组件中书写的样式相同,也会添加上相应的样式。这里h3也就相当于根标签了,也具有父组件的data-v-7ba5b90属性:原创 2022-07-13 10:32:54 · 2113 阅读 · 0 评论 -
【JS算法】数组的各种方法在增删改查的重要作用(写后台管理的心得总结)
删除数据 pop()、shift()、slice()、splice()修改数据 filter()、reverse()查找数据 every()、some()、indexOf、lastIndexOf()、map()、forEach()push():在数组末尾插入数据下面的例子都是将新的属性添加到原来的数据中: unshift():在数组开头插入数据 pop():从数组末尾删除数据 shift():删除数组开头的数据 slice():...原创 2022-07-11 10:37:45 · 139 阅读 · 0 评论 -
【Vue-Element UI】三级表单可选框以及显示、修改和删除表单属性
这里是后台管理系统的三级选择器,只有当第一级分类选中属性时,第二个才能选,以此类推。Element ui里面的表单选择器:组件 | Element这里用到的Form属性: inline属性可以让表单域变为行内的表单域 inline为true代表的是行内表单,代表一行可以放置多个表单元素model属性为表单的数据对象这......原创 2022-07-07 21:15:24 · 2530 阅读 · 0 评论 -
【Vue-Element UI】表单元素以及表格内项目的添加、修改及删除
完成品牌的添加、修改和删除操作 添加品牌的表单界面,点击添加按钮,出现Dialog对话框,品牌logo部分采用了upload上传 点击修改也会出现上面的对话框 ,点击删除按钮, 出现下面的MessageBox弹框 在data中添加了以下数据添加、修改和删除的API接口 在methods中添加函数调用...原创 2022-06-13 11:12:56 · 2104 阅读 · 1 评论 -
【Vue-Element UI】Element UI做表格和分页器,前后端展示列表数据
目录静态组件界面 1、表格(Table)2、分页器 (Pagination) 3、展示列表数据4、$API表格和分页器外观图: 首先利用ElementUI搭建静态组件界面Element - The world's most popular Vue UI framework主要属性 data:表格组件将来需要展示数据---数组类型, border:给表格设置边框 column属性: label:显示的标题原创 2022-06-12 16:01:05 · 2687 阅读 · 0 评论 -
【Vue项目心得笔记】自定义事件深入
事件注意事项:事件:系统事件、click、双击、鼠标系列等等事件源、事件类型、事件回调系统事件1、原生的DOM比如button可以绑定系统事件--click单击事件等2、组件标签比如Event1可以绑定系统事件(不起作用,因为属于自定义事件),需要加上.native(可以把自定义事件转化为原生DOM事件) 当前原生DOM绑定click事件,其实是给子组件的根节点绑定了点击事件,利用了事件的委派。但是给原生DOM绑定自定义事件时没有任何意义的,因为没有办法触发$emit函数 EventTest组件原创 2022-06-11 16:21:46 · 103 阅读 · 0 评论 -
【Vue项目心得笔记】登录与注册(下)---导航守卫(重要)
上篇笔记遇到的问题是,当用户已经登录的时候,就无法再通过login路径前往登录页面。 解决这个问题需要用到全局守卫的前置守卫逻辑有点绕,主要是看用户名和token有没有,用来保证路由跳转的逻辑正确。...原创 2022-06-05 21:15:53 · 370 阅读 · 3 评论 -
【Vue项目心得笔记】登录与注册(上)---token(重要)
登录(重要!!!) 1、登录业务(token)登录之前先注册,通过数据库存储用户信息(名字,密码) 登录成功的时候,后台为了区分用户是谁,服务器下发token【令牌:唯一标识符】。登录成功显示token: 只要有token,就登录成功了。登录完毕后会在home首页显示用户名 当用户登录向服务器发送请求(组件派发action:userInfo),登录成功获取到token,存储于仓库之中(非持久化的),然后路由跳转到home首页。因此在首页当中(mounted)派发action获取用户信息,动态..原创 2022-06-05 16:48:06 · 1513 阅读 · 4 评论 -
【Vue项目笔记心得】GET和POST的区别
参考了很多关于这个问题的解释文章和视频,自己总结一下关于GET和POST的区别:1、从语义上来看,GET为检索和获取,而POST的意思为创建或更新。GET多用于从服务器请求获取数据,POST多用于向服务器发送数据。2、一些在w3cschool里的标准答案:GET在浏览器回退时是无害的,而POST会再次提交请求。 GET产生的URL地址可以被Bookmark,而POST不可以。 GET请求会被浏览器主动cache,而POST不会,除非手动设置 GET请求只能进行URL编码,而POST支持原创 2022-05-05 21:15:46 · 1683 阅读 · 0 评论 -
【Vue项目心得笔记】页面的分页功能
1、为什么很多项目采用分页功能,比如电商平台同时展示的数据有很多,如果不采用分页功能可能浏览器加载不出来。ElementUI有相应的分页组件,使用起来超级简单,但是我们先掌握自定义分页的功能。2、分页器需要哪些数据?(1)当前是第几页:pageNo字段代表当前页数(2)每页展示多少数据:pageSize字段代表(3)需要知道整个分页器一共有多少个数据:total字段代表(4)需要分页器连续页面个数:5/7【奇数】奇数是对称的总结:pageNo: 代表每一页展示多少数据 page原创 2022-04-25 20:03:19 · 1127 阅读 · 0 评论 -
【Vue项目心得笔记】电商网站的“面包屑”
标题说的“面包屑”是下图所示的小方块,可以方便的筛选用户需要的物品的各种属性。利用vue设计出这种面包屑需要很多的请求面包屑包括在主页全部商品分类点击的面包屑,输入关键字产生的面包屑,点击下方品牌产生的面包屑,还有点击售卖属性的面包屑。带给服务器的参数 data(){ return{ //带给服务器的参数 searchParams:{ //一级分类id ..原创 2022-04-25 10:13:18 · 1977 阅读 · 1 评论 -
【Vue项目心得笔记】Search模块开发(一般的四个步骤)
(1)先静态页面+静态组件(2)发请求(API)//获取搜索模块 地址:/api/list 请求方式:post 请求需要带参数//当前接口,给服务器传递参数params,至少是一个空对象export const reqGetSearchInfo =(params)=>requests({url:'/list',method:'post',data:params})(3)vuex三连环import { reqGetSearchInfo } from "@/api".原创 2022-04-24 14:58:06 · 530 阅读 · 1 评论 -
【Vue项目心得笔记】两种利用Swiper插件实现轮播图的方法:一是延时器,二是watch+nextTick(最重要,最完美)
第一种方法:利用swiper插件,采用延时器 第一步:引入相应的依赖包(swiper.js|swiper.css) 第二步:页面的结构务必要有 第三步:初始化swiper实例,给轮播图添加动态效果mounted() { //派发action:通过Vuex发起ajax请求,把数据仓储在仓库中 this.$store.dispatch("getBannerList"); //在new Swiper实例之前,页面的结构必须要有,如果没实现,应该是结...原创 2022-04-22 09:59:03 · 837 阅读 · 0 评论 -
【Vue项目笔记心得】Swiper插件用于轮播图
1、首先先下载一个版本的swiper,这里以5.4.5为例,官网地址:Swiper中文网-轮播图幻灯片js插件,H5页面前端开发2、先在index.html中引入swiper包,包括css和js<!DOCTYPE html><html><head> ... <link rel="stylesheet" href="dist/css/swiper-bundle.min.css"></head><bo..原创 2022-04-21 19:57:46 · 694 阅读 · 0 评论 -
【Vue项目心得笔记】mockjs模拟数据
常见问题:开发search模块中的TypeNav商品分类菜单(过渡动画效果)过渡动画:前提组件,元素务必要有v-if|v-show指令才可以进行过渡动画原创 2022-04-21 18:18:01 · 894 阅读 · 0 评论 -
【Vue项目心得笔记】商品分类的三级列表过渡动画
开发search模块中的TypeNav商品分类菜单(过渡动画效果)过渡动画:前提组件,元素务必要有v-if|v-show指令才可以进行过渡动画合并参数:合并params和query参数原创 2022-04-21 16:43:54 · 422 阅读 · 0 评论 -
【Vue项目心得笔记】防抖与节流
防抖:前面所有的触发都被取消,最后一次执行在规定时间之后才会触发,也就是说如果连续快速的触发,只会执行一次。用户操作很频繁,但是只执行一次。节流:在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发。用户操作很频繁,但是把频繁的操作变为少量操作【可以给浏览器有充裕的时间解析代码】可以先下载lodash插件,www.lodashjs.com 里面封装函数的防抖与节流的业务1、防抖:lodash函数库对外暴露 _函数例:_.debounce原创 2022-04-20 21:26:00 · 547 阅读 · 0 评论 -
【Vue项目笔记心得】vuex模块式开发
1、vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据切记,并不是所有项目都需要vuex,如果项目很小,完全不需要vuex,如果项目很大,组件很多、数据很多,数据维护很费劲,这可以使用vuex。2、使用vuex在项目src下新建store文件夹,新建index.js文件安装vuex,npm install vuex@3在index.js文件中import Vue from "vue"import Vuex from "vuex"//使用插件...原创 2022-04-15 20:42:14 · 302 阅读 · 0 评论 -
【Vue项目笔记心得】nprogress进度条的使用
1、安装nprogressnpm install nprogress2、使用,在request.js中使用引入进度条,然后使用进度条,进度条要在请求拦截前开始,到响应前结束start:进度条开始done:进度条结束进度条颜色可以修改,在nprogress.css中修改即可进度条样式:...原创 2022-04-14 09:31:12 · 813 阅读 · 0 评论 -
【Vue项目笔记心得】postman接口测试、axios二次封装、api接口统一管理
1、postman接口测试2、axios二次封装(1)为什么进行二次封装axios?请求拦截器、响应拦截器:请求拦截器:可以在发请求之前可以处理一些业务响应拦截器:当服务器数据返回以后,可以处理一些事情安装axios:npminstallaxios(2)在项目当中经常要建API文件夹【axios】接口当中:路径都带有apibaseURL:"/api"//对于axios进行二次封装import axios from "axios"//1、利用axio..原创 2022-04-13 15:25:54 · 1193 阅读 · 0 评论 -
【Vue项目笔记心得】路由传参及相关面试题
1、路由跳转的方式比如A—>B声明式导航:利用router-link,务必有to属性,可以实现路由跳转编程式导航:利用的是组件实例的$route.push||replace方法,可以实现跳转2、路由传参params参数:属于路径当中的一部分,需要注意,在配置路由的时候,需要占位query参数:不属于路径当中的一部分,类似于ajax中的queryString /home?k=v&kv=,不需要占位在搜索框内传递参数:(1)在搜索位置加上v-model用于收集数据原创 2022-04-13 10:46:19 · 358 阅读 · 1 评论 -
【Vue项目笔记心得】组件的隐藏与显示------v-if,v-show,路由元信息
显示或隐藏组件v-if、v-showFooter组件:在Home,Search时显示,在登录注册界面时隐藏1、我们可以根据组件身上的$route获取当前路由的信息,通过路由路径判断Footer组件的显示与隐藏<!-- 在Home、Search显示,在登录注册隐藏 --><Footer v-show="$route.path=='/home'||$route.path=='/search'"/>2、配置路由的时候,可以给路由添加路由元信息【meta】,路由需要配置对原创 2022-04-13 09:44:05 · 2570 阅读 · 1 评论 -
【Vue项目笔记心得】路由组件搭建 安装less-loader,vue-router
1、vue2安装vue-router时记得要安装3版本npm i vue-router@32、若style格式用的less,加上lang="less"需要安装npm i less-loader@6从package.json中可以看到安装的版本3、路由组件放置位置components文件夹经常放置非路由组件pages/views文件夹经常放置路由组件4、项目当中配置的路由一般放置在router文件夹中,新建index.js//配置路由import Vue from.原创 2022-04-13 09:31:23 · 547 阅读 · 0 评论 -
【Vue项目笔记心得】 安装脚手架及配置时出现的问题
1、安装脚手架时,执行npm命令时一定要注意空格,比如第一步时的安装命令:npm install -g @vue/cli注意install和g后面的空格2、注意新建的文件夹的位置路径不能有中文,这样会导致安装不了。3、vue-cli初始化项目node + webpack + 淘宝镜像(会加快下载速度)4-10:脚手架各文件夹含义:4、node_modules文件夹:里面存放的是项目依赖5、public文件夹:里面存放静态资源(图片),需要注意,放在这个文件夹中的静态资源,we原创 2022-04-12 11:03:29 · 2260 阅读 · 0 评论