随笔分类 - vue实战问题
摘要：一、发请求放仓库中,并存储数据 静态->api->仓库存储->组件显示 1、api/index.js中添加请求 //三级联动的接口 /api/product/getBaseCategoryList get 无参数 export const reqCategoryList=()=>requests({
阅读全文
摘要：Vuex中解决不同模块命名冲突的问题namespaced: true 在模块中配置namespaced: true 当namespaced: true如何获取使用vuex中的数据？ state //获取。不管为true为false this.$store.state.home.number1 //辅
阅读全文
摘要：Vuex中的辅助函数 mapstate-辅助函数 一、mapState 如果在一个组件中需要获取多个状态，通过this.$store.state来声明就会显得有些重复跟冗余 通过mapState这个辅助函数可以帮助生成计算属性 在store文件中定义state // store.js state:{
阅读全文
摘要：vue插件整理 一、nprogress进度条插件 【链接】 二、swiper轮播 【链接】 三、解决vuex-刷新页面state数据消失插件 vuex-persistedstate vuex-along 【链接】 四、qrcode生成二维码插件 [官网] //引入 import QRCode fro
阅读全文
摘要：swiper轮播 [swiper官网] 1、安装swiper5 npm install swiper@5 2、在需要使用轮播图的组件内导入swpier和它的css样式 //引入Swiper import Swiper from 'swiper' //引入Swiper样式 import 'swiper
阅读全文
摘要：nprogress进度条插件 需求：打开一个页面时，往往会伴随一些请求，并且会在页面上方出现进度条。 原理：在我们发起请求的时候开启进度条，在请求成功后关闭进度条 实现：所以只需要在request.js中进行配置，在页面加载时发起了一个请求，此时页面上方出现蓝色进度条，收到响应数据后关闭进度条。在拦
阅读全文
摘要：使用sass 1、下载 npm i sass node-sass sass-loader style-loader -D 2、在vue.config.js中配置 sass css: { loaderOptions: { sass: { prependData: `@import "@/assets/
阅读全文
摘要：mock插件使用 [官网] mock(模拟)数据，需要用到mock.js插件。 不会和服务器进行任何通信，拦截前端ajax请求，返回我们自定义的数据用于测试前端接口 1、下载插件mockjs npm install mockjs --save-dev 2、在src中，创建mock文件 3、准备jso
阅读全文
摘要：axios的封装 【官网】 下载 #不仅开发需要，线上程序也需要 npm install axios 一、基本使用 axios(config) axios({ url:'http://123.207.32.32:8000/home/data', method:'get', //专门针对get的参数拼
阅读全文
摘要：ref的使用 一、普通元素绑定ref ，获取dom元素 document.querySelector('.wrapper')这种方式获取dom不好。很多的地方可能都叫wrapper,不准确。 普通元素上添加属性ref <div ref="dd">ddddd</div> 获取使用 console.lo
阅读全文
摘要：将Toast组件封装成插件形式 需求：经常会有提示框，多个页面使用，但是提示框的大小、icon图标等会变化。 思路：多个页面使用，可以封装成全局组件。但是需要多次引人标签，有点繁琐。 一、创建Toast组件 <template> <div class="tip" :style="{width: ti
阅读全文
摘要：Vue.component注册全局组件 一、不在手脚架中的注册 1、全局组件注册的语法糖 Vue.component('组件标签名',构造器对象) // 1、创建全局组件构造器 const cpn1=Vue.extend({ template:` <div> <h2>我是标题2</h2> <p>我是
阅读全文
摘要：路由跳转方式 路由的跳转方式有两种形式。 一、声明式导航 router-link标签 ,可以把router-link理解为一个a标签，它 也可以加class修饰 属性：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-activ
阅读全文
摘要：分析 问题：编程式路由跳转到当前路由（参数不变）。多次执行会出现NavigationDuplicated警告错误？参考链接 声明式导航没有这个问题？vue-router底层已经处理好。 为什么编程式导航进行路由跳转，会出现这个警告错误？？ "vue-router": "^3.5.3"：最新的vue-
阅读全文
摘要：一、路由的跳转方式 声明式导航：router-link，要有to属性 编程式导航 ：$router.push|replace实现，可以处理一些业务 二、路由传参，参数有几种呢？ params参数 query参数 2.1.params参数 1、动态路由时传参 属于路径当中的一部分，在配置路由的时候，需
阅读全文
摘要：一、业务场景 一个Footer组件，【首页、搜索页中显示，登录页、注册页中不显示】。 显示隐藏组件： v-if|v-show，、使用v-show，因为v-if会频繁的操作dom元素消耗性能，v-show只是通过样式将元素显示或隐藏 二、实现 1、通过$route身上的路由信息来判断路径（不好） <!
阅读全文
摘要：问题：在input上添加@keyup.enter="goSearch"，首次点回车按钮没反应。 <form action="###" class="searchForm"> <input type="text" id="autocomplete" class="input-error input-x
阅读全文
摘要：vuex-刷新页面state数据消失 一、Vuex 一个状态管理的插件，可以解决不同组件之间的数据共享和数据持久化，解决组件之间同一状态的共享问题。 Vuex优势：相比sessionStorage，存储数据更安全，sessionStorage可以在控制台被看到。 Vuex劣势：在刷新页面后，vuex
阅读全文
摘要：vue性能优化方法 1、路由懒加载的设置 const Home=()=>import('@/components/Home') 2、keep-alive 缓存页面 对组件进行缓存，从而节省性能。 <keep-alive exclude="Profile,User"> <router-view/> <
阅读全文
摘要：vue-virtual-scroller-list虚拟滚动 一个虚拟滚动组件，用来处理非常长的或者无限滚动的列表。 通过不渲染可视区域以外的内容，显示虚拟的滚动条来 将可视区域范围内的条目渲染出来，用户滚动，会处理滚动行为(虚拟的滚动条)，动态重新执行更新渲染。dom复用，不需要消耗太多资源，滚动时
阅读全文
