- 博客(77)
- 收藏
- 关注
RSS订阅原创 React应用(基于React脚手架)
react 是前端三大框架中之一,而且大公司基本都在用react 包括百度也在使用 他有自己的独特的虚拟dombuild-react-cli是帮助你快速创建生成react项目的脚手架工具，配置了多种可选择的不同类型项目模版。1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 1. 包含了所有需要的配置（语法检查、jsx编译、devServer…） 2. 下载好了所有相关的依赖 3. 可以直接运行一个简单效果2. react提供了一个用于创建react项目的脚手架库: crea
2023-04-02 20:05:56
1683
10
原创 React 面向组件编程（下）
表单的组件分类：1. 受控组件 2. 非受控组件多数情况下，推荐使用受控组件实现表单。在受控组件中，表单数据由组件控制。另外一种是非受控组件，这种方式下表单组件由DOM自身控制。1. React中的组件分为受控组件和非受控组件2. 受控组件的两个要点：组件的value属性与React中的状态绑定组件内声明了onChange事件处理value的变化3. 非受控组件更像是传统的HTML表单元素，数据存储在DOM中，而不是组件内部，获取数据的方式是通过ref引用。尽可能使用受控组件
2023-03-29 19:57:30
3103
57
原创 React 面向组件编程（上）
在React中，组件实例的三大核心属性包含state、props、ref，通过这三大核心属性的使用，我们能够实现对组件的状态进行更新。
2023-03-27 19:53:42
2055
49
原创 React 入门（超详细）
1. React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。2. React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。3. React 是用于动态构建用户界面的
2023-03-23 20:10:39
19427
46
原创 使用 uni-app 完成左滑效果
左滑显示编辑/删除 或者 置顶之类的功能我们经常要实现，类似于微信的删除聊天框的结构，让我们跟随本章来学习吧！实现思路1. 给组件绑定事件，主要利用组件的触摸开始，触摸过程和触摸结束事件来实现；2. 声明初始化点击位置变量clientX3. 在开始触摸事件中获取当前时间的clientX并把参数赋值给this.clientX4. 在触摸过程事件中，触摸过程的clientX减去开始触摸的clientX。5. 使用Math.abs()把参数改为正整数，并判断小于左滑的宽度6. 根据ref获取参数，设
2023-03-17 20:04:14
2227
9
原创 微信小程序基础介绍
什么是微信小程序：微信小程序，简称小程序，英文名 Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。- 整个小程序所有分包大小不超过 8M- 单个分包/主包大小不能超过 2M
2023-03-08 10:22:32
3222
21
原创 Vue3 中的模板语法
我们可以把 Vue.js 的模板语法，直接理解为 HTML 语法的一种扩展，它所有的模板节点声明、属性设置和事件注册等都是按照 HTML 的语法来进行扩展设计的。按照官方的说法就是“所有的 Vue 模板都是语法层面合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析”。Vue 使用一种基于 HTML 的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的 DOM 上
2023-03-05 20:03:27
3191
49
原创 Vue3 中组件的使用（下）
在上一章中我们学习了如何注册组件，组件之间的父子通信，在本文中会给大家继续讲解 Vue3 组件中剩余的内容。在封装组件时，可以使用元素把不确定的、希望由用户指定的部分定义为插槽；插槽可以理解为给预留的内容提供占位符。插槽也可以提供默认内容，如果组件的使用者没有为插槽提供任何内容，则插槽内的默认内容会生效。注意：如果在封装组件时没有预留任何插槽，用户提供传递一些模板片段将会被遗弃。
2023-02-27 20:02:16
1622
14
原创 Vue3 中组件的使用（上）
组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：组件就相当于页面的零件，当做正常的标签使用，不过能够进行自定义的数据传输和事件监听。组件内也能使用其他的组件，任意处都能够使用。一个 Vue 组件在使用前需要先被 “注册”，这样 Vue 才能在渲染模板时找到其对应的实现；组件注册有两种方式：全局注册、局部注册
2023-02-24 19:57:15
22013
46
原创 git 的使用方法 （下 - 远程仓库和图形化）
如果我们希望进行团队协同开发，那么这个时候，我们就需要把 git 仓库信息与团队中的所有人进行共享。分布式 - 中心化与去中心化当开发一个大型项目时通常都是许多人进行合作，每个人负责项目的一部分，`Git` 是实现多人协同开发最常见的工具，但是对于刚接触 `Git` 的人来说，多人协同开发会遇见很多问题，整个 `二` 中的内容主要就是为了给出多人协同开发的正确步骤，并对这个过程中遇到的问题进行解释和解决。
2023-02-23 20:24:22
623
原创 git 的使用方法（上 - 指令）
Git 是目前世界上最先进的 分布式 版本控制系统。git 分为：Workspace：工作区Index / Stage：暂存区Repository：仓库区（或本地仓库）Remote：远程仓库git 配置：当安装完成后，在需要配置 git 的文件中，使用 cmd 进入 黑窗口，或者右键点击 Git Bash Here 进入配置窗口中。进入希望纳入 git 版本控制的项目目录，使用 git init 初始化。
2023-02-23 08:06:05
1047
21
原创 Vue3 中生命周期的使用
组件从创建到销毁的整个过程，不同阶段执行不同的函数每个 `Vue` 组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到 `DOM`，以及在数据改变时更新 `DOM`。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是`created`、`mounted`、`updated` 和 `unmounted`。
2023-02-21 20:07:37
6149
34
原创 Vue3 的状态管理库（Pinia）
- `Pinia` 是 `Vue` 的专属状态管理库，它允许你跨组件或页面共享状态。- `Pinia` 是 `Vuex4` 的升级版，也就是 `Vuex5`- `Pinia` 极大的简化了 `Vuex` 的使用，是 `Vue3` 的新的状态管理工具- `Pinia` 对 `ts` 的支持更好，性能更优， 体积更小，无 `mutations`，可用于 `Vue2` 和 `Vue3`- `Pinia` 支持 `Vue Devtools`、 模块热更新和服务端渲染- `Pinia` 的官方地址为：[`h
2023-02-20 19:07:26
5467
6
原创 使用 Vue3 重构 Vue2 项目
2020年9月18日，vue3正式版发布了，前几天学习完成后，我决定重构后台管理项目，本篇文章给大家讲解了重构过程中遇到的一些问题和解决方案。为什么要重构项目：使代码更容易理解，方便后期维护，也就是要让每个模块的定位清晰明确发现隐藏的代码缺陷代码风格要优雅～，内容质量高，按照合理的设计模式和编程思想去重构同步新的需求项目功能交互来个极致体验，功能上要要尽量做到不卡顿 不闪退，要满足产品需求的细节从长远来看，可以提高编程效率
2023-02-16 15:14:38
1802
43
原创 Vue3 中 axios 的安装及使用
Axios是一个基于promise网络请求库，作用于node.js和浏览器中Axios在服务端它使用原生node.jshttp模块，而在客户端（浏览端）则使用 XMLHttpRequestsAxios可以拦截请求和响应、转换请求和响应数据、取消请求、自动转换JSON数据Axios安装方式：npm install axios
2023-02-13 08:38:54
5853
14
原创 Vue3 中 导航守卫 的使用
正如其名，vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。导航守卫可分为：全局前置守卫、全局解析守卫、全局后置守卫、路由独享的守卫、组件内的守卫
2023-02-11 08:00:00
14406
6
原创 Vue3 中路由Vue Router 的使用
Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。功能包括：嵌套路由映射动态路由选择模块化、基于组件的路由配置路由参数、查询、通配符展示由 Vue.js 的过渡系统提供的过渡效果细致的导航控制自动激活 CSS 类的链接HTML5 history 模式或 hash 模式可定制的滚动行为URL 的正确编码
2023-02-09 10:58:43
4666
15
原创 基于 js 制作一个倒计时
代码实现思路：1. 获取 input 的参数，和现在时间。2. 点击开始则，input 框的时间参数减去现在时间。3. 设置定时器，每一秒执行一次。4. 点击清空则，清除 input 框的内容，停止定时器5. 给 input 框设置正则表达式，只能输入数字，输入其他则返回：输入错误6. 倒计时时间可以自己进行改变，改变后剩余时间自动发生变化。
2023-02-07 15:51:45
2600
7
原创 Symbol 详解与用法
前言：ES5中对象的属性名都是字符串，容易造成重名，污染环境 Symbol： 概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象) 特点： 1、Symbol属性对应的值是唯一的，解决命名冲突问题 2、Symbol值不能与其他数据进行计算，包括同字符串拼串 3、for in, for of遍历时不会遍历symbol属性。
2023-02-03 10:16:51
657
原创 Promise 详解与用法
什么是 Promise？Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。所谓promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。当异步操作执行成功时执行resolve 函数当异步操作执行失败时执行reject 函数
2023-02-01 17:15:29
501
原创 HTML5+CSS3小实例：炫彩的发光字特效
今天我们向大家精选了一款HTML5+CSS3文字特效，文字特效有超酷的动画类型，不多说，一起来看看。描述：这款文字特效既有倒影的效果，又有随机的颜色，看起来非常的炫酷。全文基于 HTML5+CSS3 完成。1. 使文字可以被编辑2. 设置背景色，居中，样式调整3. 设置投影效果4. 字母转大写5. 设置自定义属性6. 设置盒子阴影，调用自定义属性7. 设置动画效果
2023-01-19 15:41:48
7269
35
原创 Vue 常用的修饰符有哪些？
在程序世界里，修饰符是用于限定类型以及类型成员的声明的一种符号。在Vue中，修饰符处理了许多DOM事件的细节，让我们不再需要花大量的时间去处理这些烦恼的事情，而能有更多的精力专注于程序的逻辑处理vue中修饰符分为以下五种：表单修饰符事件修饰符鼠标按键修饰符键值修饰符v-bind修饰符
2023-01-18 14:34:31
5324
原创 用 JavaScript 写一个新年倒计时
在春节即将到来，钟声即将响起，焰火即将燃起的日子里，本篇文章带着祝福先送去给你。愿你在新的一年里好事临门，平步青云，万事如意。预祝春节快乐！马上就要过年了，时间过的真快啊！下面我将分享一个我们中国人的传统节日——春节的倒计时。
2023-01-15 17:07:17
14759
12
原创 基于 js 制作一个贪吃蛇小游戏
在工作学习之余玩一会游戏既能带来快乐，还能缓解生活压力，跟随此文一起制作一个小游戏吧。描述：贪吃蛇（也叫做贪食蛇）游戏是一款休闲益智类游戏，有PC和手机等多平台版本。既简单又耐玩。该游戏通过控制蛇头方向吃蛋，从而使得蛇变得越来越长。 功能按键：W：向上S：向下A：向左D：向右其他：全部为暂停
2023-01-10 15:24:12
3378
36
原创 年度征文 | 回顾2022，展望2023 （清风与我）
2022已经离我们而去了，我们已经踏入了2023，首先祝各位亲朋好友们，在新的一年全家身体康健，诸事顺利，阖家欢乐，好运连连，升职加薪，最重要的是身体健康，工作顺利。
2023-01-06 20:48:04
990
51
原创 基于 Vue 制作一个猜拳小游戏
在工作学习之余玩一会游戏既能带来快乐，还能缓解生活压力，跟随此文一起制作一个小游戏吧。描述：石头剪子布，是一种猜拳游戏。起源于中国，然后传到日本、朝鲜等地，随着亚欧贸易的不断发展它传到了欧洲，到了近现代逐渐风靡世界。简单明了的规则，使得石头剪子布没有任何规则漏洞可钻，单次玩法比拼运气，多回合玩法比拼心理博弈，使得石头剪子布这个古老的游戏同时用于“意外”与“技术”两种特性，深受世界人民喜爱。游戏规则：石头打剪刀，布包石头，剪刀剪布。现在，需要你写一个程序来判断石头剪子布游戏的结果。
2023-01-03 16:43:54
2648
10
原创 Vue3 中computed计算属性的使用
目标：现在vue3的使用越来越普遍了，vue3这方面的学习我们要赶上，今天说一下vue3中computed计算属性的使用。computed函数在vue2中我们都了解过，当我们需要一个值，这个值随着其他值变化而变化，我们就将其放进computed中，computed是用来定义计算属性的。模板当中的表达式虽然很方便，但也只能做简单的操作，如果在模板写太多逻辑，但会让模板变得很臃肿，因此我们推荐使用计算属性来描述依赖响应式的复杂逻辑
2023-01-02 15:08:11
596
5
原创 Vue3 中组合式下的侦听器
1. watch：（手动性）显式的指定依赖数据，依赖数据更新时，才会执行回调函数具有惰性，第一次页面展示的时候不会执行，只有当指定的数据源发生改变时，才会执行；监听ref定义的响应式数据时，可以获取到原值；即要指明监听的属性，也要指明监听的回调；2. watchEffect：（自动性）自动收集依赖数据，依赖数据更新时，重新执行回调函数立即执行，没有惰性，页面首次加载就会执行无法获取到原值，只能得到变化后的值（新值）不能指明监视那个属性，监听的回调中，用到那个属性就监听那个属性
2022-12-30 15:02:15
1446
1
原创 Vue3 中选项式下的侦听器
1. 函数式的侦听器：其中函数名就是要侦听的数据源，函数中的参数，为新数据源的新、旧值；2. 对象式侦听器：在 watch 选项中声明的对象即为对象侦听器 1. 对象名就是要侦听的数据源。 2. 对象中的 handler 方法为数据源发生改变时，执行的代码块，其中参数一为新值，参数二为旧值 3. deep： 1. watch 默认是浅层，被侦听的属性，仅仅在被赋新值时，才会触发回调，嵌套的属性发生变化时，不会触发； 2. 如果想侦听所有嵌套的变更，你需要深层侦听器
2022-12-29 15:10:24
545
1
原创 Vue2和Vue3的双向数据绑定原理
当你把一个普通的 js 对象传入 vue 实例作为 data 选项，vue 将遍历此对象的所有prototype（属性），并使用 object.defineProperty(),将这些 prototype(属性)，全部转换为 getter / setter，在 getter 中收集数据依赖，在 setter 中监听数据变化，一旦数据发生改变，在通知订阅者。每个组件实例，都对应一个 watcher 实例，它会在组件渲染的过程把 "接触" 过的数据 prototype(属性)记录为依赖，之后当依赖项的 set
2022-12-29 14:21:26
1845
1
原创 Vue3 setup 的作用
从 vue2 升级 vue3，vue3 是可以兼容 vue2。所以 vue3 可以采用 vue2 的选项式 API，但是 vue2 不能使用 vue3 的组合式 API。由于选项式 API 一个变量存在于多处，如果出现问题，就需要去涵盖多个函数。项目越大，排查的难度也就越大。setup 用来写组合式 API，从生命周期的角度，相当于取代了 beforeCreate()
2022-12-28 15:07:15
1487
原创 Vue3 响应式数据
什么是响应式数据？“响应式”，是指当数据改变后，Vue 会通知到使用该数据的代码。例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
2022-12-27 15:10:52
3960
原创 Vue3 中 Vite 和 Vue-cli 的特点和区别
Vue-cli 是Vue2.0最棒的前端构建工具，是WebPack的超集Vue-cli 基于WebPack构建，配置好了打包规则内置了热模块重载的开发服务器有丰富的官方插件合集，站在webpack庞大的社区资源上友好的图形化创建和管理Vue项目界面 : vue uivue-cli在(前端)服务启动之前，要把所有代码打包成Bundle再启动服务，这也是为什么一个些大型项目 启动时，特别慢的原因。这一点在Vite做了大幅度改善。Vite是Vue团队开发的新一代前端开发与构建工具，vite不是基于w
2022-12-26 15:32:40
3474
2
原创 vue 前端实现随机背景色
要求是页面对应的几个模块每次打开都要显示多个不同的随机颜色，点击刷新则显示的颜色改变。我就封装成了一个函数，有不足的地方，还希望多多指点。代码如下。步骤：1. 封装一个函数2. 使用for循环，需要使用多少个背景色，就循环几次3. 使用Math.floor()下舍入，把获取到的值进行取整4. 使用Math.random()方法获取随机数5. toString(16)转换为16进制6. 点击刷新则重新调用封装的函数7. 点击颜色块则把颜色赋值到input框中8. 背景色页随之改变
2022-12-11 20:48:32
3013
原创 vue 如何获取路由详细内容信息
vue 中路由（router）的功能就是：把 url 与 应用中的对应的组件进行关联，通过不同的 url 访问不同的组件。但是如果我们想要获取路由中的信息改如何做呢，今天我就给大家详细讲解一下如何获取路由的详细信息。获取路由信息的代码为：this.$router.options.routes
2022-12-07 09:55:04
12075
1
原创 使用 Echarts 插件完成中国旅游地图
设置一个标签，标签设置宽高，否则不显示 引入中国地图的数据 初始化echarts实例，并挂载到dom中 注册中国地图，必须在geo或map中 this.$echarts.registerMap("china", geoJson); 编写配置项，把配置项添加到实例中（简写） 配置项： 背景色 geo：图层（zoom），长宽比例，样式（itemStyle)：地图区域的颜色，阴影，阴影偏移量，特点区域的样式(region)：南海诸岛 series：......
2022-12-06 15:46:23
2077
1
原创 使用 Echarts 插件完成中国地图
大家都知道，一般情况下，想要使用前端设置一个 中国地图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家使用一个插件，使用它就可以轻松的做出各种图。注册的是中国地图，必须包括geo组件或者mep图标类型的时候才可以使用地图分为：世界地图，中国地图，省份地图，市区地图引入中国地图代码import geoJson from "echarts/map/json/china";注册地图this.$echarts.registerMap("china", geoJson);
2022-12-05 14:31:49
4807
4
原创 使用 Echarts 插件实现柱状图功能
大家都知道，一般情况下，想要使用前端设置一个 柱状图 需要使用 canvas 画布进行编写，不仅代码多，逻辑处理麻烦，今天交大家一个插件，使用它就可以轻松的做出各种图。今天先和大家说一下如何引入 Echarts 插件，和柱状图需要如何使用，代码如何进行编写什么是 Echarts 插件echars是一棵树这个图标是简单还是复杂，取决你在这棵树上绘制的枝干有多少树就是dom容器，初始化，挂载到dom容器上，把枝干在配置进来枝干可以在示例中，具体代码里有配置
2022-12-04 16:56:49
1394
原创 vue基于 input 实现密码的显示与隐藏功能
前言：大家都知道，一般情况下，输入框的密码我们是看不到密码的，只有当我们点击查看密码的小图标时，密码才会显现出来，实现起来也非常简单，通过点击图标让input的type属性变化即可。代码讲解：使用Color的true或false判断显示图标的样式，input框则使用Type的样式进行显示，@click="Show"点击修改密码的显示或者隐藏
2022-12-03 16:43:38
4473
原创 基于Vue+nodejs+Element-ui的聊天框项目
一、项目简介本项目基于纯前端（移动端）技术开发一个聊天系统，界面美观大方，采用Nodejs+Vue+ElemenetUI开发实现，主要包含：登录注册，修改个人资料，更改头像，发送消息，单对单聊天等。二、环境介绍语言环境：nodejs数据库：MySQL应用服务器：nodejs开发工具：vscode开发技术：nodejs+vue+elementUI
2022-12-02 17:31:35
8007
React实现TodoList效果案例
2023-04-02
Vue 实现 通用后台管理系统
2023-02-16
基于 js 制作一个倒计时
2023-02-07
HTML5+CSS3小实例：炫彩的发光字特效
2023-01-19
原生js实现贪吃蛇小游戏
2023-01-10
使用H5完成新年倒计时 - 随机祝福
2023-01-07
如何获取路由信息中的name值
2022-12-07
TA创建的收藏夹 TA关注的收藏夹
TA关注的人