自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(40)
  • 收藏
  • 关注

原创 git/Sourcetree 意外 ! 删除贮藏 回复的方法

前言 : 因为我当时不小心删除了贮藏的文件导致修改的内容全无了,然后找了好多方法来是,庆幸的事找回来 (谢天谢地!!!) 话不多说记录一下使用git fsck --unreachablegit fsck --unreachable 用它去查找一下你删除的文件!大概是折磨一个样子的然后通过 git show <文件id>去看那一条是你误删的文件找到之后 使用git stash apply <要回复文件的id>回复完之后你重新提交一下你之前删除的代码就回来啦!...

2021-10-15 09:57:45 3854 2

原创 React 中的 router -- redux

目录介绍ReduxRedux的使用简单使用combineReducers合并redux和react的联合使用介绍Reduxredux与vuex一样是一个组件的状态(数据)管理器,当我们需要在项目各组件中共享数据时可以使用redux是一个第三方的库,本身和react没有任何关系,react-redux也是一个第三方库,可以帮助我们在react项目中更好的使用reduxRedux的使用组成:action 操作方法(用户通过界面进行触发方法)reducer 方法具体实现(用来改变state数据

2021-08-01 20:44:10 1641

原创 React入门(三)

接上篇文章React入门(二).目录属性PureComponent属性refchildren属性dangerouslySetInnerHTML属性函数式组件Hook基本使用useEffect方法自定义Hook属性PureComponent属性PureComponent:提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直import React, { PureComponent } from 'react'// PureCompone

2021-07-29 20:37:17 457

原创 React 入门(二)

接上篇文章的内容往下 React入门(一).目录组件通信1. 父子通信2. 跨组件通信非受控组件和受控组件生命周期组件通信先了解一下React中的数据是怎么进行通信的在React中数据是从上自下流动(传递)的,也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件,但是子组件不能修改 propsReact.js 是单向数据流,如果子组件需要修改父组件状态(数据),是通过回调函数方式来完成的1. 父子通信父级向子级通信: 把数据添加子组件的属性中,然

2021-07-27 16:57:26 388

原创 React 入门(一)

React介绍react就是一个框架 ,他相对于mvc来说只是其中的v 他适用于开发数据不断变化的大型应用程序在中大型项目中有百分之90的公司都用React框架;是因为React是由一个一个组件拼接而成的,它是一小部分一小部分拼接的,所以它在后期便于维护链接: 中文官网基本使用先创建以个html文件引入react.js文件和dom文件(我在这里用的是网上的没有下载到本地) <!-- 提供 核心代码 --> <script src="https://un

2021-07-26 20:37:28 464

原创 vue3.0入门 === setup,ref,reactive的基本使用

vue3.0 相比vue2来说性能方面提升了vue3.0更好的兼容了TypeScript语法增加了许多新特性1. Composition (组合) API2. setupref 和 reactivecomputed 和 watch新的生命周期函数provide 与 inject新组件Fragment - 文档碎片Teleport - 瞬移组件的位置Suspense - 异步加载组件的 loading 界面其它 API 更新全局 API 的修改将原来的全局 API 转.

2021-07-02 19:50:15 663 1

原创 uni-App框架的安装和简单使用

安装(cmd)打开cmd然后安装全局的cli npm install -g @vue/cli创建uni-Appvue create -p dcloudio/uni-preset-vue my-project选择默认模板进入my-project文件启动项目 npm run dev:mp-weixin 跟mp-weixin对应的属性还有 1.app-plus :app平台生成打包资源(支持npm run build:app-plus,可用于持续集成。不支持run,运行调

2021-07-01 10:22:00 615

原创 TypeScript 入门(基本使用)二

接着上一篇的语法,来看剩下的函数函数就是声明一次,但却可以调用任意多次的一段代码可以把要实现的内容来封装起来,实现代码的复用性,提高开发效率拓展:让vscode自动编译(自动ts转为js文件)在终端中输入 tsc --init会生成一个tsconfig.json文件 然后打开文件配置点击 终端=》运行任务…=》显示所有任务=》监视ts.tsconfig.json然后你再重新创建一个ts文件就好了// 语法:function 函数名(){ 函数体 }function s

2021-06-30 20:34:03 124

原创 TypeScript 入门(基本语法+简单使用) 一

什么是TypeScriptTS并不是替代了JS ,而是以Javascript为基础构建的语言TS是一个JS的超集(也就是扩展)为js添加了类型系统他可以在任何支持JS的平台中使用注意:TS不能被JS解析器直接执行 eg:xxx.ts他不可以直接运行,他需要先编译成js才可以执行相比js TS开发更友好,可以提前发现错误BUG更少,提高开发效率使用环境搭建:TS因为是要转为JS的所以要安装一个TS转换器TS转换器基于node.js 所以你要先安装node.

2021-06-29 20:37:42 584

原创 小程序基本语法总结

模板语法:1.数据绑定普通写法 <view> {{ message }} </view>Page({ data: { message: 'Hello MINA!' }})组件属性<view id="item-{{id}}"> </view>Page({ data: { id: 0 }})bool类型//不要直接写 checked= false ,其计算结果是⼀个字符串<checkbo

2021-06-28 20:07:45 257 1

原创 小程序生命周期(介绍)

生命周期函数(每一个函数都有自己的作用)简单说下每个函数是什么时候执行的onLoad :小程序注册完成后,加载页面,触发onLoad方法( 页面创建时执行)onShow :页面载入后触发onShow方法,显示页面(页面出现在前台时执行)onReady: 首次显示页面,页面初次渲染完成,会触发onReady方法,渲染页面元素和样式( 页面首次渲染完毕时执行)onHide:页面从前台变为后台时执行(当navigateTo、底部tab切换、上传文件选择图片时调用)onUnload:

2021-06-26 19:07:29 304

原创 Error: errCode: -501000 | errMsg: Environment create at tencentcloud cannot access from wx-miniapp

如果报了这个错是因为你的环境ID没有弄成对应的或者说没有配报错图解决方案:打开云开发 =》设置=》复制自己的环境ID 然后再全局的App.js中添加上步骤打开云开发在云开发中打开设置 找到自己的环境ID 然后复制回到你的小程序开发者工具中 打开app.js然后你执行你的代码就会发现报错解决了...

2021-06-25 20:12:09 1913 1

原创 小程序 ==== 云函数(基本使用)

云开发中提供了一种,无需自建服务器也无需自建数据库,无需自建储存和cdn,并且可以调用原生微信服务集成,基于云函数,免鉴权使用小程序开放接口的能力使用云函数数据库步骤先创建, 创建的时候选择云开发创建自己的文件创建自己node.js云函数文件设置一个按钮触发一个函数用啦添加点击云开发创建一个集合回到自己文件中的js文件里给你的云函数添加东西//这些在文档中的云开发=》曾删改查中可以找到 addData(){ db.collection('kf').add(.

2021-06-24 20:55:23 291

原创 小程序获取用户的openid(详解)

小程序可以通过微信官方提供的登录能力方便地获取微信提供的用户身份标识,快速建立小程序内的用户体系然而因为小程序中的openid不可以直接使用需要用code(登录凭证)去换取openid获取openid的思路获取openid首先需要调用小程序的login方法获取小程序的登录凭证code,然后使用code向微信换取登录态信息,包括用户的唯一标识(openid)及本次登录的会话密钥(session_key)我这里是用一个点击事件来触发一个函数wx.getUserInfo 会获取到你的一些信息 .

2021-06-23 20:44:32 37413 30

原创 小程序 组件传参与插槽

组件要做自定义组件,首先我们来看一下组件的简单使用第一步先创建一个文件夹eg:components 然后点击文件夹按鼠标右键选择新建component ,之后输入index 按回车健就会出现 下图这个文件就是用来存放我们组件的那么组件有了怎么让他渲染到我们页面中呢 请看下面第一步 "usingComponents": { "my-components": "/components/index" }第二步看完这个你是不是会觉得这个跟vue的组件写法很像 ,

2021-06-22 20:37:29 384

原创 微信小程序 入门(基本使用)

什么是微信小程序微信小程序简称⼩程序,是⼀种不需要下载安装即可使⽤的应⽤,它实现 ”触手可及“、”即用即走“,无需下载安装,不用关心安装过多应用,⽤⼾扫⼀扫或搜索即可打开应⽤他的好处是:平台封闭,上手简单跨平台运行使用方便使用微信小程序的前提你要准备以下环境配置注册账号https://mp.weixin.qq.com/wxopen/waregister?action=step1建议使用全新的邮箱,没有注册过其他小程序或者公众号的。登录小程序 https://mp

2021-06-21 21:18:11 266

原创 git 入门 和 基本使用

Gitgit 是目前最先进的分布式版本控制系统。他的工作内容就是记录了每次修改的:版本,内容,操作用户,修改时间,文档名等可以回退版本 比如:你现在写的1.0的版本 然后你需要改项目所以就更新迭代了2.0版本的,然后你们的项目需求又要用1.0版本的 这时候就可以用git 让他回到1.0版本使用Git 首先你得先下载安装他下载网址:链接: https://git-scm.com/注意安装的时候配置看你需求选,我这里是vscode配置环境使用他之前你要先了解一下他的几个状态和工作流程

2021-06-10 21:02:52 90

原创 webpack中webpack.config.js === Plugins

plugins:plugins: 扩展 webpack 本身的一些功能,它们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等(通俗点说就是他是用来扩展webpack本身的)loaders:loader是文件加载器,能够加载资源文件,并对这些文件进行一些处理,诸如编译、压缩等,最终一起打包到指定的文件中(通俗点说就是用来转换器 eg:将A.scss转换为A.css)plugins:html-webpack-plugin : 他会在打包结束后,⾃动生成⼀个 htm

2021-06-09 20:51:35 543

原创 webpack中 webpack.config.js====output,Loaders

webpack :output属性简单来说,就是用来设置打包后的文件位置loaders:webpack 中非常核心的内容之一,前面我们说的非 js 类型的模块处理就靠它了,不同类型的模块的解析就是依赖不同的 loader 来实现的plugins:webpack 中另外一个核心的内容,它主要是扩展 webpack 本身的一些功能,它们会运行在各种模块解析完成以后的打包编译阶段,比如对解析后的模块文件进行压缩等output:先看配置代码const path = require('path') /

2021-06-08 20:04:21 329

原创 webpack的安装与基本使用

什么是webpack :webpack是一个模块打包工具,可以使用它管理项目中的模块依赖,并编译输出模块所需的静态文件。它可以很好地管理、打包开发中所用到的HTML,CSS,JavaScript和静态文件(图片,字体)等,让开发效率提高。对于不同类型的依赖,webpack有对应的模块加载器,而且会分析模块间的依赖关系,最后合并生成优化的静态资源。为什么要打包 :因为一个项目中的逻辑多了,文件多了,项目的复杂度提高了(就比如我们嫌css不好用所以就出现了sass/less)这是一样

2021-06-07 21:04:30 239

原创 es6中的解构赋值

解构赋值:能让我们快速的取到想要的值,对象解构可以不用考虑参数的位置数组形式的:基本使用:let [a, b, c] = [1, 2, 3];// a = 1// b = 2// c = 3可嵌套的:let [a, [[b], c]] = [1, [[2], 3]];// a = 1// b = 2// c = 3可忽略:Let [a, , b] = [1, 2, 3];// a = 1// b = 3不完全解构:let [a = 1, b] = [

2021-06-06 20:00:03 63

原创 es6中的iteration 迭代器

Iterator 是 ES6 引入的一种新的遍历机制他的实现思路为:通过 Symbol.iterator 创建一个迭代器,指向当前数据结构的起始位置随后通过 next 方法进行向下迭代指向下一个位置,next 方法会返回当前位置的对象,对象包含了 value 和 done 两个属性,value 是当前属性的值,done 用于判断是否遍历结束done 为 true 时则遍历结束看一个例子:const items = ["zero", "one", "two"];const it = it

2021-06-06 19:46:38 75

原创 vue中v-slot插槽的几种使用方法

v-solt 分为3中插槽 分别是:普通插槽,具名插槽,动态插槽普通插槽:在子组件中使用 占位,就可以在组件的标签中输入内容,放到插槽位置显示eg: <div id="box"> <aa>我是插槽添加的内容</aa> </div> <script> var bb=` <div> <slot></slot>

2021-06-06 19:28:56 1147

原创 vue 中 有哪些指令(全)

什么是指令指令是带有v-前缀的特殊attribute,一些指令能够接收一个参数,在指令名称之后以冒号表示。指令直接使用{{}} 将数据解释为普通文本,而非html代码v-html :会将元素当成HTML标签解析后输出 (简单说就是它可以解析标签 比如 用b标签包裹一个文本这个文本输出的就是斜体的)v-text : 会将元素当成纯文本输出(他不解析标签)v-bind :v-bind指令可以用于响应式地更新html属性<a v-bind:href="url">...</a&

2021-06-06 18:44:22 575 2

原创 vuex是什么 以及他的优缺点

什么是vuexVuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高

2021-05-30 19:38:23 2360

原创 路由传参的几种方式(含params、query)

前言:路由传参在vue项目中是很常用的让我们用最简单的方法理解下3种路由的传参方式先看一下用到到文件 有哪些第一种 布尔值传参1.需要在router文件夹中的index文件 配置路由{ //布尔值传参 path:'/A/:id', //布尔值传参这里必须要写成动态路由的格式 props:true, component:()=>import('@/views/A.vue') }2.在App.vue中配置路由跳转里面的aa是参数,也就是最后传过去的东西

2021-05-28 19:56:27 12630

原创 vue 中的filter 过滤器的使用

前言:filter过滤器 是一个很常用的方法。也可以说他是一个门口的守卫,因为他会把符合条件的放进来,不符合条件的就会挡在外面还会对符合条件的进行一些处理所以filter的作用就是 筛选,然后操作复合条件的使用的位置是在{{}}内{{ str|filterA }} 单个使用。{{ str| filterA| filterB }} 多个连用。举一个反转字符串的案例(谁用这个过滤器谁里面的字符串就会被反转)全局过滤器<div id="box"> {{str

2021-05-28 11:01:27 486

原创 vue中的父子传参

父传子 通过属性向下传 eg:<bb :abc='name'></bb> bb是子组件 send自定义的属性 name是父组件里面的属性 子组件 使用 props这个属性去接收 数组格式接收 props:['send'] 对象格式接收 props:{'send':String} 对象格式接收可以规定接收的类型 父传子使用属性向下传 如果你的属性值是变量或者是数组需要使用(:属性)这种动态绑定 ,不加(:)会变成字符串举一个简单的例子 <

2021-05-27 10:36:34 266

原创 HTML5新增的标签和表单控件

新增的标签1.结构标签1. header 页面头部标签2. footer 页脚底部标签 3. nav 导航4. section 划分区域 (有点代替div的意思) 5. article 主题内容块6. aside 侧边栏2.功能标签1.标题组合 hgrounp <hgrounp> <h1></h1> <h2></h2></hgrounp>2.进度条 pr

2021-05-23 19:01:23 65

原创 vuex安装及配置

vuex是什么vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享vuex的好处1. 能够在vuex中集中管理共享的数据,易于后期的开发和维护2. 能够高效率的实现组件之间的数据共享,提高开发效率3. 存放在vuex中的数据都是响应式的,能够实时保持数据与页面之间的同步安装npm install vuex --save配置在min.js中挂载import store from "./store";Vue.config.productionTip =

2021-05-21 09:21:47 478

原创 cli的安装选项及文件介绍

cli是vue提供的一个快速(自动化) 构建项目的一个脚手架命令行安装打开cmd输入 npm install -g @vue/cli查看版本 vue --version开始创建cli vue create cli //这个cli是自己定义的文件名创建完之后回给你三个选项第一个和第二个是默认选项 ;babel:优雅降级 es6 —> es5 就是把es6的语法转换为es5的语法;eslint:js语法检测;Manually select features: 手动选

2021-05-19 13:39:20 649

原创 JavaScript中的“!!”

<!DOCTYPE html><html> <head> <meta charset="{CHARSET}"> <title></title> </head> <body> </body> <script type="text/javascript"> console.log(!!undefined) //false console.log(!!null) /

2021-05-17 16:36:35 108

转载 js数组排序

[转载](https://www.cnblogs.com/web-record/p/9109754.html)1.javaScript的sort()方法var arr=[1,8,3,5,12,19,5];function func(v1,v2){ return v1-v2;};arr.sort(func);document.write(arr);sort()方法按照升序排列数组项 , 会调用每个数组项的toString()转型方法 , 然后比较得到的字符串toString().

2020-11-06 09:13:16 98

原创 addEventListener方法和on的区别

on事件Javascript中可以对一些页面的事件设定触发值 , 例如常用的点击click 鼠标移动onmousemove等等,可以对其设定值来实现事件触发后执行的操作addEventListener()方法addEventListener(‘click’,function,Boolean)参数click表示监听事件 : click等,就是之前不加前缀 on 的事件(必写)参数function表示事件触发后调用的函数,可以是外部定义函数,也可以是匿名函数(必写)参数Boole

2020-11-05 10:18:39 944

原创 事件委托的原理以及优缺点

事件委托原理 : 利用事件冒泡的机制优点 :提高Javascript性能,减少内存消耗动态添加DOM元素缺点 :事件委托基于冒泡 , 对于不冒泡的事件不支持层级过多,冒泡过程中,可能会被某层阻止掉把所有事件都用代理就可能会出现事件误判,好比把不应该触发事件的 绑上了事件....

2020-11-04 10:20:13 2660

原创 纯js实现轮播图

主题结构<div class="box"> <ul class="ullist"> <li class="lis active"><img src="img/1.jpg" alt="" width="600px" height="300px"></li> <li class="lis"><img src="img/2.jpg" alt="" width="600px

2020-10-20 09:34:23 168

原创 javaScript放大镜特效

css部分<style type="text/css"> *{ margin: 0; padding: 0; } .min_img{ /* 800×678 */ /* 这里图片的宽高是原来图片的3倍(看自己想弄成几倍) */ width: 266px;

2020-09-29 19:06:59 132 2

原创 鼠标跟随移动

css部分<style type="text/css"> *{ margin: 0; padding: 0; } div{ width: 100px; height: 100px; background: red; /* 元素必须定位 */ position: absolute; }</style>主题结构<!-- 为了获取滚动条 --> <body style="

2020-09-29 09:44:47 169

原创 简单点名器案例

结构内容<div id="bigbox"> <button id="btn">开始</button> <button id="btn1">结束</button> <div id="box"></div> </div>css<style> #box{ width: 200px;

2020-09-22 19:08:08 102

原创 原生js实现简单tab切换

结构 <div id="box"> <ul id="oul"> <li class="uli">1</li> <li class="uli">2</li> <li class="uli">3</li> </ul> <div id="con"> &

2020-09-22 11:28:02 683

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除