纯前端）实现对上传的pdf，进行盖章或签名后，并将处理后的pdf下载下来 1 实现pdf上传与预览 2 手动签名，签名与印章的拖拽移动，实现在pdf上盖章与签名的效果 3 将盖章或签名的pdf文件进行绘制与下载 pdfh5 实现pdf文件的在线预览 vue-esign 在画布上面签名，生成签名图片 html2canvas html绘制图片 jspdf 生成下载pdf
前言 Vue Router是Vue框架中非常重要的一个功能。 目标 1 单页面应用与多页面应用的区别； 2 vue-router的具体实现方法； 3 路由模式有哪几种，有什么区别； 4 如何进行路由守卫与路由缓存； 一 路由的概念 概念 Vue Router是Vue提供的路由管理器。将组件与路由一一对应起来，这种对应关系就路由。 Vue是一个典型的SPA单页面应用框架。SPA单页面是指网站只
有一个`无缝轮播+滚轮控制`的需求，找了很多的方法发现都没办法完美的实现这种效果。 用原生的js实现不是无缝滚动 用无缝滚动插件实现，发现pc端无法实现滚轮控制
vue中有很多的指令像v-on、v-model、v-bind等是我们开发中常用的 常用指令 v-bind 单向绑定解析表达式 v-model 双向数据绑定 v-for 遍历数组/对象/字符串 v-on 绑定事件监听，可简写为@ v-show 条件渲染（动态控制节点是否存展示） v-if 条件渲染（动态控制节点是否存存在） v-else 条件渲染（动态控制节点是否存存在） 不常用指令
最新在写项目的时候遇到了一个在a域名设置cookie，b域名要用这个cookie去访问的问题，如何让二级域名共享cookie呢？ 现在有两个二级域名a.jb.com、b.jb.com,都在一级域名：www.jb.com下 在a.jb.com域名下的项目里设置cookie 1、方法一：直接用dom设置 document.cookie='Token'+ "=" + this.t
以前在做这部分内容的时候，都是后端直接给我说我需要出来那些东西，后来接触了一个没有接过js-sdk的后端之后，发现自己对这些接入流程还不是很懂于是就整理梳理了一下。本文主要从js域名配置到接入一整个完整的流程，前后端的工作分工也明确标注了。
前言 目标 1 接口调用方式有哪些 2 如何调用接口 graph TD A[接口调用方式] --> B[xhr] A --> C[jquery] A --> D[axios] A --> E[fetch] A --> F[vue-resource] 一、xhr xhr是一个小巧的JavaScript库，它对原生的XMLHttpRequest进行了封装，使你在浏览器
前言 .... 目标 1 初始化node文件 2 将打包文件通过node发布到本地 3 系列文件 【node】创建本地接口 一 node方式 1 在新建一个空的文件夹node 进入空文件夹在，文件夹的地址栏输入cmd回车，会自动跳转到命令行工具里 2 配置初始化文件 在命令行输入命令npm init，生成package.json文件 npm init 在node文件夹下看到pack
1 Cannot set property 'errorHandler' of undefined 前端报错 Uncaught TypeError: Cannot set property 'errorHandler' of undefined 样例分析 errorHandler 是vue.config对象上的属性 但在使用Vue.config未初始化为对象，导致操作报错。 app.confi
前言 目标 了解script_setup的有哪些优点 掌握script_setup的语法 graph LR A[script_setup] --> B[1 基本语法] A --> C[2 绑定后可直接在模版中使用] A --> D[3 动态组件] script_setup 1.基本语法 <script setup> 是在单文件组件 (SFC) 中使用组合式
前言 目标 为什么要使用Pinia？ 如何创建和引入Pinia 掌握Pinia的使用方法 graph LR A[Pinia] --> B[1 为什么你应该使用 Pinia] A --> C[2 pinia的引入与使用] A --> D[3 用pinia创建购物车] 1 为什么你应该使用 Pinia？ Pinia的诞生 起始于 2019 年 11 月左右的一次实验，其目
前言 目标 掌握如何创建TS项目 TS配置文件tsconfig.json 了解React中的常用类型 graph LR A[项目使用TS] --> B[1 使用CRA创建支持TS的项目] A --> C[2 TS配置文件tsconfig.json] A --> D[3 React中的常用类型] 一 使用CRA创建支持TS的项目 1.创建项目并启动 （1）全局安装 n
前言 我们都知道TS提供了类型，才有了类型保护机制和代码提示等机制。但是在很多使用第三方库中你会发现，他们机会都有TS的类型，这些类型是怎么来的呢？这就要提到类型声明文件了。 目标 了解类型声明文件.d.ts与.ts文件的区别 如何使用类型声明文件 掌握如何创建自己的类型声明文件 graph LR A[类型声明文件] --> B[1 类型声明文件.d.ts与.ts文件的区别] A
前言 目标 ... graph LR A[高级类型] --> B[1 class类] A --> C[1111] 1 class类 TS中的class，不仅提供了class语法，也作为一种类型存在 1.1 实例属性 给class添加实例成员 1.2 构造函数 构造函数语法规则： 成员初始化(比如，age:number)后，才可以通过this.age来访问实例成员 需要为构造函
前言 TS是JS的超集，TS提供了JS的所有功能，并增加了：类型系统，并且TS会检查并显示标记出代码中的错误。 目标 1 了解并掌握TS的类型注解 2 JS与TS的类型分别有哪些？ 3 掌握TS各种类型的使用方法 graph LR A[TS常用类型] --> B[1 TS类型注解与基础类型概述] B --> C[类型注解] B --> D[基础类型概述] A -->
前言 目标 1 js与ts的区别 2 如何配置ts环境 graph LR A[TS] --> B[1 TypeScript介绍] A --> C[2 TS开发环境配置] 1 TypeScript介绍 1.1 ts为什么要加类型支持 相信很多开发人员再使用JS的过程中，都遇到过打包后的JS代码报错（类型错误问题），这种bug是非常花费时间的，严重影响了开发效率。 对于JS来说：J
前言 目标 1 了解fragment组件 2 掌握Teleport组件的用法 3 掌握Suspense组件的用法 4 setup什么情况下可以使用async 5 Vue3 其他的变化 graph LR A[新的组件] --> B[1 Fragment组件] A --> C[2 Teleport组件的用法] A --> D[3 Suspense组件的用法] E[Vue3 其他
前言 目标 掌握以下api的用法 graph LR A[api] --> B[1 shallowRef与shallowReactive的用法与区别] A --> C[2 readonly与shallowReadonly的用法与区别] A --> D[3 toRaw与markRaw用法与区别] A --> E[4 customRef的用法] A --> F[5 p
前言 目标 1 toRef与toRefs的用法 2 toRef与ref的不同 toRef与toRefs的用法 看一下官方给的解释 也是就当定义const name = toRef(person,'name') 改变name = '李四'的值，person中的name值也会同步变化 toRef 只能处理一个对象中的一个属性 <h2>{{ person }}</h2>
前言 目标 1 什么是自定义hook函数 2 hook函数的基本用法 Hook 什么是hook 本质上是一个函数，把setup中使用的 Composition Api进行封装 有点类似于vue2.0中的mixin 优点：复用代码，让setup中的逻辑更清晰易懂 hook的基本用法 在hook文件夹下，封装一个usePoint.js方法 usePoint用来获取鼠标点击时的坐标 impor
前言 目标 1 vue3生命周期用法 2 vue3与vue2的生命周期的区别 生命周期 Vue2.0与Vue3.0生命周期不同之处 对比Vue2.0,Vue3.0第一步就会配置并挂载el,后续不会再去判断el 是否配置 Vue3.0中的setup相当于Vue2.0生命周期中的beforeCreate和created beforeUnmount与unmounted相当于Vue2.0中的be
前言 目标 1 watch的监听ref与reactive定义的响应式数据 2 watchEffect的用法 graph LR A[监听] --> B[watch用法] B --> E[监听ref定义的的响应式数据] B --> C[监听reactive定义的响应式数据] A --> D[watchEffect的用法] 一 watch用法 引入watch impor
前言 ... 目标 1 computed的用法 computed的用法 computed 计算属性用法与vue2的类似 引入 import { reactive,computed } from 'vue' 使用 setup(){ let person = reactive({ firstName:'张', lastName:'
前言 在前端开发过程中，最为注重的就是数据的即时性和响应。但随着技术的发展vue2.0的数据响应方式，不能响应属性的新增和删除、以及通过数组下标修改界面不会自动更新等弊端逐渐显露。vue3.0为开发者提供了更为便捷的数据响应方式，接下来就让我们一起去探索一下。 目标 1 基本数据类型与复杂数据类型如何定义响应式数据 2 ref、reactive数据响应式原理 3 vue2.0数据响应方式与弊端
前言 目标 setup是什么以及setup的基础用法 setup和以前的钩子函数可以混用吗 setup下的this为什么undefined？ setup的形参props,context内容以及用法 graph LR A[setup] ---> B[3 其他注意点] A --> C[1 基础用法 ] A --> D[2 形参props,context内容以及用法] B -
前言 ... 目标 1 vue3的优势有哪些 2 如何创建vue3工程 graph LR A[初始vue3] --> B[vue3带来了什么] A --> C[如何创建vue3工程] A --> D[如何引入vue3] 一 vue3带来了什么 从vue2到vue3一个大版本的升级，必然会有一些性能上的优化 性能提升和源码升级 性能提升 源码升级 打包大小减少
前言 在开发表格中经常会有这样一个需求，点击单元的文本自动切换为输入框 看起来是个很简单的功能，输入框和文本框切换用用v-show或v-if，自动聚焦用autofocus属性 但是在实际开发后，会发现在文本在第二次切换为输入框后又无法自动聚焦了... 1、autofocus（自动聚焦）属性 autofocus属性是布尔属性。 如果存在，它指定元素应在页面加载时自动获得焦点。 常用于input、
前言 ... 目标 1 vue3的优势有哪些 2 如何创建vue3工程 graph LR A[初始vue3] --> B[vue3带来了什么] A --> C[如何创建vue3工程] 一 vue3带来了什么 从vue2到vue3一个大版本的升级，必然会有一些性能上的优化 性能提升和源码升级 性能提升 源码升级 打包大小减少 使用Proxy代替defineProper
为什么要用组件化编程？ 传统方式编写：依赖关系混乱，不好维护，且代码复用率不高 模块化编写：只关注解决js，复用js，简化js的编写与效率 组件方式编写：好维护、复用率更高、提高运行效率
Copyright © 2005-2024 51CTO.COM 版权所有 京ICP证060544号
![[Node] 启动本地打包文件的方式](https://s2.51cto.com/images/blog/202408/26183839_66cc5b2f6e76775113.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 11 pinia的使用](https://s2.51cto.com/images/blog/202408/21100836_66c54c24235b521508.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 10 新组件](https://s2.51cto.com/images/blog/202408/15103834_66bd6a2ad287a12594.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 9 其它API](https://s2.51cto.com/images/blog/202408/14145823_66bc558faf22d46087.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 8 toRef与toRefs的用法](https://s2.51cto.com/images/blog/202408/13085256_66baae68a0de349583.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 7 自定义hook函数](https://s2.51cto.com/images/blog/202408/12174605_66b9d9dd47be229259.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 6 生命周期](https://s2.51cto.com/images/blog/202408/11114842_66b8349ab95af90673.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 5 watch与watchEffect用法](https://s2.51cto.com/images/blog/202408/10105159_66b6d5cfc6b2f40597.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] 4 computed](https://s2.51cto.com/images/blog/202408/09161037_66b5cefd1337e42891.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 3 数据响应式](https://s2.51cto.com/images/blog/202408/08134816_66b45c206a87083097.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 3 数据响应式](https://s2.51cto.com/images/blog/202408/07110803_66b2e513bd7ec68767.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 2 setup](https://s2.51cto.com/images/blog/202408/06153912_66b1d320737cf95773.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
![[Vue3] - 1 创建vue3工程](https://s2.51cto.com/images/blog/202408/05150345_66b079510527184027.png?x-oss-process=image/resize,m_fixed,w_116,h_70/ignore-error,1)
