- 博客(84)
- 收藏
- 关注
RSS订阅原创 vue3.2 中利用自定义指令和 函数调用式创建一个loading组件
【代码】vue3.2 中利用自定义指令和 函数调用式创建一个loading组件。
2022-10-10 10:32:28
452
原创 vue3.2 setup语法糖中给组件添加name 属性
之前在3.2中添加name 属性 需要新增加一个。然后在vite.config.js 中修改。
2022-10-10 09:55:02
497
原创 hooks进阶
hooks进阶useState - 回调函数的参数使用场景参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用语法const [name, setName] = useState(()=>{ // 编写计算逻辑 return '计算之后的初始值'})语法规则回调函数return出去的值将作为 name 的初始值回调函数中的逻辑只会在组件初始化
2022-05-07 09:29:13
177
原创 hooks 基础
hooks 基础hooks概念什么是hooks？Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子”React体系里组件分为 类组件 和 函数组件经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生注意点:有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以
2022-05-04 10:20:18
300
原创 react组件通信
react组件通信为什么要组件通信组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state）组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信组件通信的形式父子关系 - 最重要的兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信其它关系 - redux / 基于hook的方案父传子父组件提供要传递的数据 - stat
2022-04-29 10:07:45
307
原创 react组件进阶
react组件进阶children 属性children属性是什么表示该组件的子节点，只要组件内部有子节点，props中就有该属性children可以是什么普通文本普通标签元素函数JSXprops校验对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误，有一个点很关键 - 组件的使用者可能报错了也不知道为什么安装属性校验包：yarn add prop-types导入prop-types 包
2022-04-28 16:40:45
350
原创 react组件基础
组件基础组件概念组件是 React 的一等公民，使用 React 就是在用组件组件表示页面中的部分功能组合多个组件实现完整的页面功能特点：可复用、独立、可组合组件形式有两种：函数组件和类组件函数组件使用 JS 的函数（或箭头函数）创建的组件，就叫做`函数组件function Hello() { return <>我是函数组件</>;}function App() { return ( <div className="App">
2022-04-26 14:58:30
244
原创 react基础
react基础react介绍什么是react一个专注于构建用户界面的 JavaScript 库，和vue和angular并称前端三大框架，不夸张的说，react引领了很多新思想，世界范围内是最流行的js前端框架react有什么特点声明式UI（JSX）：写UI就和写普通的HTML一样，抛弃命令式的繁琐实现组件化：组件是react中最重要的内容，组件可以通过搭积木的方式拼成一个完整的页面，通过组件的抽象可以增加复用能力和提高可维护性一次学习，跨平台编写：react既可以开发web应用也可以使用同
2022-04-22 11:52:01
1050
原创 vue3 废弃插槽用法
之前在vue2.6的时候使用作用域插槽可以通过slot-scope来获取作用域插槽的值在vue3.2 获取作用域插槽的值方式更改定义插槽 <slot name="content" :column="column" :text="text" :record="record"></slot>使用插槽 <template #content="{ column, text, record }"> </template>...
2022-04-19 10:21:15
849
原创 js 将多张图片合并成一张图片
废话不多说，直接上代码<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
2022-04-08 12:31:27
6495
原创 认识pinia
认识pinia介绍pinia介绍piniapinia是新一代的vue状态管理工具，具有如下特点完整的 ts 的支持；足够轻量，压缩后的体积只有1kb左右;去除 mutations，只有 state，getters，actions；actions 支持同步和异步；代码扁平化没有模块嵌套，只有 store 的概念，store 之间可以自由使用，每一个store都是独立的无需手动添加 store，store 一旦创建便会自动添加；支持Vue3 和 Vue2安装piniayarn add
2022-04-06 11:42:48
1224
1
原创 pinia 数据持久化处理
1.下载插件pinia-plugin-persist2. store下的index.jsimport { createPinia } from 'pinia'//pinia 持久化插件import piniaPluginPersist from 'pinia-plugin-persist'const store = createPinia()store.use(piniaPluginPersist)export default store在写的store.js文件下增加配置项 默认为
2022-03-24 15:07:10
4548
8
原创 vite 构建的vue项目如何实现批量注册组件
最近在用vite+vue3.2构建移动端开发模板发现之前的批量注册组件方案行不通，原因是因为之前使用了require来引入文件夹vite中不支持require经过了一番翻看文档后发现vite提供了import.meta.globEager这个方法可以拿到文件夹下的所有文件信息对之前的代码进行了改造最终成功//获取public目录下所有的文件信息const modulesFiles = import.meta.globEager('./public/*.vue')const pathList.
2022-03-24 11:47:37
1306
原创 把图片转换为圆形
生成缩略图const thumb_image = (img, width, height) => { if (typeof img !== 'object') { var tem = new Image(); tem.src = img; img = tem; } var _canv = document.createElement('canvas'); _canv.width = width; _canv.he
2022-03-22 17:41:34
677
原创 如何使用vite 构建一个vue3 + ts的项目
第一步全局安装vite第二步npm init vite@latestyarn create vite运行之后 输入项目名称 回车选择vue 回车选择vue +ts然后下载依赖下载完成后执行 yarn dev
2022-03-21 09:46:40
658
原创 使用promise.all 循环发送ajax请求 保证执行顺序
项目中有个批量签署功能，需要循环获取pdf文件 发现直接发送ajax请求 因为返回的顺序不同，导致签署有问题，遂想到使用promise.all来解决问题 getPdfList() { const paramslist = this.list.map((item) => { return { billsType: this.signObj.flag, drId: item.drId, signFileId: ite
2022-03-16 09:15:06
943
原创 使用html和js 实现一个登录验证码小demo
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>发送验证码</title> <style> .contain { width: 400px; height: 200px;
2022-03-03 17:40:35
425
原创 判断字符串是否是base64字符串
function isBase64(str) { if (str === '' || str.trim() === '') { return false; } try { return btoa(atob(str)) == str; } catch (err) { return false; ..
2022-03-02 16:55:51
1519
原创 上传文件 并返回base64 demo
<!doctype html><html><head> <meta charset="utf-8"> <meta name="description" content="在线Base64生成转换小工具，可以实现任意文件转Base64 Data-URI编码，文件往页面中一拖即可。" /> <meta name="keywords" content="base64, FileReader, readAsDataURL
2022-03-01 09:26:11
133
转载 后端返回 图片或者文件路径 前端怎么转成base64
最近碰见一个需求 后端返给图片路径，但是在入参的时候需要转为base64思索了一天大致分为两种方法方法一：利用ajax 请求后端返的路径 返回类型变为blob 类型function getBase64(imgUrl, callback) { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", i
2022-03-01 09:24:48
2073
原创 使用路径别名@的时候可以提示路径。
jsconfig.json{ "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"], } }, "exclude": ["node_modules", "dist"]}
2021-12-24 11:50:02
520
原创 【vue3.0】依赖注入（provide和inject）
使用场景：有一个父组件，里头有子组件，有孙组件，有很多后代组件，共享父组件数据。父组件<template> <div id="app"> <h1>父组件</h1> <p>{{ money }}</p> <Son :money="money" @changeMoney="changeMoney"></Son> </div></template><
2021-12-24 11:16:33
463
原创 【vue3.0学习】父传子 子传父
父传子<template> <div id="app"> <h1>父组件</h1> <p>{{ money }}</p> <Son :money="money"></Son> </div></template><script>import { ref } from "@vue/reactivity";import Son from "
2021-12-24 11:06:45
1254
原创 【vue3.0学习】计算属性 侦听器
computed函数，是用来定义计算属性的，计算属性不能修改。<template> <div id="app"> <div>小李今年:{{ age }}岁</div> <br /> <div>小李明年:{{ newAge }}岁</div> </div></template><script>import { computed, ref } from
2021-12-24 10:45:38
107
原创 【vue3.0学习】ref 和torefs 函数
ref 常用于简单数据类型定义为响应式数据再修改值，获取值的时候，需要.value在模板中使用ref申明的响应式数据，可以省略.value<template> <div id="app"> 姓名: {{ name }} <br /> 年龄: {{ age }} <br /> <button @click="editUser">更新人员</button> </div>
2021-12-24 10:28:37
583
原创 【vue3.0学习】 reactive函数 toRef函数
reactive是一个函数，它可以定义一个复杂数据类型，成为响应式数据。演示代码<template> <div id="app"> 姓名: {{ user.name }} <br /> 年龄: {{ user.age }} <br /> <button @click="editUser">更新人员</button> </div></template><
2021-12-24 10:07:10
248
原创 【vue3.0学习】生命周期
回顾vue2.0生命周期beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedvue3.0生命周期setup 创建实例前onBeforeMount 挂载DOM前onMounted 挂载DOM后onBeforeUpdate 更新组件前onUpdated 更新组件后onBeforeUnmount 卸载销毁前onUnmounted 卸载销毁后验证代码<temp
2021-12-24 09:37:54
446
原创 【vue3.0学习】setup()的使用
setup()函数使用细节setup 是一个新的组件选项，作为组件中使用组合API的起点。从组件生命周期来看，它的执行在组件实例创建之前vue2.x的beforeCreate执行。这就意味着在setup函数中 this 还不是组件实例，this 此时是 undefined在模版中需要使用的数据和函数，需要在 setup 返回。验证代码<template> <div id="app"></div></template><scrip
2021-12-23 17:47:58
538
原创 疫情物资项目完美收工
历时两周完成了前端vue 部分在此感谢作者仓库地址 附带后端代码和 sql代码地址学到不少东西 批量注册组件 批量注册自定义指令rbac 权限设计思想作者源代码地址
2021-12-19 19:50:17
179
原创 vue 批量注册组件
在components 文件夹建一个index.js 加入如下代码const importFn = require.context('/', false, /\.vue$/)// 全局批量注册components下所有组件export default { install (app) { importFn.keys().forEach(path => { const component = importFn(path).default app.component
2021-12-19 19:09:01
81
原创 vue如何自动注册自定义指令
创建文件夹 目录结构如下index.js 如下import Vue from 'vue'const files = require.context('./public', false, /.+\.js$/)// 按模块引入// files.keys(): 打印出来为['./focus.js','/loadmore.js']files.keys().forEach(fileName => { const directiveConfig = files(fileName) // 获取
2021-12-19 19:06:39
122
原创 封装返回顶部组件 vant-ui
vant居然没有返回顶部组件没办法自己封装一个<template> <div> <van-button color="rgba(0,0,0,.3)" round class="backTop" size="mini" @click="backTop" v-show="scrollType" > <van-icon class="icon-backTop" nam
2021-12-17 14:46:58
1919
原创 如何在vue项目中使用less
在使用less 变量的时候报错了原因是未安装style-loader解决方案在终端安装loadervue add style-resources-loader安装完会创建vue.config.js修改成自己公共less的路径const path = require('path') // 自己添加module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less',
2021-12-17 14:43:26
168
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人