- 博客(152)
- 收藏
- 关注
RSS订阅原创 ant-design-pro介绍与使用(读懂框架结构)
我们基本上已经搞清楚了 ant design pro 后台框架模板的基本结构,接下来我们需要按照自己的需求进行开发.因为默认模板的登录页相对复杂,也不符合我们需求,我们可以自行替换需要的登录模板. 我们将在下一节开始具体开发.
2023-07-29 16:32:05
3237
原创 安装React developer tools
react调试工具,像vue-devtool一样,可以方便的追踪调试state,props等实时状态.说明: 当前版本不推荐,在react-design-pro项目中会直接报错.
2023-07-27 10:48:10
782
原创 umi初始化项目
创建 HelloWorld/index.tsx 文件在 config/routes.ts 中添加了路由在 src/locals/zh-CN/menu.ts 中添加了国际化映射。
2023-07-27 10:47:33
359
原创 了解前端技术栈
dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装，没有引入任何新概念，全部代码不到 100 行。dva 是 framework，不是 library，类似 emberjs，会很明确地告诉你每个部件应该怎么写，这对于团队而言，会更可控。另外，除了 react 和 react-dom 是 peerDependencies 以外，dva 封装了所有其他依赖。
2023-07-27 10:44:59
100
原创 React实现Todos
我们到目前为止,react的基本语法已经学完了.如果大家有vue基础,相信能很快理解并掌握react. 当然react还有路由管理,状态管理等相关知识点,我们会在接下来的项目开发中,带大家直接上手,在开发中理解并学会其应用.
2023-07-27 10:43:46
207
原创 react包含关系(组合以及继承)
少数情况下，你可能需要在一个组件中预留出几个“洞”。这种情况下，我们可以不使用children，而是自行约定：将所需内容传入 props，并使用相应的 prop。React 有十分强大的组合模式。我们推荐使用组合而非继承来实现组件间的代码重用。（对话框）等展现通用容器（box）的组件中特别容易遇到这种情况。有些组件无法提前知晓它们子组件的具体内容。我们建议这些组件使用一个特殊的。
2023-07-27 10:42:50
236
原创 react状态提升(汇率转换案例实现)
两个子组件都可以输入薪资,单位分别是人民币(CNY)和美金(USD). 其中一个被输入,同时会被换算(汇率按照6.65)成另一个币种显示换算后的结果. 两个组件输入的值会。通常，多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的共同父组件中去。让我们看看它是如何运作的。. 通过对父级组件的修改,从而影响另一个组件的输入. 这个就是input.value的。. 同时外部组件会根据薪资判断是否是”有钱人”.的input值都是分别被另一个子组件。的,所以这个值我们把它。
2023-07-27 10:41:34
197
原创 react表单实现
我们可以把两者结合起来，使 React 的 state 成为“唯一数据源”。渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。）之类的表单元素通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用。当然获取表单值的实现方式是灵活的.在 HTML 中，表单元素（如。
2023-07-27 10:39:36
101
原创 react使用Refs&DOM
被修改的子组件可能是一个 React 组件的实例，也可能是一个 DOM 元素。我们需要再提交的时候,获取input输入框的值,所以需要获取目标的dom元素,通过ref可以直接获取到input.在构造组件时，通常将 Refs 分配给实例属性，以便可以在整个组件中引用它们。Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。回调函数，在实例的属性中存储对 DOM 节点的引用。中的元素时，对该节点的引用可以在 ref 的。在典型的 React 数据流中，
2023-07-27 10:32:31
234
原创 react条件渲染&列表&key
意思是我们每一个遍历的元素都应该有一个唯一的key,这个和vue是一样的,用于react在底层渲染的时候区分组件. 原则上我们不能使用数组的下标作为key,因为数组增删会影响下标,而应该给数据提供唯一的值.的每一项是唯一的,我们可以采用值作为key. 实际开发中建议使用数组元素对象的id作为key.条件渲染比较简单,阅读官网。
2023-07-27 10:31:25
109
原创 react添加事件
来定义这些合成事件，所以你不需要担心跨浏览器的兼容性问题。React 事件与原生事件不完全相同。从打印的结果我们可以看到, 箭头函数声明的方法,可以等同于在构造函数中通过this声明., 结果正常,,因为箭头函数会继承父类的this,所以这里的this指向实例对象.这里我们必须通过箭头函数返回一个新的函数来实现onClick传参的目的.，在 JavaScript 中，class 的方法默认不会。在这里，e 是一个合成事件。通常情况下，如果你没有在方法后面添加。，当你调用这个函数的时候。
2023-07-27 10:30:33
163
原创 react组件&props
组件，从概念上类似于 JavaScript 函数。它接受任意的入参（即 “props”），并返回用于描述页面展示内容的 React 元素。props是组件的属性,可以通过props获取组件外部传递的属性和值. 可以同时传递多个参数,通过参数名称获取.. 这个问题我们暂时先不讨论, 大家知道有这两种方式,接下来还是用我们熟悉的 class形式进行演示.组件可以随意组合和嵌套,我们把三个。，都决不能修改自身的 props。注意: 任何组件有且只有一个。this**,我们获取的是。
2023-07-26 13:44:53
80
原创 react生命周期&State
是组件的属性 , 组件中的 state 包含了随时可能发生变化的数据。我们需要在react组件渲染的不同阶段,触发不同的事件逻辑,所以我们需要有生命周期方法.以下列举几个常用的。: 根据返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响.我们尝试在生命周期函数中,修改nowTime, 发现也打印修改后的内容,但页面并没有被渲染.我们发现,可以打印出实例对象,存在nowTime属性,但是页面不渲染.** 为什么?: 在最近一次渲染输出（提交到 DOM 节点）之前调用.
2023-07-26 13:44:08
163
原创 react元素渲染
当首次调用时，容器节点里的所有 DOM 元素都会被替换，后续的调用则会使用 React 的 DOM 差分算法（DOM diffing algorithm）进行高效的更新。但是，目前应该避免使用返回的引用，因为它是历史遗留下来的内容，而且在未来版本的 React 中，组件渲染在某些情况下可能会是异步的。React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入。
2023-07-26 13:42:43
115
原创 JSX运用
且看这段代码,并不符合我们认识的javascript语法,好像在javascript中加载了html(xml),但是它却能(经过babel的解析)正确工作.中书写表达式. 我们列举几种情况,来说明 JSX中的语法规则. JSX应该嵌入js表达式,什么是表达式呢?,因为首先需要定义一个js表达式作用域,然后style属性接收一个对象类型.样式名需要转换为驼峰形式.获得转换后的结果,返回字符串类型,可以。在JSX中,属性不应该采用关键词,比如。三元运算符,会产生结果,可以。在JSX中,我们可以在。
2023-07-26 13:42:09
156
原创 react入门
React经历了多个版本的迭代升级,目前(2021年4月7日)最新版本为: v17.0.2 .react是用于构建用户界面的 JavaScript 库,react特点如下(摘自。做出来以后，发现这套东西很好用，就在2013年5月开源了。的内部项目，因为该公司对市场上所有 JavaScript。框架，都不满意，就决定自己写一套，用来架设。
2023-07-26 12:01:14
101
原创 服务端渲染(ssr)
Vue.js 是一个用于构建客户端应用的框架。默认情况下，Vue 组件的职责是在浏览器中生成和操作 DOM。然而，Vue 也支持将组件在服务端直接渲染成 HTML 字符串，作为服务端响应返回给浏览器，最后在浏览器端将静态的 HTML“激活”(hydrate) 为能够交互的客户端应用。一个由服务端渲染的 Vue.js 应用也可以被认为是“同构的”(Isomorphic) 或“通用的”(Universal)，因为应用的大部分代码同时运行在服务端和客户端。
2023-07-26 12:00:01
286
原创 Nuxt.js框架使用
注意：如果使用pnpm，请确保之前有.npmrcwith shamefully-hoist=trueinside pnpm install。nuxt.js是一套使用vue框架开发应用的服务端渲染框架，提供了开箱即用的功能.一套vue（react）代码，在服务端执行一次，在客户端再执行一次，就做同构。浏览器窗口应自动打开。
2023-07-26 11:59:04
160
原创 pinia介绍
Pinia 最初是在 2019 年 11 月左右重新设计使用Composition API。从那时起，最初的原则仍然相同，但 Pinia 对 Vue 2 和 Vue 3 都有效.Pinia（发音为/piːnjʌ/，类似于英语中的“peenya”）是最接近有效包名piña（西班牙语中的pineapple）的词。菠萝实际上是一组单独的花朵，它们结合在一起形成多个水果。与 Store 类似，每一家都是独立诞生的，但最终都是相互联系的。它也是一种美味的热带水果，原产于南美洲。
2023-07-26 11:58:00
674
原创 前端vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化我们是否可以通过组件数据的传递来完成呢？对于一些简单的状态，确实可以通过props的传递或者Provide的方式来共享状态；但是对于复杂的状态管理来说，显然单纯通过传递和共享的方式是不足以解决问题的，比如兄弟组件如何共享 数据呢？
2023-07-26 10:49:33
78
原创 路由导航守卫
4.在beforeRouteEnter钩子中next((vm)=>{})内接收的回调函数参数为当前组件的实例vm，这个回调函数在生命周期mounted之后调用，也就是，他是所有导航守卫和生命周期函数最后执行的那个钩子。运行在路由上的守卫 (相比上面的全局守卫 全局守卫:只要有跳转就会执行守卫函数 而路由守卫呢 是只有跳转到当前的路由时才执行路由守卫函数) 用处:一般做跳转判断。【组件内的】：是指在组件内执行的钩子函数，类似于组件内的生命周期，相当于为配置路由的组件添加的生命周期钩子函数。
2023-07-26 10:38:27
257
原创 编程式路由
router是VueRouter的一个对象，通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象，这个对象中是一个全局的对象，他包含了所有的路由包含了许多关键的对象和属性。对象，包含路由中查询参数的键值对。本质是向history栈中添加一个路由，在我们看来是 切换路由，但本质是在添加一个history记录。字符串，等于当前路由对象的路径，会被解析为绝对路径，如 “/home/news”数组，包含当前匹配的路径中所包含的所有片段所对应的配置参数对象。
2023-07-25 11:53:39
195
原创 vue3动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。在当前的路由需要指定一下传递的属性名字。可以直接在链接上传递参数。
2023-07-25 11:52:37
550
原创 vue路由嵌套
实际生活中的应用界面，通常由多层嵌套的组件组合而成。一个页面当中有多个子页面 这种结构叫做嵌套路由。需要在children中指定相应的子路由。
2023-07-25 11:49:25
162
原创 vue3路由属性和配置
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。用户第一次访问网站页面(“/根目录”首页)时，地址栏里边没有“#锚点”的信息，也就没有对应的组件用于显示，用户体验不好，现在可以通过。实现一种效果，即当浏览器没有任何 #锚点信息时，默认也给显示一个组件。
2023-07-25 11:48:24
1136
原创 VUE路由安装和使用
通过createRouter创建路由对象并传入routes和history模式。创建history路由模式。在main.js中引入并使用。创建基于内存的历史记录。创建hash路由模式。vue2.x使用的是。
2023-07-25 11:43:33
243
原创 vue3动态组件
我们可以使用activated()，在组件激活的时候会被调用，每次进入页面的时候，都会执行，在这个里面进行数据的请求，用来替代mounted。简单的说，动态组件就是将几个组件放在一个挂载点下，这个挂载点就是标签，其需要绑定is属性，属性值为父组件中的变量，变量对应的值为要挂载的组件的组件名，然后根据父组件里某个变量来动态显示哪个，也可以都不显示.包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。可以将动态组件放到组件内对动态组件进行缓存，这样动态组件进行切换的时候，就不会每次都重新创建了。
2023-07-25 11:42:13
1625
原创 VUE3插槽
插槽（Slot）是Vue提出来的一个概念，正如名字一样，插槽用于决定将所携带的内容，插入到模板template指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。没有插槽的情况下在组件标签内些一些内容是不起任何作用的，当我在组件中声明了slot元素后，在组件元素内写的内容就会跑到它这里了！Slot 通俗的理解就是“占坑”，在组件模板中占好了位置，当使用该组件标签时候，组件标签里面的内容就会自动填坑（替换组件模板中。假如既有传入的内容又有默认内容,那么这个传入的内容将会替代默认的内容被渲染出来.
2023-07-25 11:39:31
184
原创 vue自定义指令
Vue在除了提供默认内置的指令外，还允许开发人员根据实际情况自定义指令.在Vue的项目中，大多数情况下，你都可以操作数据来修改视图，也就是所谓的操作DOM，但是还是避免不了偶尔要操作原生DOM，当我们需要操作DOM的时候，就可以使用到自定义指令。当然也能用$refs<template><script></script>代码基本能实现我们需要的功能，但是如果有很多页面都需要这个功能，那我们就只能是复制这段代码了，而通过自定义指令我们就能解决这种问题。
2023-07-25 10:07:22
296
原创 vue组件之间数据共享
由于vue是单向数据流,父组件传递给子组件的属性,子组件只能使用不能修改,在vue2中可以使用.sync修饰符.但是在vue3中v-bind的.sync修饰符和组件的model选项被删除了.在vue3中我们可以直接使用v-model语法糖进项绑定,绑定属性发生了变化,属性名是 modelValue， 事件名是：update:modelValue.：在任何后代组件中接收想要添加在这个组件上的数据，不管组件嵌套多深都可以直接拿来用。子组件向父组件传值可以使用$emit。子组件child.vue组件。
2023-07-25 09:35:15
1169
原创 前端组件化概述
对于前端来说，我们为用户创造价值才是特别需要关注的一个问题，这么多年过去了，前端到底为用户创造了什么价值呢？70 年代，施乐公司做的一个软件管理的流程图软件，那个时代，整个的界面就是这个样子，施乐已经算比较先进的了。再到 90 年代，当时这个画面还是很惊艳，按钮键是立体的。现在来看这个东西就有不那么美观了。2006 年左右的时候，Vista 的界面已经开始有了一个非常大的变化了，这时已经是设计师在主导这个界面的了，但是性能并不佳。
2023-07-24 11:17:36
220
原创 vue中的ref
2.遍历的元素,先定义一个空数组,定一个函数获取元素,返回给模板使用,通过ref绑定这个函数。1.单个元素:先声明ref响应式数据,返回给魔板使用,通过ref绑定数据。
2023-07-24 11:16:28
3314
1
原创 vue3生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。我们称这一系列的过程就是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。
2023-07-24 11:15:16
6342
原创 vue3实现侦听器
它会在同步执行过程中，自动追踪所有能访问到的响应式属性。watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组.然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。watch的套路是：既要指明监视的属性，也要指明监视的回调。
2023-07-24 11:14:06
257
原创 vue3计算属性
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。(2)如果计算属性要被修改，那必须写set函数去响应修改,set函数可以接收用户修改计算属性的值。与methods实现相比，computed内部有缓存机制（复用），效率更高，调试方便。在多数情况下我们只考虑读取不考虑修改，可以把set部分删掉,直接改写成函数的形式.(1)当给计算属性设置值的时候会触发set()计算属性默认有自己的get()和set().(2).当依赖的数据发生改变时会被再次调用。
2023-07-24 11:13:16
809
原创 vue响应式原理
说明：比如，Object.defineProperty(obj, name, desc)在无法定义属性时，会抛出一个错误，而Reflect.defineProperty(obj, name, desc)则会返回false。说明：Reflect对象的方法与Proxy对象的方法一一对应，只要是Proxy对象的方法，就能在Reflect对象上找到对应的方法。通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、属性的添加、属性的删除等。数组类型：通过重写更新数组的一系列方法来实现拦截。
2023-07-24 11:10:30
152
原创 reactive和ref
接收的数据可以是：基本类型、也可以是对象类型。了Vue3.0中的一个新函数——基本类型的数据：响应式依然是靠。作用: 定义一个响应式的数据。创建一个包含响应式数据的。对象类型的数据：内部。
2023-07-24 11:09:34
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人