- 博客(99)
- 收藏
- 关注
RSS订阅原创 React之数据绑定以及表单处理
像、、这样的表单元素不同于其他元素，因为他们可以通过用户交互发生变化。这些元素提供的界面使响应用户交互的表单数据处理更加容易。设置了value的是一个受限组件，对于受限的，渲染出来HTML元素始终保持value属性的值，此时用户在渲染出来的组件里输入任何值都不起作用。杜宇不受限的input组件，渲染出来的元素直接反映用户输入。value用于、写一个完整的表单元素的实例。
2024-03-01 17:59:49
1177
原创 React之组件定义和事件处理
如果需要改变某些数据的话，或者想要存储一些数据并且想要对和谐数据进行一些增删改查的话，那么应该使用有状态的组件。因为数据的更改是根据状态进行更改的。* 一旦触发他生命周期的函数，它就会影响当前项目的运行，所以在尽可能的情况下使用无状态组件。* 更过时候我们应该区别使用无状态组件，因为如果有状态组件会触发生命周期所对应的一些函数。在react中，组件分为函数组件和class组件，也就是无状态组件和有状态组件。实现父穿子，子组件更改父组件的state的属性值，实现通过状态改变展示不同的组件。
2024-03-01 10:38:46
955
原创 React入门之React_使用es5和es6语法渲染和添加class
注意如果在react中添加类名不能写class要写className，同时不能再同一个容器里渲染多个虚拟dom，必须要有根元素进行包裹。var element = React.createElement('li',{},'hello') //节点，节点属性，标签内容。注意在使用es6语法时候script必须表明type为text/balel。//床架年组建，使用extends继承。必须要有根元素进行包裹。//如果有多层嵌套的关系。
2024-02-26 18:10:31
646
原创 React入门简介
react是Facebook用来创建用户界面的js库。React不是一个MVC框架，而是一个用于构建组件ui库，是一个前端界面开发工具，所以很多人认为React是MVC中的V（视图）。React的存在能够很好的解决‘构建随着时间数据不断变化的大规模应用程序’，react能够引导我们重新思考如何构建应用程序。react的核心就是封装可复用性高的组件，各个组件维护自己的状态和ui，当状态更新，自动重新渲染整个组件。前端主流框架有vue、react、angular。
2024-02-26 16:43:46
1279
原创 vue3__Provide / Inject (依赖注入)和mixins
此时当父组件的值发生变化的时候，子组件的也会同步变化。2.创建mixins.js文件。1.创建mixins文件夹。例如父组件中提供方法。
2024-01-16 16:39:20
582
原创 vue__动态和异步组件
组件按需引入 ：当用户滑动到了具体之间的位置再去加载该组件（实现组件懒加载，到他了再去加载节省性能）在大型项目中，我们可能需要拆分应用为更小的块，并仅在需要时再从服务器加载相关组件。这里A和C组件使用了defineAsyncComponent异步组件所以分包打包了。#通过defineAsyncComponent分包处理：对组件或者页面进行分包处理。注意：使用markRaw来避免出现响应式组件消耗性能。使用Usage ：@vueuse/core这个包。可使用keep-alive加载组件。
2023-12-27 17:14:00
422
原创 vue3__完整创建项目以及配置代理打包，以及根据配置去打包
3.3安装vant、element-plus和像素转换以及vant和element-plus按需引入插件，就不用再main.js里面在引入他们了。通过VITE_NODE_ENV判断是那个打包配置 这里--mode后的值就是VITE_NODE_ENV的值。npm i unplugin-auto-import -D //setup语法糖插件。npm i unplugin-vue-components -S //按需加载组件。a.路由配置，router/index.js。最后vite.config.js。
2023-12-26 18:44:00
650
原创 vue3__组件通信
使用mitt插件实现（相当于vue2的export let bus = new Vue();注意如果你要将props的值进行局部使用，需要重新将里面的值定义出来（要不直接改值会报错）2.使用defineEmits定义要传递给父组件的事件。1.使用defineProps接受父组件传递的参数。可以在组件上使用以实现双向绑定。创建mitt.js文件。
2023-12-25 17:16:04
438
原创 vue3_router(路由)
router：相当于vue2中this.$rouer 返回路由器实例。route：相当于this.$route 返回当前路由的地址。
2023-12-25 11:11:35
418
原创 vue3_setup中toRefs和computed以及watch
将一个响应式对象转换为一个普通对象，这个普通对象的每个属性都是指向源对象相应属性的 ref。每个单独的 ref 都是使用。在调用时只会为源对象上可以枚举的属性创建 ref。如果要为可能还不存在的属性创建 ref，请改用。1..当从组合式函数中返回响应式对象时，来完成数据的解构，防止它消除相应性。二、computed（计算属性）
2023-12-04 15:27:26
509
原创 vue3_setup基础_渲染函数（ref,reactive）
来解决什么问题：使用（data,computed,methonds,watch）组件选项来组织逻辑通常都很有效。然而，当我们组件变的更大的时候，逻辑关注点的列表也会增长。Proxy响应式（ref用来定义基础数据类型 reactive用来定义引用性数据类型）b.必须遍历对象的每个属性有多重的时候需要递归对数据进行处理。vue3中可以使用reactive对引用性数据类型进行定义实现Proxy响应式数据。在改变ref定义的数据时候需要.value实现赋值，否则不能实现响应式改变。一、setup语法糖。
2023-10-12 17:35:21
273
原创 vue2和vue3的区别
3.X：已被移除不再支持，建议使用$refs。2.x 版本中 v-for > v-if。3.X 版本中 v-if > v-for。2.X 中会把ref自动填充内容。2.X：访问当前实例的直接子组件。1.script部分（可以兼容vue2写法）4. this.$children的区别。3.X 中需要手动添加。2.v-if和v-for的优先级比较。一、vue2和vue3的区别。3.v-for中的Ref数组。
2023-10-12 15:54:12
216
原创 创建vue3项目（vite）
注意：使用vite构建工具构建的vue3项目，将自己创建的项目放在App.vue组件/HelloWorld.vue组件中，不需要注册（使用vue脚手架构建vue3项目需要），只需要导入即可。基于webpack的项目有一个问题，就是编译速度慢。npm init @vite/app 项目名称。vite优势：在开发过程中大大提升我们的效率。1.创建vue2项目：基于构建工具webpack。vue create 项目名称。2.创建vue3项目：基于vite。
2023-08-09 10:16:14
137
原创 js中数据对象通过比较某个属性的大小排序
基本思想：在同一数组中从第一个开始往后寻找比他大的值进行替换，将数值小的先保存在变量里，将数值大的赋值给原本数值大的位置，再将小替换到数值大的位置上。使用数字排序，必须通过一个函数作为参数来调用。基本思想：根据提供的排序规则，对数组元素进行排序。这里扩展数组的排序方式。
2023-05-24 16:50:31
582
原创 vue实现思维导图流程图
设置B和A的连接：把第一个div的伪元素::after设置border-left: solid 2px blue;这样做是让线段1向下展示，高度只有B盒子的一半，这样就感觉像线段拐弯了，从A连接到B的样式，其实是多个线段拼接起来而已。设置D和A的连接：把第最后一个div的伪元素::after设置border-left: solid 2px #000;设置C和A的连接：把中间div的伪元素::after设置border-left: solid 2px yellowgreen;
2023-04-23 15:53:33
1730
1
原创 使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能
使用scrollIntoView和监听滚动区域子div的相对于视口的顶部的距离，来实现导航定位功能
2023-03-21 18:45:00
3115
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人