- 博客(33)
- 收藏
- 关注
RSS订阅原创 vue3图片放大镜效果
使用vue3的核心库，获得鼠标位置，进行左右移动并且有放大效果<template> <div class="goods-image"> <div v-if="!isOutside" class="large" :style="{backgroundImage:`url(${imageList[curIndex]})`, backgroundPositionX: positionX + 'px', backgroundPositionY: posi
2021-10-10 08:00:00
638
原创 2021-10-06
自增字段以及排他思想自增字段首先我们要知道自增字段的目的，类型目的：有时后台返给我们的字段可能不够多，但我们又需要这个字段来做或者显示，这时需要我们手动添加排他思想就是把自己以及自己的兄弟其实就是整个数组都赋值为false，统一的值只把自己的属性赋值为true一般都是点击事件，在模板中可以进行传实参，下面接受<template> <ul class="test-container"> <li v-for="item in list" :key="it
2021-10-06 17:09:36
100
原创 vue3的图片懒加载自定义指令
**图片懒加载-自定义指令**核心：图片进入视口才发送网路请求(数据的url交给img.src属性)这里用到了vue3的核心包的API，然后以插件的形式注册，和vue2的自定义指令有些不同import { useIntersectionObserver } from '@vueuse/core'import defaultImg from '@/assets/images/200.png'export default { install (app) { app.directive(
2021-09-30 14:48:13
187
原创 轮播图组件
自己封装组件时，先把静态的页面写好，然后再去把静态的变为动态数据，一般简单的数据的改动用props，如果是复杂的改动，则需要用插槽，多个的话需要具名插槽,如果有多个插槽，有一个没给名字，则默认名字是default<template> <div class="box" style="height:500px"> <div class="xtx-slider " @mouseenter="mouseenter" @mouseleave="mouseleave">
2021-09-29 20:08:07
272
原创 vue3的组件通信
vue3是向vue2向下兼容的，并不是替换setup()是vue3入口函数组件通信父传子子传父provide和inject（任何组件之间）顶层用provide、底层用inject一般数据响应式数据
2021-09-26 22:01:50
271
原创 如何封装Axios
目标:基于axios封装一个请求模块，调用接口时使用添加实例化请求拦截器响应拦截器封装一个通用的请求函数 (非必须)import axios from 'axios'const instance = axios.create({// baseURL 基地址 baseURL: 'http://pcapi-xiaotuxian-front-devtest.itheima.net/', timeout: 5000//超时时间配置})//请求拦截器// 全局注册tokenins
2021-09-26 20:37:31
147
原创 在一个方法里调用新增和编辑接口
当我们编辑和新增用同一个弹框的时候，新增接口和编辑接口都是点击确定按钮这个时候我们往往需要有一个判断条件去区分到底调用哪一个接口这个条件就是通过vue调试工具，我们看看编辑的时候回显的数据和新增的数据的不同（往往是新增无id，编辑会回显，有id）可以看出新增无id，编辑有id如果是父子组件的，还要注意一个bug，因为我们回显的接口参数是父组件传来的值，，并且把这个返回值给了自己声明的这个data变量，那么在我们点击编辑的时候，我们一直得到的都是回显的这个数据，一直都会有id，那么我们就进不去新增
2021-09-18 21:47:10
1717
原创 422报错
错误解释：field:具体哪一个字段出错了*error:*这个字段错误信息解决办法：field:有可能是你没传这个字段有可能是你传的这个字段类型不对仔细看看接口需要传的具体参数是哪一个，确保自己传的正确*error:*看报错信息的内容：类型/缺失这个字段，才能精准找到错误原因，才能去修改...
2021-09-18 21:21:07
2253
原创 调用接口的返回值不是需要的
当我们需要调用接口传参首先看传参格式，是对象还是其他数据类型，其次看具体传参内容如果其中包括id(或者修改的时候必须要变得一个值)，首先需要后台给我们，通常使用插槽，因为会返给我们一个当前对象，从中可以得到id然后去配这个调用接口的参数调用接口返回的数据不是我们需要渲染的内容假如返回值不是我们需要显示的内容格式，这时无法让返回值和自己声明的值同步这时，我们需要手动去修改这个值，以达到一种同步的状态这时往往需要判断，判断条件是这个后台给我们的值然后根据具体情况手动修改这个值，再去调用接口
2021-09-18 21:04:29
273
原创 如何解决跨域
首先需要了解，何为跨域？跨域：指的是协议、 域名 端口 三者有一个不一致就会出现跨域，受同源策略的影响。所以我们需要解决这个问题？方案有以下几种cors这种主要有后端开发人员主导，开启允许我们跨域的接口...
2021-09-16 17:53:29
116
原创 如何将别人的项目进行二次开发
网上许多别人写好的项目，或者工作中，我们可能都不是从头开始的，而是别人已经写过的，我们如何开发呢？首先，克隆下来git clone gitee/gitbut的http地址先把.git删除，断开别人的链接，建立自己的仓库,最好也建立gitee网上仓库git init其次把项目的依赖包下载下来，出现这么个文件夹：node_modulesyarn然后运行，运行命令看package.json这个文件里的运行命令yarn start/npm run start 查看，了解每一个文件夹的作用
2021-09-14 22:09:14
1006
原创 自己写的组件绑定v-model语法糖
学习vue我们知道，我们想要使用v-model，都是和form表单绑定的，如果我们自己写了一个组件，如何在使用它时，让他也能拥有v-model一样双向绑定的语法糖效果呢？首先看一下官网上说的自定义组件绑定v-model首先写一个组件，并且要在父组件中使用组件记得注册，局部或者全局，或者插件注册vue插件注册不会插件注册的可以去看一下 必须要知道2件事：v-model内部绑定的属性是value，绑定的事件是inputv-model会自动做这2个：:value=’’ @input=’
2021-09-12 16:08:26
187
原创 vue中的router路由守卫
基本套路是一样的，要看具体需求，编写路由访问权限[1 ] 创建白名单列表（不需要token的）[ 2] js文件使用router和vuex对象，需要导入[ 3] 使用beforeEach方法，传入3个参数，to,from,next[4 ] 根据具体业务需求编写逻辑代码[ 4-1] 有token——>怎么做[4-2 ] 无token——>干什么// 权限控制import router from '@/router'//路由对象import store fr
2021-09-11 20:35:53
309
3
原创 将数据处理为Tree树形数据
当我们使用element组件库的Tree组件时，我们需要一个树形数据才能进行渲染const arr = [ { id: '01', name: '张大大 项目经理', pid: '', job: '项目经理' }, { id: '02', name: '小亮 产品leader', pid: '01', job: '产品leader' }, { id: '03', name: '小美', pid: '01', job: 'UIleader' }, { id: '04', name: '老
2021-09-10 21:17:18
430
原创 根据条件将一个一维数组转化为我们想要的二维数组
需求我们在导入表格时，需要的是一个二维数组，而且有时，我们只想导出部分数据问题后台返给我们的通常是一个一维数组，这个时候我们需要去处理数据前提：知道*Object.keys()和Object.values()*的用法let sourceData = [ { name: "张三", age: 18, height: 180 }, { name: "李四", age: 28, height: 160 }, { name: "王五", age: 38, height: 170 }
2021-09-10 19:58:18
320
原创 vue如何写插件
注册插件假如自己写了一个组件，需要全局使用，首先当然可以全局注册，但当我们需要有多个自己自己写的组件或者自定义指令以及方法时，就要在入口函数main.js写一次，这样的话，我们的入口文件就会非常大，不再简洁，这时我们注册插件，就像我们使用element和vant组件库一样，可以有非常多的功能如果需要注册什么功能，首先需要引入，这里我们就只注册包含一个组件的插件**注意：**你导出的是默认，导入同样用默认导入。导出的是按需导出，导入就要用按需导入{和你导出的名保持一致}插件导出，去入口文件main.
2021-09-09 15:56:21
300
原创 持久化处理token
持久化处理token为什么我们要做持久化？vuex基于内存管理的工具，内存每次刷新浏览器都会进行初始化 token丢失问题如果想要使用vuex管理数据的便捷，而且又想刷新时还不丢失 localStorage和cookie持久化缓存如何实现持久化呢？这里小编使用的是vuex和cookie专门给cookie封装了函数// 专门用来操作cookie的方法包// 内部封装繁琐的操作 参数处理 暴露函数import Cookies from 'js-cookie'// 定义一个变量c
2021-09-03 17:44:40
307
原创 数组的方法总结及用法
数组中的静态方法Array.from()作用：将程序中的伪数组转化为真正的数组注意：用构造函数访问 Array 数组中的实例方法注意：用实例对象访问 0，增加数组实例对象.push() 末尾添加值数组实例对象.unshift() 开始添加值返回值: 返回一个数组长度0，删除数组实例对象.pop() 末尾删除值数组实例对象.shift() 开头删除值返回值: 返回一个删除的数组1，翻转语法: 数组实例对象.reverse();作用: 将数组中
2021-07-22 16:38:49
1016
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人