- 博客(36)
- 收藏
- 关注
RSS订阅
原创 Web3Js调取小狐狸钱包MateMask
web3浏览器检查if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!');}获取账户信息// 引入//<script src="./node_modules/web3/dist/web3.min.js"></script>async function get(){ // 实例化web3 window.web3 = new Web3(e
2021-12-17 16:07:04
4188
原创 Vue3解决了vue2的什么问题
ProxyProxy对象用于创建一个对象的代理，从而实现基本操作的拦截和自定义（如属性查找、赋值、枚举、函数调用等）。// 语法const myProxy = new Proxy(target, handle)// target 要使用 Proxy 包装的目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。// handler 一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理 p 的行为。Object.defineProperty缺陷.
2021-11-16 10:58:12
1812
原创 『TypeScript』interface 接口
TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。1. 接口声明//之前我们通过type用来声明一个对象类型/*type Person = { name: string, age: number}*///对象类型的声明还有另外一种方式interface Person { name: string, age: number}let obj:Person={..
2021-11-14 23:17:57
566
原创 『TypeScript』泛型
泛型（Generics）是允许同一个函数接受不同类型参数的一种模板。相比于使用 any 类型，使用泛型来创建可复用的组件要更好，因为泛型会保留参数类型。T 代表Type，在定义泛型是通常用作第一个类型变量名称。K（Key）：表示对象中的键类型； V（Value）：表示对象中的值类型； E（Element）：表示元素类型； O（Object）：表示对象类型；1. 泛型接口interface GenericIdentityFn<T> { (arg: T): T;...
2021-11-14 22:58:35
333
原创 『TypeScript』类
1. ts 中类的定义class Person{ name!:string; age:number; constructor(name:string, age:number) { this.name = name; this.age = age; } running(){ console.log(this.name + " running") } eating(){ console
2021-11-14 22:43:07
319
原创 『TypeScript』函数
来让我们看一下 TypeScript 中的函数1. 箭头函数let fn = () => console.log('fn');type TFn = (s: number, b: number) => void;let fnn:Fn = function (a: number, b: number){}2. 参数类型和返回类型函数的参数类型 可以按照普通数据类型加注解的方式直接写 x: number, y: number函数的返回值 注解 () :numbe..
2021-11-14 22:16:02
390
原创 『TypeScript』联合类型、类型别名、交叉类型
1. 联合类型联合类型通常与 null 和 undefined 一起使用,主要是运用 | 符号，可以成为这个任意一个类型；const a = (name: string | undefined) => {}a("str"); // oka(undefined); // ok2. 类型别名关键字 type类型别名用来给一个类型起个新名字。我们通常在类型别名前加一个大写的T，可以表示这是一个类型别名。type TMsg= string | string[];..
2021-11-14 21:08:26
1103
原创 『TypeScript』类型守卫
类型缩小：type Narrowing类型守卫是 一个值确保在该类型的范围内。1. in 关键字interface InObj1 { a: number, x: string}interface InObj2 { a: number, y: string}function isIn(arg: InObj1 | InObj2) { // x 在 arg 打印 x if ('x' in arg) console.log('x') //
2021-11-14 08:00:00
621
原创 『TypeScript』类型断言
1. 类型断言通过类型断言这种方式可以告诉编辑器，‘我很清楚这是一个什么类型’；类型断言的两种形式：1. as 语法let strValue: any = 'this is string type';let strLength: number = (strValue as string).length;2. “尖括号”<> 语法let strValue = 'this is a string type';let strLength = (<string&g.
2021-11-14 06:30:00
2800
原创 『TypeScript』基础类型
TS介绍javascript TypeScript 是添加了类型系统的 JavaScript，适用于任何规模的项目。 TypeScript可以和 JavaScript 共存，这意味着 JavaScript 项目能够渐进式的迁移到 TypeScript。1. Boolean 类型let flag: boolean = true;2. Number类型let num: number = 123;3. String 类型let str: string = "hello world";4
2021-11-14 01:22:31
360
原创 原生ajax / 同源 / 跨域
ajaxajax是一种创建交互式网页应用的网页开发技术在网页不刷新的情况下，可以请求数据然后实现网页局部刷新或者渲染ajax的原理：通过XMLHttprequest对象向服务器发异步请求，从服务器获取数据后，然后用JavaScript来操作DOM而更新页面...
2021-10-05 23:00:55
155
原创 什么是地狱回调 / 解决回调地狱
async / await// async / await function all(arg, val) { return new Promise((resolve, reject) => { // 使用定时器模仿异步操作 setTimeout(() => { resolve(arg + val) }, 1000) }) } async function render() { let a = awai
2021-10-05 20:18:38
679
原创 npm一个简单的发包流程
NPM发包流程NPM的官方网站是：https://www.npmjs.com01: 注册账号 注册一个npm账号，因为npm发包流程需要依赖这个账号 值得一提的是npm的用户名一旦生效便不能再做修改 NPM的官方网站是：https://www.npmjs.com02: 准备一个项目 项目，是指一个标准的NPM项目。 1. 创建一个文件夹 2. $npm init -y // 初始化项目 3. package.json // 结构如下 4. 在根目录下创建
2021-07-16 14:33:32
310
原创 小程序踩坑日记
标签button 调宽 // wxml <button>按钮</button> // wxss button{ width: 200rpx; height: 100rpx;}解决： 在button标签中直接写style。<button style:"width: 200rpx">按钮</button>
2021-07-12 16:39:03
130
原创 小程序wepy项目初始化
wepy官网：https://wepyjs.github.io/wepy-docs/2.x/#/wepy 2.0下载wepy脚手架 $ npm init @wepy/cli -g # 全局安装 WePY CLI 工具项目初始化使用 standard 模板初始化项目 $ wepy init standard + 项目名称 $ cd myproj # 进入到项目目录 $ npm install # 安装项目依赖包 监听并且编译项目 $ npm run dev
2021-07-05 11:56:43
222
转载 git 命令
git 命令git init 作用是初始化一个能让git进行管理的仓库 使用 attrib -h .git可以释放出隐藏文件.git创建出自己的项目文件 打开项目文件夹 然后在文件夹中打开git命令窗git add ‘文件名称’ 提交单个文件 git add . 提交所有修改的文件git status 可以查看当前git所处的装太 比如放在git add 后执行gitstatus命令可以查看当前都添加了那些修改的内容git commit -m “本次更改的描述内容” 因为描述内容需要表达
2021-06-23 19:44:09
91
原创 Vue2.0+3.0x 对axios封装
对 axios 封装 vue2.0 and 3.0x// 请求地址 https://api.it120.cc// 引入axios模块import axios from 'axios'// 引入 Vueimport Vue from 'vue' // vue2.0import { createApp } from 'vue' // vue3.0import store from '../store' //vuex/**引入loading组件方法 vue2.0*/import $lo.
2021-06-08 19:03:07
270
1
原创 Vue3使用 vuex 的写法
打开store中的index.js 代码如下// 可以看出与vue2的写法有些区别，但是用法一样// 但是需要注意的是如果在创建项目时没有安装vuex 则需要自己安装 安装命令是 npm install vuex@next --save 这里需要注意命令的不同 安装的版本就不同import { createStore } from 'vuex'export default createStore({ state: { // 用来写要存储的状态（数据） name: '张三.
2021-06-08 18:35:54
972
4
原创 Vue2.0 封装全局Loading
第一步在components文件夹中新建myLoad.vue组件<template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div></template><script>export default { props: { msg: Object,
2021-06-05 10:09:36
304
2
原创 Vue3封装全局Loading
第一步在components文件夹中新建myLoad.vue组件<template> <div class="loading" v-show="msg.show"> <div>{{msg.title}}</div> </div></template><script>export default { props: { msg: Object,
2021-06-05 09:46:17
2557
原创 Vue2.0 自定义指令
自定义指令介绍vue中除了核心功能内置的指令外，也可以注册自定义指令。有的情况下，对不同dom元素底层操作，这个是时候就会用到自定义指令了。自定义指令分为：全局的自定义指令和局部自定义指令。全局自定义指令全局自定义指令是通过Vue.directive(‘第一个参数是指令的名称’,{第二个参数是一个对象，这个对象上有钩子函数})新建一个js文件写入代码 引入在main.js中使用的时候用 v-自定义指令名 就可以直接使用// 引入vueimport Vue from "vue";
2021-06-02 20:28:23
232
原创 前端相关网站
相关网站：1. 微信开发文档 官网： https://developers.weixin.qq.com/doc/2. 支付宝开发文档 官网：https://open.alipay.com/platform/home.htm3. 字节跳动小程序文档 官网： https://microapp.bytedance.com/4. QQ开发文档 官网： https://q.qq.com/#/1. vue官网： https://cn.vuejs.org/2. vue-router官网： https://r
2021-05-31 20:34:49
111
原创 Vue2.0 API封装总结
第一步在项目中创建一个工具文件夹 utils 文件夹名称可以随意更改（utils是一种约定俗称的名称）在utils文件夹中创建一个server.js 该文件的名字也可以随意命名配置拦截器功能在server.js中// 导入axiosimport axios from 'axios'// 使用axios创建一个新的服务对象// 其实server就是axios 只不过是给axios添加了一些基本配置之后的结果而已const server = axios.create({ baseU
2021-05-31 20:22:58
604
原创 Vue3.0使用 vant-ui 插件的过程
创建项目vue create yxsc_project安装vant 组件库第一步安装命令 npm install vant@next --save (因为使用的是vue3.x 所以要安装vant的针对vue3的版本 vant@next)第二部vant的进阶使用 通过 npm install postcss postcss-pxtorem --save-dev (用来将px尺寸转化为rem尺寸)配置rem的根元素字体大小 安装lib-flexiable 安装命令 npm i
2021-05-31 20:22:11
563
原创 css样式重置
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, l
2021-05-31 11:54:08
82
原创 vue-cli3打包优化的文章
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')const path = require('path')// 开启Gzip需要的依赖 yarn add compression-webpack-plugin -Dconst CompressionWebpackPlugin = require('compression-webpack-plugin')function resolve(dir) { return path.join
2021-05-06 10:20:44
68
原创 mysql和moogoDB的区别
MySQL是关系型数据库。优势：在不同的引擎上有不同 的存储方式。查询语句是使用传统的sql语句，拥有较为成熟的体系，成熟度很高。开源数据库的份额在不断增加，mysql的份额页在持续增长。缺点：在海量数据处理的时候效率会显著变慢。Mongodb是非关系型数据库(nosql ),属于文档型数据库。文档是mongoDB中数据的基本单元，类似关系数据库的行，多个键值对有序地放置在一起便是文档，语法有点类似javascript面向对象的查询语言，它是一个面向集合的，模式自由的文档型数据库。存储方式：
2021-04-30 08:30:41
76
原创 对象根据key排序的方法
无意间获取大一组城市的数据 数据本身是一个对象 但是key是由A~Z的字母组成的 但是呢 字母的顺序是错乱的 所以数据无法直接渲染 需要根据对象的属性对对象进行排序，于是有了这次的果，话不多说 上代码// 这是我获取到的数据的大概类型 因为数据太多 不做全部的演示了var citys = { "E": [ {"name": "厄瓜多尔"}], "A": [ {"name"： "安阳"}], "R": [ {"name": "日照"}]}// 接下来是排序的代码第一种办法 var.
2021-04-30 08:29:14
500
原创 vue push方法重写解决路由错误问题
vue重写路由push方法/**重写路由的push方法解决，相同路由跳转时，报错添加，相同路由跳转时，触发watch (仅限string方式传参，形如"view?id=5")*/const routerPush = Router.prototype.pushRouter.prototype.push = function push(location) { if(typeof(location)=="string"){ var Separator = "&"; i
2021-04-28 16:51:35
260
2
原创 vue路由详解
总结路由分为 编程式路由和声明式路由定义路由对象const router = new VueRouter({ routes:[ { path: '/', name: '', // redirect: '/index', 路由重定向的位置（意思就是要把页面定向到哪一个页面） redirect: { // 可以是下面五种跳转方法中的任何一种方式
2021-04-28 16:45:24
85
原创 vue 组件及组件传值
总结创建一个组件 Vue.component('组件的标签'，{ template: '模板内容' }) // 例如 定义一个子组件 Vue.component('child'，{ template: '<div></div>' }) // 定义一个父组件 将子组件在父组件中使用 Vue.component('parent'，{ template: `<div>
2021-04-28 16:42:37
60
原创 vue指令
总结v-textv-text是一个渲染文本的指令 不能解析标签 会把标签当成字符串渲染在页面上v-htmlv-html 也是一个渲染内容的指令 但是v-html会解析标签 标签不在页面上显示v-showv-show 是一个控制元素显示隐藏的指令 他是通过css样式（display:none）控制dom的显示隐藏v-ifv-if 也是一个控制元素显示隐藏的指令 但是v-if本质上控制的是 dom的删除和增加 意思就是v-if的值如果是false则会从文档中直接删
2021-04-28 16:12:30
71
原创 vue注册全局组件的方法
在components文件夹下新建package文件夹 （文件夹可以随意命名），然后在package文件夹下创建index.js在index.js中写入如下代码 import Vue from ‘vue’ // 引入vue// 第一个参数表示从哪个文件夹开始匹配 这里表示从当前文件夹开始// 第二个参数表示是否匹配子文件夹中的内容// 第三个参数表示要匹配的文件的类型 这里匹配vue文件const componentsContext = require.context(’.’, true, /.
2021-04-28 16:06:46
99
原创 react非父子组件传值
非父子组件传值react的非父子组件传值可以是使用订阅模式首先定义订阅者 // 创建一个observer.js文件 const observer = { list: [], // 用力收集所有的函数 subscribe(callback) { // 接收dispatch触发的函数的方法 this.list.push(callback) } dispatch(data) { // 触发事件的方法
2021-04-28 15:55:23
414
原创 react路由嵌套路由及路由传参
因为react的嵌套路由跟vue比就像屎一样 不好写 所以在使用的时候建议使用react-router-config来配置路由 会相对轻松第一步 先安装路由依赖yarn add react-router-dom --saveyarn add react-router-config --save第二部 配置路由文件新建一个routes.js文件 新建pages文件夹和home组件about组件及page2组件 import React from 'react'; impo.
2021-04-28 15:52:10
142
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人