- 博客(257)
- 收藏
- 关注
RSS订阅原创 React表单与事件
类似于传统的DOM表单控件，用户输入不会直接引起应用state的变化，我们也不会直接为非受控组件传入值。想要获取非受控组件，我们需要使用一个特殊的ref属性，同样也可以使用defaultValue属性来为其指定一次性的默认值。在HTML中，表单元素与其他元素最大的不同是它自带值或数据，而且在我们的应用中，只要是有表单出现的地方，就会有用户输入，就会有表单事件触发，就会涉及的数据处理。在我们用React开发应用时，为了更好地管理应用中的数据，响应用户的输入，编写组件的时候呢，我们就会运用到。
2022-10-12 14:56:33
588
原创 React State
State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集，即State中的所有状态都是用于反映组件UI的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。会发现是更新之前的值，这时我们就需要使用setState函数中的参数（回调函数），在更新this.state以后再打印msg的值。//第四步：定义修改值得函数====》利用接受到的父组件this调用父组件中的函数修改状态中的值。
2022-10-12 14:52:21
519
原创 React Props
...”表示JSX的延展操作符，这种方式可以很方便的为组件指定多个属性，并且为属性的值指定数据类型。React 中的每一个组件，都包含有一个属性（props），，在组件内部，我们可以通过this.props获取属性对象。（1）定义一个this.props对象，在对象中声明多个。React 的一大特点是。，用于表示组件的属性。
2022-10-12 14:49:29
411
原创 React 组件
但这里要注意的是，必须要用一个外层的 JSX 元素把所有内容包裹起来。返回并列多个 JSX 元素是不合法的。React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。我们在编写 React.js 组件的时候，一般都需要继承 React.js 的。一个组件类必须要实现一个。注意：一份文件一个类。
2022-10-12 14:41:14
272
1
原创 环境安装、项目结构
让目录结构更易懂:接下来，我们改动一下src里面的内容和结构，让首次接触react的小伙伴尽量能觉得他有点亲切的感觉，事实证明，越亲切的事物我们越希望去接近。： 这里面包含了react项目中会用到的一些组件，install的时候下载下来的，你可以进去看看，有一些如base64之类的我们可能会用到的组件；：里面包含了一些我们自己使用的js文件，css文件，img文件等等，但你打开src文件夹你会发现很混乱，不要管什么app.js，你就看到。：里面包含了我们项目中的启动页面，react比较适合。
2022-10-12 14:37:25
277
原创 React简介
/命令式编程：命令“机器”如何去做事情(how)，这样不管你想要的是什么(what)，它都会按照你的命令实现。React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。你可以在React里传递多种类型的参数，如声明代码，帮助你渲染出UI、也可以是静态的HTML DOM元素、也可以传递动态变量、甚至是可交互的应用组件。−React通过对DOM的模拟，最大限度地减少与DOM的交互。
2022-10-12 14:36:41
360
原创 接口----Ts
接口是一种自定义类型, 也就是类型了, 所以不但可以声明变量的类型，也可以声明函数参数(也是变量类型)，函数返回值的类型。接口变量可以引用接口实现类对象, 但是只能访问接口中声明过的成员, 接口变量也可赋值为null或undefined,如果想使用此接口变量访问所有对象成员，那么可以对接口变量进行"类型断言"为对象所属类的类型。(2)对象是通过new 出的对象, 对象中成员必须包含接口中声明的成员不可少，但是。对象是字面量对象, 对象中成员必须与接口中声明的成员完全相同，不可多，也不可少。
2022-10-11 14:31:59
218
原创 类的类型变量
父类变量可以指向子类对象，指向子类的子类的对象也可以, 比如父类是"人(Person)",子类是"男孩（Boy）"，因为男孩本就是人，所以可以用人指向它, 只是男孩对象被人指向后，只把男孩当人看待，不当男孩看待. 以当前示例为例，对于let person2: Person = new Boy();// p1.sleep() ====> 报错，因为sleep是Boy类中的，p1是一个Person类。//运行的是Person中的eat函数。//运行的是Person中的run函数。//父类变量指向子类对象。
2022-10-11 14:30:37
348
原创 类----Ts
实际上同一个类中super和this可以出现在构造函数和方法中，它们的值都是一样的，但是它们的偏移量不相同，super只管到父类对象，而this管到子类对象，而父类对象只是子类对象的一个组成部分。5 使用子类对象访问有重写的方法时，父类方法会被隐藏，如果要访问父类中被重写的方法， 子类的构造函数或子类的方法中使用super来访问。 在父类和子类中, 两个方法名相同, 返回值类型相同, 参数相同, 子类重写方法时不能使用比父类中被重写的方法更加严格的修饰符。
2022-10-11 14:29:58
320
原创 函数---Ts
ps:带默认值的参数不需要放在必选参数的后面。如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值从而来获得默认值。当然，还可以给参数设置默认值，在所有必选参数后面带默认值的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。//必须填写设定的类型,a的返回值就是一个string类型的。// 定义式:是在作用域内部被引用的function。// 可以不写返回值的类型,但是必须写参数的类型。// 剩余参数(...)===>必选参数。//可以规定剩余参数的类型。
2022-10-11 14:29:28
213
原创 接口---Ts
可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。）是一个很重要的概念，它是对行为的抽象，而具体如何行动需要由类（classes）去实现（implement）。带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?// 此时的一不是box1类型的,box1只是它的一个别名;//报错.不能修改run的值,run是可读属性。只关注值的外形， 只要传入的对象满足提到的条件，那么它就是被允许的。// 如果想要可选使用，就要用====>"?
2022-10-11 14:28:52
348
原创 类型断言--Ts
有些时候，我们需要做一些“自己比编译器更清楚的知道自己在做什么”，这个时候就用到断言，告诉编译器：没错，就是这样的，就是要这么干。// 因为不确定axios请求下来的数据是什莫类型得，所以通常把它的返回值设置成any类型的。// 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的。// strLength2.length是number类型得。// someValue1.length是any类型得。// 类型断言有两种形式。//将someValue当作一个字符串进行使用。
2022-10-11 14:28:18
578
原创 基础类型--Ts
/ object表示非原始类型，也就是引用类型，是除number，string，boolean，symbol，null或undefined之外的类型，// 元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。总之，和JS的玩法一样。// 可以使用"对象", "数组对象"、string、number等为其赋值，null和undefined不行的。// 和JS一样，TS里的所有数字都是浮点数，类型是 number。// 数组合并了相同类型的对象，而元组（Tuple）合并了不同类型的对象。
2022-10-11 14:27:39
326
原创 Vue3.0面试题
4.1 setup 语法 返回的对象的成员可以在模板中使用 也可以在组件的api中使用 但是这个函数中不能使用组件api中的东西。4.3 setup函数内部的变量可以去设计为响应式的变量 那么可以使用官方的hook,也就是ref reactive等工具。//4.setup返回的对象中的数据和data中的数据同名了 setup优先级更高。//2.这个函数的返回值 可以被当前组件的任意地方使用。4.5特点: //1.这个函数内部的变量/函数是局部的。//ref这个响应式是怎么设计的?
2022-10-11 14:26:19
221
原创 生命周期函数
这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。注意：不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在。父组件的更新钩子将在其子组件的更新钩子之后调用。这个钩子在服务器端渲染期间不会被调用。这个钩子在服务器端渲染期间不会被调用。
2022-10-11 14:25:47
518
原创 模块化---Vue3.0
/ 这里易错语法:如果箭头函数直接指向返回值的同学 记得把返回的对象用小括号括起来。一个文件一个小仓库,仓库之间可以相互访问数据 不同组件也可以访问任意小仓库数据。//2.有参数 想用哪个用哪个。// 类似于计算属性。
2022-10-11 14:25:14
271
原创 数据仓库配置(Pinia)
在pinia中没有提供mutaion 因为Actions就够了(它可以异步同步的统一修改状态)之所以提供这个功能 就是为了项目中的公共修改状态的业务统一。//可以多写但是不会添加到仓库中，相同的变量会覆盖值，不同的也不会添加。//store是一个响应性对象 因此可以修改并刷新。//2.有参数 想用哪个用哪个。3.2添加仓库文件car.js。//一定不要忘了value。//main.js文件。3.3.vue文件使用。"6666修改成功啦"将仓库的值赋值给变量。// toRef修改。// 类似于计算属性。
2022-10-10 23:31:00
195
原创 网络配置---Vue3.0
/如果代理的target是https接口,需要配置它。：(vue2.0中的vue.config.js文件)//注意在组件钩子中获取,不要在事件中。：(vue.config.js文件)// 需要代理的网址。
2022-10-10 23:30:10
607
原创 isRef toRef toRefs readonly
toRef()====>基于响应式对象上的一个属性，创建一个对应的 ref。这样创建的 ref 与其源属性保持同步：改变源属性的值将更新 ref 的值，反之亦然。isRef()=====>检查某个值是否为 ref。//判断是否为响应性变量。是需要改的对象中的属性。
2022-10-10 23:29:28
148
原创 Suspense
suspense> 组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。等待异步组件时渲染一些额外的内容,让应用有更好的用户体验。
2022-10-10 23:28:52
85
原创 Teleport
Vue 鼓励我们通过将 UI 和相关行为封装到组件中来构建 UI。我们可以将它们嵌套在另一个内部，以构建一个组成应用程序 UI 的树。然而，有时组件模板的一部分逻辑上属于该组件，而从技术角度来看，最好将模板的这一部分移动到 DOM 中 Vue app 之外的其他位置。-- 在body中添加模态弹窗 -->举例：(在body中添加模态弹窗)to属性：放到指定位置。
2022-10-10 23:28:16
81
原创 组件使用、计算属性
和Vue2.0不同，2.0使用组件是要在components属性中注册组件；在Vue3.0中只需要在script标签中导入组件就可以使用了，不需要再注册组件。用法：基本用法和vue2.0没什么区别，但是不用再都写在computed对象中,只需要再下那个要计算的函数前添加computed().注意引用对象arr要用reactive函数，实现响应式数据。
2022-10-10 23:27:45
100
原创 响应式原理
如果这份vue文件中使用了2.0的语法要使用3.0的语法就可以使用steup函数；如果vue文件只使用3.0语法，就可以使用setup语法糖==>script标签中添加setup。监听了value的改变，劫持value属性的setter和getter;使用场景：用于一般的基本数据，或者应用数据的嵌套层级不深的数据上。setup返回的对象中的数据与Data中的数据重名了，setup的优先级更高。这个函数的返回值可以被当前组件的任意地方使用。函数内部的变量、函数是局部的。一样，但底层是采用的是。
2022-10-10 23:27:13
148
原创 ref函数/reactive函数
语法：const 代理一个对象 = reactive(被代理的对象) 接收一个对象（或数组），返回一个代理器对象（proxy对象）基本类型的数据：响应式依然是靠Object.defineProperty()的get和set完成的。对象类型的数据：内部“求助”了Vue3.0的一个新的函数------reactive函数。- 内部基于ES6的Proxy实现，通过代理对象内部的数据都是响应式的。使用场景：用于一般的基本数据，或者应用数据的嵌套层级不深的数据上。一样，但底层是采用的是。
2022-10-10 23:26:34
217
原创 setup
使用setup函数后可以直接再函数内定义变量修改变量和方法，不用在data中定义数据，再去metheds中写方法，注意每次都要返回数据和方法。setup不能是一个async函数，因为返回值不再是return的对象，而是Promise，模板看不到return对象中的属性。Vue2.x配置（data，methods，computed......）中可以访问setup中的属性，方法。setup返回的对象中的数据与Data中的数据重名了，setup的优先级更高。函数内部的变量、函数是局部的。
2022-10-10 23:25:54
647
原创 Vue----全局组件和局部组件
1.全局组件:组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符。2.局部组件:一个vm实例可以有多个局部组件,但是只能供当前vm实例使用。（filter举例，不只filter只要是Vue里面的方法都是可以用的）(不会报错,但是只能使用一次 多次使用只显示第一个)只有当前组件拥有的功能（指令，过滤器，组件）所有组件共同的功能（指令，过滤器，组件）没有单文件组件时不能使用单标签。注册的组件不要跟系统标签同名。
2022-10-10 23:24:37
178
原创 Vue3.0
4.1 Composition API (组合API)vue3.0更好的支持TypeScript。 4.2 新的内置组件。 2.1 性能的提升。 4.3 其他改变。
2022-09-26 17:27:02
246
原创 Module
可用于业务分块开发:由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter。//局部命名空间(让state的中变量与其他模块中的同名变量不冲突)
2022-09-26 17:20:42
164
原创 Vuex(State、Getter、Mutation、Action)
Action 提交的是 mutation，而不是直接变更状态。属性，并在属性中定义修改值的函数，后面使用时就可以将函数名直接当作变量来使用。getter就就像是store的计算属性,它会传入state对象供我们操作。//如果fnAsync函数是一个异步业务函数,就会导致更新失败。就类似于之前的Data，但是这个state全局都可以使用。它才会去帮我们通知所有使用数据的组件更新数据 刷新。中的函数来进行修改仓库中的值。页面上使用语句------"我就是所有共享的数据""box2修改的值""box2修改的值"
2022-09-26 17:19:57
523
原创 ---Vue仓库--
1.为了方便实现组件之间的数据共享,Vuex是他们团队借鉴了redux,用来实现vue组件全局状态(数据)管理的一种机制.如果你实在不知道开发中什么数据才应该保存到Vuex中,那你就先不用Vuex,需要的时候自然就会想到它。存储在 vuex中的数据都是响应式的，能够实时保持数据与页面的同步。一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可.能够在vuex中集中管理共享的数据，易于开发和后期维护。
2022-09-26 17:18:27
198
原创 -路由守卫-
出发路由，预备从当前组件离开，判断路由变化，判断组件是否重用，判断新路由初始化，判断组件初始化，路由与组件初始化完毕，路由组件重定向完毕。，组件被激活，使用不了this，故构造指定该next 可以接收一个回调函数接收当前vm 实例----路由传参获取参数，得到初始化数据。，组件重用时被调用----路由传参获取参数，避免增添watch 开销。a，路由鉴权-----用户体验：界面，功能，bug，效率，权限。3）组件内部生命周期守卫----针对组件。，路由初始化(组件未初始化)----
2022-09-26 17:17:46
79
原创 路由----初始
前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 vue-router就是专门做切换组件的功能,它是一个单独的技术,依赖vue 就像jQuery和dom操作一样。// history底层是切换组件得方式是使用H5的windows.history的技术，当地址栏的history状态发生变化时，// hash切换组件得方式是使用是的老技术Hash值，当地址栏的hash发生变化时，//注意:子路由中的匹配地址不要在前面加/ 否则就会认为是根路由。
2022-09-26 17:17:09
69
原创 组件----总结
v-for、v-if优先级：2.0 v-for优先 3.0 v-if优先 v-fi和v-for不能写在一行。name：‘devtool’====>意义看见组件的名字，打包时要用到，路由也可以用到。computed:{}===>特点：缓存起来，数据变化才会重新计算。comments：true/false===>要不要注释。首屏白屏 首屏加载慢====>答案不是v-cloak。v-on：事件名（可以是自定义事件）=”监听“components:{}===>注册组件。methods:{}===>方法。
2022-09-26 17:16:05
136
原创 组件---缓存组件
动态组件的切换，切换后是不会缓存之前被切换掉的组件的，每次切换新组件的时候，Vue 都创建了一个新的组件对象。有时候我们希望在A组件时用户做了一些操作，切换B组件时做了一些操作，当切回A组件时希望记住A的操作，不要重新创建A组件，keep-alive可以缓存动态切换的组件。最多缓存多少组件，缓存最近被渲染过的几个组件一旦数字达到了，最近被创建的组件就会被销毁。====>最近被访问的两个组件会被缓存。===>只有box被缓存了。//不包含box3的缓存。
2022-09-26 17:15:24
445
原创 Vue----事件总线
这样就可以直接向任何组件进行传值，只需要给替我们绑定$on和$emit事件就行了，但是这样得事件是绑定在根节点上的，根节点还要会绑定其他得任务，所以这样绑定会影响性能。2.接受值得组件调用this.$root.$on("绑定函数名",(e)=>{console.log(e)})在main.js中给vue得原型上添加一个$bus给其添加上$emit,$on,$off方法。1.给要传值的组件调用this.$root.$emit（"绑定函数名"，"传值"）"tbox2给App传的值""tbox2给App传的值"
2022-09-15 14:53:09
268
原创 Vue---反向传值
注意：父组件传值一定要用v-model ，子组件接受值用value 利用$emit绑定事件时使用input为参数。3.子组件中利用this.$emit出发事件并向父组件传值。4.父组件中调用自定义事件绑定的函数，并接受子组件传参。利用组件的自定义事件反向修改父组件的值------father的数据-----father的数据-----father的数据-----father的数据-----father的数据-----child2的数据---child3的数据---tboxs.vue文件。
2022-09-15 14:52:38
561
原创 Vue---单向数据
tbos和app文件都是用的同一个变量，但是我们修改tbos文件中的变量值时，app文件的值并没有发生变化，这就是单向数据绑定。father的数据-----child的数据---tbos.vue文件。
2022-09-15 14:52:03
111
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人