vue
关注
分享
扫一扫
文章平均质量分 52
麦多馅饼
满洲里有象
展开
-
vue3结合vant手写一个隐藏式菜单
vue3结合vant手写一个隐藏式菜单原创 2022-07-21 15:15:58 · 1260 阅读 · 1 评论 -
vue3手写一个简单的触底刷新
利用addEventListener手写一个简单的触底刷新原创 2022-07-21 14:37:14 · 1884 阅读 · 2 评论 -
vue父子组件传参、兄弟组件传参、页面跳转传参
1、父组件向子组件传参父组件向子组件共享数据需要使用自定义属性// 父组件<template> <div> // 使用子组件 <son :msg="message" :userInfo="userInfo"></son> </div></template><script>// 引入子组件import son from './test'export default { na原创 2022-03-26 21:33:43 · 3075 阅读 · 0 评论 -
封装分页器全局组件
1、在components文件夹下创建Pagination文件夹，里面装分页器组件<template> <div class="pagination"> <button :disabled="pageNo == 1" @click="$emit('getPageNo', pageNo - 1)">上一页</button> <button v-if="startNumAndEndNum.start > 1" @cli原创 2022-03-20 22:06:21 · 774 阅读 · 0 评论 -
iconfont矢量图的链接使用
1、挑选矢量图标加入购物车2、把购物车中的图标添加到项目当中3、点击生成链接，并且在public文件夹下的index.html文件中全局引用注意：//at.alicdn.com/t/font_3262462_j1yq2h7ic79.css路径前要加上https域名<!DOCTYPE html><html lang=""><head> <meta charset="utf-8"> <meta ht...原创 2022-03-20 21:51:42 · 970 阅读 · 2 评论 -
mockjs模拟数据+Vuex
Mock.js可以模拟请求，获取数据1、在项目根目录下载mockjsnpm install --save mockjs2、在项目src文件夹中创建mock文件夹3、将准备好的JSON数据放入JSON文件中注意：JSON数据不允许有空格，最好格式化好文档，否则容易报错[ { "id": "1", "imgUrl": "/images/banner1.jpg" }, { "id": "2", "imgUrl": "/images/...原创 2022-03-20 20:57:18 · 1052 阅读 · 0 评论 -
关于导航路由的其他细节
声明式导航：router-link编程式导航：push|replace1、在三级联动等遍历出许多标签，点击标签跳转如果使用声明式导航router-link，可以实现路由的跳转与传递参数，但是需要注意，此方法会出现卡顿现象。因为router-link是一个组件，当服务器的数据返回之后，会循环出很多的router-link组件。若创建1000+ 组件实例的时候，将一瞬间创建1000+多的内存，导致出现卡顿现象。所以最好的解决方法是使用编程式导航+事件委派。...原创 2022-03-20 19:58:45 · 556 阅读 · 0 评论 -
防抖与节流
在进行窗口的resize、scroll，输入框内容校验等操作时，如果事件处理函数调用的频率无限制，会加重浏览器的负担，导致用户体验非常糟糕。此时我们可以采用debounce（防抖）和throttle（节流）的方式来减少调用频率，同时又不影响实际效果。函数防抖：在规定的时间间隔范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能原创 2022-03-12 22:42:06 · 133 阅读 · 0 评论 -
动态改变背景颜色
第一种，用CSS写 //第一种，用CSS写的 //.item:hover{ // background-color: skyblue; //}第二种，用JS写 <div class="container"> <!-- 事件委派|事件委托 --> <div @mouseleave="leaveIndex"> <h2 class="all原创 2022-03-12 21:59:08 · 786 阅读 · 0 评论 -
vuex模块式开发
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。统一配置管理不仅有助于我们的协同开发，也有利于提高代码的可读性。安装npm install --save vuex在src目录下新增store文件夹，然后新增modules文件夹，存放每个模块的状态管理文件，然后新增action.js，getters.js，index.js，mutation.js，types.js每个js含义如下t原创 2022-03-12 21:48:52 · 1634 阅读 · 0 评论 -
nprogress进度条的使用
安装插件npm install --save nprogress在src文件夹下request文件下使用// 对于axios进行二次封装import axios from "axios";// 引入进度条import nprogress from 'nprogress';// 引入进度条样式import "nprogress/nprogress.css"// start： 进度条开始 done：进度条结束// 1:利用axios对象的方法create,去创建一个axios原创 2022-03-12 18:00:24 · 1457 阅读 · 0 评论 -
axios二次封装以及API接口统一管理
前端向服务器发送请求，使用的方法有很多：XMLHttpRequest、fetch、JQ、axios二次封装axios是为了请求拦截器、响应拦截器。请求拦截器：可以在发送请求之前可以处理一些业务；响应拦截器：当服务器数据返回以后，可以处理一些事情。安装axiosnpm install --save axios习惯与src的api下放置请求文件在request.js文件下对axios进行二次封装// 对于axios进行二次封装import axios from "a原创 2022-03-12 17:29:32 · 3693 阅读 · 0 评论 -
页面组件拆分（Home为例）
在大型的项目中，页面过于复杂，代码就不能全部塞在一个文件中，这样也不利于维护。所以需要把页面进行模块化拆分组件。先把静态页面完成 拆分出静态组件 获取服务器的数据进行展示 动态业务全局组件有些组件在多个页面中会使用到，那就需要把组件拆在components目录下，在main.js中，注册成全局组件，方便使用。// 三级联动组件---全局组件import TypeNav from '@/components/TypeNav'// 第一个参数：全局组件的名字 第二个参数：哪一个原创 2022-03-12 17:17:13 · 758 阅读 · 0 评论 -
重写push与replace方法
编程式路由跳转到当前路由（参数不变），多次执行会抛出NavigationDuplicated的错误警告路由跳转有两种形式：声明式导航、编程式导航声明式导航没有这类问题，因为vue-router底层已经处理好了为什么编程式导航进行路由跳转的时候，就有这种警告错误？因为“vue-router”：“^3.5.3“：最新的vue-router引入promise通过底部的代码，给push方法传递相应的成功、失败的回调函数，可以捕获到当前错误，解决报错。this.$router.push(原创 2022-03-12 17:01:14 · 2469 阅读 · 4 评论 -
前端配置了跨域代理，却还是报错
前端配置了跨域代理，反反复复检查了配置文件，也确保配置文件修改过后是保存重启过项目的却还是报错，如下：Proxy error: Could not proxy request /api/product/getBaseCategoryList from localhost:8080 to http://39.38.123.211.See https://nodejs.org/api/errors.html#errors_common_system_errors for more informatio原创 2022-03-09 22:24:09 · 4769 阅读 · 0 评论 -
npm install --save vuex 安装时报错
npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR!npm ERR! While resolving: app@0.1.0npm ERR! Found: vue@2.6.14npm ERR! node_modules/vuenpm ERR! vue@"^2.6.11" from the root projectnpm ERR!npm ERR! Could not resolve.原创 2022-03-07 21:57:58 · 3080 阅读 · 1 评论 -
项目的路由vue-router
什么是前端路由？路由的概念来源于服务端，在服务端中路由描述的是 URL 与处理函数之间的映射关系。在 Web 前端单页应用 SPA(Single Page Application)中，路由描述的是 URL 与 UI 之间的映射关系，这种映射是单向的，即 URL 变化引起 UI 更新（无需刷新页面）。如何实现前端路由？要实现前端路由，需要解决两个核心： 如何改变 URL 却不引起页面刷新？ 如何检测 URL 变化了？ 下面分别使用 hash 和 history 两种实现方式原创 2022-02-19 22:40:29 · 1096 阅读 · 0 评论 -
使用vue-cli脚手架初始化Vue项目下的项目结构
vue-cli是Vue 提供的一个官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需几分钟即可创建并启动一个带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。使用vue-cli有以下几大优势：vue-cli是一套成熟的Vue项目架构设计，会跟着Vue版本的更迭而更新 vue-cli提供了一套本地的热加载的测试服务器 vue-cli集成了一套打包上线的方案，可使用webpack或Browserify等构建工具创建项目有两..原创 2022-02-19 21:17:20 · 544 阅读 · 0 评论 -
WebStorm设置代码模板
注：本人的是windows系统，2021.2版本。但是其实版本不同，操作也是大同小异。第一步，打开setting设置第二步：点击Editor，然后点击Live Templates，再点击右上方的加号Live Template（代表创建具体的模板）Template Group（代表创建模板组）选中模板组，点击Live Template创建具体的代码模板 Abbreviation（模板的缩写） Description（模板的描述） Template.原创 2022-02-17 22:48:04 · 3251 阅读 · 1 评论 -
报错in ./node_modules/vue-router/src/util/path.jsModule parse failed: Unexpected token (4:10)You may
ERROR Failed to compile with 1 error 下午10:06:45 error in ./node_modules/vue-router/src/util/path.jsModule parse ..原创 2022-02-17 22:13:17 · 1998 阅读 · 0 评论