vue项目笔记
努力成长的__小白
这个作者很懒,什么都没留下…
展开
-
vue3实现不定高的虚拟列表
【代码】vue3实现不定高的虚拟列表。原创 2024-07-18 13:42:21 · 109 阅读 · 0 评论 -
电商项目-vue路由跳转的权限的限制
问题:在这个项目当中在进行页面跳转的时候是具有逻辑性的①登录和未登录状态的不同页面的展示②支付页面和支付成功的页面的展示是在用户去结算后才出现的,就是只能从购物车跳转到支付页面,支付成功页面也只能从支付页面进行跳转③我的订单的页面也只能是登录后才能进入的在这里使用了全局的路由前置守卫和路由独享守卫实现的,首先是通过token来判断是否已经登录成功,但是用户的信息使用Vuex进行存储的,不是持久性的存储,在页面跳转的时候用户信息有可能是不存在的,所以需要进行判断然后发送请求,在此期间token也是肯存在过期的原创 2022-06-03 20:06:47 · 504 阅读 · 0 评论 -
登录组件进行登录的时候出现的bug
在用户登录的时候,发送请求,得到相应的数据并且得到用户的一些信息,然后存入VueX里面,然后登录成功以后就进入主页面,主页面的头部会显示用户的信息,然后发现登录成功后并没有在主页面显示用户的信息①登录组件的登录的点击事件②Vuex里面的state,actions,mutation③还进行一个全局前置路由守卫的一个设置,对登录和没登录的一个不同的操作最后发现,是当登录后是异步发送请求,请求成功后就将登录成功的状态返回给登录按钮中,mutaion还没来得及将得到token存入本地,原创 2022-05-31 20:33:33 · 349 阅读 · 0 评论 -
使用swiper制作轮播图出现的bug
用swiper制作轮播图出现的bug原创 2022-05-31 20:13:27 · 538 阅读 · 0 评论 -
电商项目实现购物车商品的全部删除
在一般的项目当中,是存在删除某个商品的请求接口的,然后我们需要去通过这个接口去实现将选中食物商品一起删除①设置点击事件,派发Vuex里面的action里面的方法,使用异步的方法 async deleteAll() { try { await this.$store.dispatch('shopcart/deleteAllCart'); this.getData(); } catch (error) { alert(error.message);原创 2022-05-31 19:28:13 · 406 阅读 · 0 评论 -
Vue-router 导航路由
1.全局路由守卫 1>前置路由守卫 作用:进行权限设置路由,在跳转之前调用 使用:1.在配置路由index.js文件里面进行配置 meta:{ isAuth:true,//是否进行权限的校验 title:'信息' } 使用router里面的方法const router = new VueRouter({ routes, // 默然的情况下,是当...原创 2022-05-30 20:49:37 · 343 阅读 · 0 评论 -
浏览器存储localStorage和sessionStorage
webStorage1.存储的内容的大小一般是5M左右2.通过localStorage和sessionStorage实现本地存储的机制,以key value的形式存储3.相关的API:1.存储数据:window.***Storage.setItem('msg','hello');2.读取数据***Storage.getItem('msg');3.删除数据***Storage.removeItem('msg');4.清空数据***Storage.clear();原创 2022-05-30 20:03:09 · 249 阅读 · 0 评论 -
vue项目里面的小问题
1.在vue-router里面,当进行路由跳转的时候,滚动条的位置是不会动的,路由里面是有一个滚动行为的,解决方式官网里面有const router = createRouter({ history: createWebHashHistory(), routes: [...], scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置 }})一直在顶部scrollBehavior(to, from原创 2022-05-26 21:00:51 · 196 阅读 · 0 评论 -
vue分页器的封装
1.需要注册为全局组件//main.js// 封装分页器为全局组件Vue.component(Pagination.name,Pagination);2.父组件的使用分页器,需要传递相应的参数和自定义事件 <Pagination :pageNo="searchParam.pageNo" :pageSize="searchParam.pageSize" :total="searchList.total" :continues="5" @getPageNo="getPageNo"/&g原创 2022-05-25 21:17:19 · 787 阅读 · 0 评论 -
Vue里面使用swiper插件实现轮播图
1.安装插件npm i swiper@52.引入相应的js和css包在相应的组件内引入swiperimport Swiper from 'swiper'引入css文件,如果多个地方用到轮播图,就在入口文件内引入// 引入swiper的样式import 'swiper/css/swiper.css'3.在template加入轮播图的结构,注意每个版本都有点区别的 <div class="swiper-container" id="mySwiper">原创 2022-05-12 19:31:08 · 3463 阅读 · 0 评论 -
lodash插件实现防抖和节流
1.应用场景:当用户高频率的去触发事件,时间较短,内部有计算等会出现卡顿的现象2.解决方式:防抖和节流防抖使用的原理:前面所有的触发,是最后一次执行后再规定的时间内触发(只执行一次)节流使用原理:少量的触发,在规定的时间内是不会重复触发的,只有超过这个事件才会再次的触发以上都是闭包加上延时器使用方式使用lodash插件,1.下载插件lodash 2.lodash对外暴露的函数是 _import _ from ‘lodash’防抖的函数 _.debounce(原创 2022-05-11 19:32:34 · 2508 阅读 · 0 评论 -
Vue动态的加入背景
1.设置一个动态的class,什么时候要去加入背景 <li v-for="(c1,index) in categoryList" :key="c1.categoryList01Id" class="menu-item" @mouseenter="enterList(index)" :class="{cur:currentIndex==index}">2.动态展示背景的条件是currentIndex==index 的true和false,所以要去改变currentIndex,绑定鼠标的原创 2022-05-10 09:27:31 · 1617 阅读 · 0 评论 -
Vuex的使用
Vuex的基本使用1.安装vuex npm i vuex@3 (版本号为3,对应vue2,版本号为4,对应vue3)2.创建文件store文件,然后编写一个js代码 导入Vue和Vuex 准备三个对象 state{} actions{} mutations{}创建store对象并且导出 // 引入Vue import Vue from 'vue'; // 引入vuex import Vuex from 'vuex'; // 使用插件,但是这个use要在import store之前,所以放在exp原创 2022-05-04 15:13:29 · 735 阅读 · 0 评论 -
vue里面nprogress的使用
一,发送请求并且得到数据的时候使用1.使用方式:下载nprogressnpm install --save nprogress使用nprogress的一些API方法,因为是在发送请求的时候使用,所以要在请求拦截器和响应拦截器里面发送requests.interceptors.request.use(()=>{ // config:配置对象,header请求头 // 在请求拦截器里面开始进度条 nprogress.start(); return c原创 2022-05-04 14:29:33 · 1532 阅读 · 1 评论 -
Vue发送请求
1.对axios进行二次封装,创建api文件,然后创建request.js,设置请求拦截器和响应拦截器// 对axios进行二次封装import axios from 'axios'import { config } from 'vue/types/umd';// 利用axios里面的creat方法对axios进行二次封装const request = axios.create({ // 配置对象 baseURL:"/api", timeout:5000,//超时的原创 2022-05-04 11:12:53 · 4312 阅读 · 0 评论