VUE项目
啵啵怪_
这个作者很懒,什么都没留下…
展开
-
el-input-number 添加单位
el-input-number添加单位原创 2023-09-14 15:50:20 · 1665 阅读 · 1 评论 -
VUE项目--封装组件分页器
一、封装分页器组件的时候:需要知道哪些条件?分页器组件需要知道我一共展示多少条数据 ----total【100条数据】每一个需要展示几条数据------pageSize【每一页3条数据】需要知道当前在第几页-------pageNo[当前在第几页]需要知道连续页码数【起始数字、结束数字:连续页码数市场当中一般5、7、9】奇数,对称好看 continues二、实现在@/components/Pagination/index.vue:<template> <div cla原创 2022-02-23 17:37:39 · 1177 阅读 · 0 评论 -
VUE项目--Search组件
一、拆分组件二、写api,获取后台数据// 获取搜索模块数据 地址:/api/list 请求方式:post 参数:需要带参数// 当前接口(获取搜索模块数据),给服务器传递一个默认参数【至少是一个空对象】export const reqGetSearchInfo = (params) => requests({ url: "/list", method: "post", data: params})三、Vuex存储数据,模块化管理import { reqG原创 2022-02-23 17:23:24 · 2062 阅读 · 0 评论 -
VUE项目--抽取公共组件之轮播图
Floor与listContainer组件中轮播图功能一样,可以抽取成公共组件在components文件夹下创建/Carousel/index.vueListContainer组件中的swiper在watch中,Floor组件中的swiper在mounted中,需要统一,抽取组件需要代码一样将Floor组件中的swiper放在watch中,但是Floor组件中的数据没有发生变化,watch监听不到———— 使用 immediate: true, //立即监听 watch: { l原创 2022-01-28 17:54:53 · 663 阅读 · 0 评论 -
VUE项目--Floor组件
开发Floor组件Floor组件它被复用的1. Floor组件获取mock数据,发请求的action书写在哪里?派发action应该是在父组件的组件中的mounted(挂载完毕生命周期函数)中书写,因为父组件需要通知Vuex发请求,父组件获取到mock数据,通过v-for 遍历生成多个floor组件,因此达到复用作用。在父组件(home文件夹下的index.vue)中: //Floor组件内部没有发请求,数据是父组件传递过来的 <Floor v-for="(floor原创 2022-01-28 17:37:17 · 1030 阅读 · 0 评论 -
VUE项目--轮播图
1. 安装(版本5较稳定)npm install swiper@5 2.1 引入在需要用到轮播图的组件(ListContainer)中引入swiper import Swiper from 'swiper'2.2 引入样式因为其他地方也需要轮播图,也需要swiper的样式,所以在入口文件main.js中统一引入 import 'swiper/css/swiper.css'3. 初始化swiper实例3.1 在哪里初始化 ?初始化swiper实例之前,页面中的节点(结构)必须完整原创 2022-01-28 17:17:03 · 1940 阅读 · 0 评论 -
VUE项目--mock数据
1. 安装依赖包mockjsnpm install --save mockjs2. 在src文件夹下创建mock文件夹3. 模拟步骤准备JSON数据——banner.json把mock数据需要的图片放置于public文件夹中在mock文件夹中创建一个server.js文件import Mock from 'mockjs'// webpack默认对外暴露:图片、JSON数据格式import banner from './banner.json'Mock.mock("/mock/ba原创 2022-01-28 16:52:23 · 1034 阅读 · 0 评论 -
VUE项目--TypeNav三级联动性能优化
项目中:home切换到search或者search切换到home,会发现组件在频繁的向服务器发请求,获取三级联动的数据进行展示。项目中如果频繁的向服务器发请求,很耗性能的,因此需要进行优化。为什么会频繁的向服务器发请求获取三级联动的数据???因为路由跳转的时候,组件会进行销毁的【home组件的created:再向vuex派发action,因此频繁的获取三级联动的数据】,切换页面要重新进行挂载,重新请求数据。解决把原来页面中的请求放在App中 // 组件挂载完毕,向服务器发请求 .原创 2022-01-23 15:59:22 · 611 阅读 · 0 评论 -
VUE项目--路由的跳转与传参
路由跳转有两种方式:声明式导航 <router-link to="/home">News</router-link>编程式导航 this.$router.push({ name: 'xiangqing', params: { id: xxx, title: xxx } })第一种声明式导航: 在本项目中为什么使用router-link组件的时候,会出原创 2022-01-23 15:50:57 · 279 阅读 · 0 评论 -
VUE项目--防抖与节流
正常情况下事件触发非常频繁,而且每一次的触发,回调函数都要去执行(如果时间很短,而回调函数内部有计算,那么很可能出现浏览器卡顿)防抖前面的所有的触发都被取消,最后一次执行在规定的时间之后才会触发,也就是说如果连续快速的触发,只会执行最后一次节流在规定的间隔时间范围内不会重复触发回调,只有大于这个时间间隔才会触发回调,把频繁触发变为少量触发如何实现?在创建项目时,modules里包含了loadshlodash插件:里面封装函数的防抖与节流的业务【闭包+延迟器】lodash函数库对原创 2022-01-23 15:16:28 · 499 阅读 · 0 评论 -
VUE项目--Vuex模块化状态管理组件
Vuex原理图1. 概念在Vue中实现集中式状态(数据)的管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信2. 何时使用多个组件需要共享数据时;或者由于项目体积比较大,你向服务器发请求的接口过多,服务器返回的数据也会很多,如果还用以前的方式存储数据,导致vuex中的state数据格式比较复杂。采用vuex模块式管理数据本项目中home、search等四个组件需要模块化管理,创建如图所示目录:3.原创 2022-01-22 22:04:41 · 469 阅读 · 0 评论 -
VUE项目--nprogress进度条
安装npm install --save nprogress引入在src/api/requests.js文件中引入// 引入进度条import nprogress from 'nprogress'// 引入进度条的样式import 'nprogress/nprogress.css'基本用法nprogress.start(); //开始nprogress.done(); //结束在requests.js中–——在请求拦截器和响应拦截器中使用:// 请求拦截器:在发送请求之前,原创 2022-01-22 21:01:42 · 486 阅读 · 0 评论 -
VUE项目--axios二次封装、接口统一管理、跨域
1. axios二次封装为什么需要进行二次封装axios ?请求拦截器:可以在发送请求之前处理一些事情;响应拦截器:当服务器返回数据以后可以处理一些事情;在src/api下创建requests.js文件(请求网络数据):// 对axios进行二次封装import axios from 'axios'// 1. 利用axios对象的方法create,去创建一个axios案例// 2. requests就是axiosconst requests = axios.create({原创 2022-01-22 20:53:05 · 1052 阅读 · 0 评论 -
VUE项目--路由
1. 项目路由分析项目是上中下结构路由组件:Home首页路由组件、Search路由组件、login登录组件、Register注册页面非路由组件:Header、Footer【首页,搜索页】,登录页、注册页面没有2. 非路由组件Header与Footer业务项目开发流程拆分组件获取服务器的数据动态展示完成相应的动态业务逻辑创建组件Tips:创建组件的时候:组件结构 + 组件的样式 + 图片资源采用的是less样式,浏览器不识别,需要通过less、less-loader(5版本)原创 2022-01-18 22:37:40 · 1091 阅读 · 0 评论 -
VUE项目--基本介绍
1. 脚手架文件结构--node_modules:项目依赖文件夹--public: 放置一些静态资源(图片) --favicon.ico:页签图标 --index.html:主页面 注意:放在public文件夹中的静态资源,webpack进行打包的时候,会原封不动打包到dist文件夹中--src: 程序员源代码文件夹 --assests:放置静态资源(一般放置多个组件共用的静态资源),注意:放置在assets文件夹里面静态资源,在webpack打包的时候,webpack会把惊天资原创 2022-01-18 21:06:56 · 1215 阅读 · 0 评论