- 博客(218)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
原创 ios 上textarea placeholder不换行的问题
发现在ios上placeholder过长时,删除内容后不换行的问题,但是重新点击textarea以后又正常了,试了一下让其重新聚焦,貌似是可以了,具体情况请具体分析,这里记录一下。
2023-12-31 13:53:59
1082
原创 React 内 JSX了解及使用
Jsx的全称是Javascript XML,react定义的一种类似XML的JS拓展语法:JS+XML,使我们可以用类似于xml方式描述视图。本质是React.createElement(component, props, ...children) 的语法糖原理:babel-loader会预编译JSx为React.createElement(type,props,...children)
2023-05-16 17:14:21
1105
原创 React Router 6 函数式组件withRouter 路由属性配置
react-router 函数组件使用withRouter 了解,学习阶段,欢迎指出问题!
2023-05-05 16:27:45
1251
原创 The emulator process for AVD Pixel_2_API_30 has terminated.
The emulator process for AVD Pixel_2_API_30 has terminated.
2022-04-23 15:37:07
3608
1
原创 umi入门学习
umi为前端开发框架安装uminpm install umi -g[点击并拖拽以移动]直接创建文件夹 umiProject,cd进入后直接操作:创建页面
2022-04-20 22:09:08
2993
原创 Echarts图表不均匀y刻线设置及气泡图点击操作
点击事件气泡图点击需要在渲染数据后直接点击气泡,进行操作获取该气泡数据等渲染图表<div id="container" style="height: 100%"></div>var dom = document.getElementById("container");var myChart = echarts.init(dom);var option; // 后续定义一下optionmyChart.off('click');if (option ..
2021-10-24 18:32:58
2034
原创 vue3+ts实现todolist功能
先看一下实现效果:可以看到内部实现的内容有enter输入,单项删除,全选,以及删除选中项等功能具体在实现前需要常见有ts的vue3项目项目创建具体项目创建 就是 vue create 项目名称在创建后,选择的时候有vue2和vue3的选择,第三项是自定义,在自定义时需要选中ts(选择的键分别是向下键和空格键)在创建项目之后,先运行,查看是否可运行TodoList实现目录结构:运行文件:App.vue组件:components下的文件...
2021-08-31 00:37:00
3340
3
原创 vue的混入(mixin)理解
首先,混入mixin是一个非常灵活的方式,主要用于提高组件内的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。简单些就是:凡是混入了某个文件的所有vue文件,都可以使用混入文件内的方法等。而且二者直接不是父子内之间的关系,混入文件内的东西,都可以直接使用,也不需要传参等。一个混入对象可以包含任意组件选项。同一个生命周期,混入对象会比组件的先执行。混入文件:mixin.jsexport const M..
2021-08-24 09:44:08
447
原创 es6中class类(还需完善)
es6中class类的全方面理解(一) - 简书 (jianshu.com)class的作用是通过class关键字,可以定义类。 ES6的class可以看作是一个语法糖,新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已传统构造函数:
2021-08-23 15:06:01
228
原创 vue3的toRefs函数及ref函数
toRefs函数把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref应用: 当从合成函数返回响应式对象时,toRefs 非常有用,这样消费组件就可以在不丢失响应式的情况下对返回的对象进行分解使用问题: reactive 对象取出的所有属性值都是非响应式的解决: 利用 toRefs 可以将一个响应式 reactive 对象的所有原始属性转换为响应式的 ref 属性<template> <div> <h2&...
2021-08-22 17:06:43
3752
原创 vue3的自定义hook函数
使用Vue3的组合API封装的可复用的功能函数 自定义hook的作用类似于vue2中的mixin技术 自定义Hook的优势: 很清楚复用功能代码的来源, 更清楚易懂 需求1: 收集用户鼠标点击的页面坐标 这里先看一下大体项目结构:这里的hooks下的文件是示例代码,public内的是测试数据在启动项目后,测试public的data文件内的数据,App.vue<template> <div> ...
2021-08-21 14:24:58
1766
原创 vue2和vue3生命周期对比
下面的是vue2和3的生命周期对比,vue2生命周期 vue3生命周期与 2.x 版本生命周期相对应的组合式 APIbeforeCreate-> 使用setup() created-> 使用setup() beforeMount->onBeforeMount mounted->onMounted beforeUp...
2021-08-18 17:57:03
3463
原创 vue3的计算属性和监听及watch和watchEffect区别
三者区别: computed函数: 与computed配置功能一致 内部只有一个方法的时候是getter 有getter和setter watch函数 与watch配置功能一致 监视指定的一个或多个响应式数据, 一旦数据变化, 就自动执行监视回调 默认初始时不执行回调, 但可以通过配置immediate为true, 来指定初始时立即执行第一次 通过配置deep为true, 来指定深度监视 watchEffect函数 不用直接指定要监视的数据, 回..
2021-08-18 11:43:50
576
原创 Vue3的reactive与ref的细节对比
reactive与ref是Vue3的 composition API中2个最重要的响应式API ref用来处理基本类型数据, reactive用来处理对象(递归深度响应式) 如果用ref对象/数组, 内部会自动将对象/数组转换为reactive的代理对象 ref内部: 通过给value属性添加getter/setter来实现对数据的劫持 reactive内部: 通过使用Proxy来实现对对象内部所有数据的劫持, 并通过Reflect操作对象内部数据 ref的数据操作: 在js中要.value,
2021-08-17 17:51:18
455
原创 vue2.0与vue3的响应式
vue2的响应式核心:对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截) 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持Object.defineProperty(data, 'count', { get () {}, set () {}})问题 对象直接新添加的属性或删除已有属性, 界面不会自动更新 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {} 所以,这..
2021-08-13 17:17:18
208
原创 vue3.0了解
项目创建vue-cli脚手架安装## 安装或者升级npm install -g @vue/cli## 保证 vue cli 版本在 4.5.0 以上vue --version## 创建项目vue create my-project基础默认的2和3选择中是没有typescript的,如果需要使用typescript,需要选择自定义的东西,按向下的箭头和空格键进行选中,完成后enter,后续选中3.x,后面默认即可vite构建项目npm init vite-app <..
2021-08-12 15:26:37
178
原创 TypeScript 泛型的基本介绍
泛型在定义函数、接口、类的时候不能预先确定要使用的数据类型,而是在使用函数接口类的时候才能确定数据类型(() => { // 需求:定义一个函数,传入两个参数,第一个参数是数据,第二个参数是数量,函数的作用:根据数量产生对应个数的数据,存放在一个数组中 // 传入任意数据,而且有错误提示信息 function getArr4<T>(value: T, count: number): T[] { // 根据数据和数量产生一个数组 ..
2021-08-11 10:19:31
172
原创 TypeScript 函数的基本介绍
函数介绍// 函数:封装了一些重复使用的代码,在需要的时候直接调用即可(() => { // js写法 // 函数声明,命名函数 // function add(x, y) { // return x + y // } // 函数表达式,匿名函数 // const add2 = function (x, y) { // return x + y // } // ts写法 // 函数声明..
2021-08-09 17:58:21
174
原创 TypeScript 的类的基本介绍
类的基本用例// 类:可以理解为模板,通过模板可以实例化对象// 面向对象的编程思想(() => { // ts中类定义及使用 class Person { // 定义属性 name: string age: number gender: string constructor(name: string = '张三', age: number = 13, gender: string = '女'..
2021-08-09 16:30:22
327
原创 TypeScript的接口
TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口(Interfaces)来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型接口: 是对象的状态(属性)和行为(方法)的抽象(描述)接口类型的对象 多了或者少了属性是不允许的 可选属性: ? 只读属性: readonly(() => { interface IPers...
2021-08-03 16:30:06
223
原创 TypeScript基础数据类型
TypeScript 支持与 JavaScript 几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。布尔值最基本的数据类型就是简单的 true/false 值,在JavaScript 和 TypeScript 里叫做 boolean(其它语言中也一样)。let isDone: boolean = false;isDone = true;// isDone = 2 // error数字和 JavaScript 一样,TypeScript 里的所有数字都是浮点数。 这些浮
2021-07-27 11:20:14
499
原创 TypeScript了解
简介TypeScript是一种由微软开发的开源、跨平台的编程语言。它是JavaScript的超集,最终会被编译为JavaScript代码。2012年10月,微软发布了首个公开版本的TypeScript,2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScriptTypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6+ 的支持,它由 Microsoft 开发,代码开源于 GitHub (opens new window)上特点Type
2021-07-26 14:31:16
186
原创 webpack入门5----基础配置详情
1.entry打包入口有以下三种打包方式:单字符串、数组、对象 1. string --> './src/index.js' 单入口 打包形成一个chunk。 输出一个bundle文件。 此时chunk的名称默认是 main 2. array --> ['./src/index.js', './src/add.js'] 多入口 所有入口文件最终只会形成一个chunk, 输出出去只有一个bundle文件。...
2021-07-23 11:45:23
386
1
原创 webpack入门4----优化环境配置(下)
6.code split主要是两个位置:入口拆分代码及将node_modules中代码单独打包成一个chunk输出代码分割的目的:提高代码运行速度const { resolve } = require('path');const HtmlWebpackPlugin = require('html-webpack-plugin');module.exports = { entry: { index: './src/js/index.js', t...
2021-07-22 22:06:03
163
1
原创 webpack入门4----优化环境配置(上)
优化配置概括优化主要分为两个方面的配置:开发环境和生产环境具体可以概括如下:# webapck性能优化* 开发环境性能优化* 生产环境性能优化# 开发环境性能优化* 优化打包构建速度 * HMR* 优化代码调试 * source-map# 生产环境性能优化* 优化打包构建速度 * oneOf * babel缓存 * 多进程打包 * external * dll* 优化代码运行的性能 * 缓存(hash/chunkhash/contenth
2021-07-21 22:22:00
171
1
原创 webpack入门3-----生产环境配置
下方的配置文件均为webpack.config.js文件在配置完成后运行指令均为webpack,可查看打包产生的文件1.提取css成单独文件因为在一般情况下,js内引入的css文件,会被打包进出口js文件内,所以引入在编译的时候会到导致编译文件较大,速度慢的情况所以将css单独打包出来,可以适当增加文件加载速度需要下载插件npm install --save-dev mini-css-extract-plugin修改配置文件const { resolve } = re
2021-07-18 22:41:49
198
1
原创 webpack入门2---开发环境配置
在查看内容之前可以先拉下全部项目的代码运行查看:项目内容上传到了 码云 https://gitee.com/a2547944268/webpack_test上基础配置在项目内创建配置文件webpack.config.js配置内容如下:const { resolve } = require('path'); // node 内置核心模块,用来处理路径问题。module.exports = { entry: './src/js/index.js', // 入口文件 .
2021-07-18 12:05:26
118
原创 Webpack入门1----简介
webpack是什么webpack 是一种前端资源构建工具,一个静态模块打包器(module bundler)。在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。 它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
2021-07-12 11:45:29
150
原创 jQuery版Easy UI了解
点击表格获取数据重点:数据网格(datagrid)组件包含两种方法来检索选中行数据:getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。 getSelections:取得所有选中行数据,返回元素记录的数组数据。取得选中行数据数据网格(datagrid)组件包含两种方法来检索选中行数据:getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录。 getSelections:取得所有选中行数据,返回元..
2021-07-01 16:53:17
238
1
转载 idea 实时更新html页面【转】【转】【转】
做项目发现一个问题:开发工具idea,项目是springboot+html+tymeleaf修改完页面后,不重新重启项目,页面修改的地方不能实时刷新,捣鼓了半天,终于找到了解决的办法,如下:第一步:idea工具file->settings->Build,Execution,Deployment->compiler->Build project automatically第二步:组合快捷键:“Shift+Ctrl+Alt+/” ,双击“Registry” ,选...
2021-06-25 15:01:16
2939
2
原创 js实现indexOf()、实现 strStr() 函数
先说一下这个题,这个是力扣里简单的题实现strStr()函数给你两个字符串haystack 和 needle ,请你在 haystack 字符串中找出 needle 字符串出现的第一个位置(下标从 0 开始)。如果不存在,则返回-1 。说明:当needle是空字符串时,我们应当返回什么值呢?这是一个在面试中很好的问题。对于本题而言,当needle是空字符串时我们应当返回 0 。这与 C 语言的strstr()以及 Java 的indexOf()定义相符。...
2021-06-23 14:56:42
920
1
原创 Error: Cannot find module ‘webpack-cli/bin/config-yargs‘
这个不是项目内的问题,只是练习发现的,使用 npx webpack-dev-server 命令启动:
2021-06-10 14:42:49
191
1
转载 Es6 的Set、WeakSet数据结构
ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。Set本身是一个构造函数,用来生成 Set 数据结构。
2021-06-08 14:46:26
106
原创 Vue cli 2.x 3.x及4.x区别
在使用前优先是安装安装:npm install -g @vue/cli# ORyarn global add @vue/cli
2021-06-07 10:27:20
1203
3
uni-app二维码生成资源 weapp-qrcode-master
2020-11-20
cookie被篡改怎么办?
2021-06-08
TA创建的收藏夹 TA关注的收藏夹
TA关注的人