- 博客(318)
- 收藏
- 关注
RSS订阅原创 React生命周期旧版之父组件render流程
componentWillReceiveProps这个钩子在第一次初始化接收到props时候不会调用，只有第二次接收到才能调用：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wid.
2021-09-16 22:30:50
114
原创 React回调注意事项
class Login extends React.Component { // 初始化状态 state = { username: '', password: '' } // 保存表单数据到状态中 saveFormData = (event) => { console.log(event) } // 表单提交 handleSubmit = (
2021-09-14 21:06:28
315
原创 React受控组件和非受控组件
非受控组件我们现在想要实现，点击以后，alert， 但是表单行为不触发提交，不跳转到另一个页面，怎么办？像这种输入类的DOM数据，是现用现取，那就是非受控组件受控组件我们给用户名Input绑定onChange事件，要获得用户名Input的值，所以可以不用Ref， 用event.target.value：输入类的DOM， 随着用户输入，把数据维护到state状态中，等需要用到数据的时候，直接从状态中取出来，这就是受控组件。...
2021-09-13 22:38:12
79
原创 React绑定事件
onClick = {demo()}这里页面一渲染就会打印文本，并且点击没有效果因为demo函数没有返回值，是undefined所以相当于是把undefined赋值给onClick事件作为回调，所以点击不会执行正确的应该这样写：...
2021-09-09 22:52:40
92
原创 React类式组件定义和使用以及注意事项
我们先复习一下之前讲的函数式组件：React类式组件规定，如果要写一个类式组件， 必须要这个类继承一个特定的类React.Component：问题： 实例呢？我们没有主动创建实例啊类式组件调用过程：类式组件render()函数中的this:...
2021-09-09 17:17:19
208
原创 JS复习类相关知识
我们把Person类折起来，再创建一个Student类继承Person类：我们在Student类中没有写构造器，这也行吗？是可以的，子类直接用了父类的构造器如果我们想给Student类加一个参数，这样写就接收不到了。为了解决这个问题（子类想拥有自己独有的一些属性），我们就要在子类中写构造器并且调用super方法：注意： super必须放在最前面我们再看一下，Student类上面有没有自己的方法，那它的实例能不能调用父类Person的方法？...
2021-09-09 15:15:35
80
原创 React之面向组件编程-函数式组件
函数式组件错误用法：正确写法：还是报错：真·正确写法：改一下名字：函数式组件，我们没有主动调用函数，是react帮我们调用了函数。我们看一下在react函数式组件中， this指的是什么为什么this指的是undefined? 因为我们的jsx是经过babel翻译的，babel翻译代码以后，开启严格模式。严格模式的一个显著特点就是，禁止自定义函数中的this指向window...
2021-09-09 00:13:05
246
原创 React学习笔记创建虚拟DOM两种创建方式
虚拟DOM两种创建方式jsx语法：引入babel的作用：用来把jsx语法转化为js使用js语法创建虚拟DOM为什么jsx香？如果结构要嵌套的话：太繁琐了，jsx可以很好的避免这种嵌套，因为jsx语法可以像直接写html那样：...
2021-09-08 22:45:44
82
原创 vue复习之nextTick
先看一个小demo:<template> <div class="next-tick"> <ul ref="ulRef"> <li v-for="(item, index) in items" :key="index">{{item}}</li> </ul> <el-button @click="add" type="primary" size="mini">Add</el-b
2021-09-01 21:54:18
188
原创 vue代码如何进行断点调试
对于这样的代码，我们打两个断点，想要调试的话，需要在项目根目录，新建一个文件:vue.config.js，然后根据Vue Cli脚手架版本，分别写入不同的webpack配置：配置完毕以后：选择chrome:这时会显示一段用于启动项目的配置：复制上面的代码，到之前的配置文件中：把type对应的chrome修改为pwa-chrome:下面开始调试：点击以后，打开一个全新的窗口：这样就可以开始调试了，同时，新开的浏览器窗口里面，可以在这里看到源代码：...
2021-09-01 20:55:52
9290
原创 Vue + Element通讯录实战2：基础知识part2 插槽slot
匿名插槽， 具名插槽，作用域插槽匿名插槽：子组件中：具名插槽：具名插槽和顺序无关，只会去找匹配的名字作用域插槽： 子组件可以传值给父组件具名作用域插槽，里面包了一层，父组件需要用slotProps接收子组件传来的值...
2021-08-31 09:47:41
162
原创 Vue + Element通讯录实战1：基础知识
MVVM和MVC 介绍：vue中修动态改样式的方法：修饰符<form>中@click加上.prevent可以防止表单按钮提交点击时候刷新页面生命周期最早可以拿到data和method的生命周期就是created：beforeMound获取不到：mounted生命周期：beforeUpdate:...
2021-08-31 09:09:50
478
原创 vuex之mutations补充-使用常量替代mutation事件类型
我们把上面代码中的mutations单独提取出来，放到mutations.js中：这个常量是什么意思呢？我们再新建一个mutations-type.js再把actions也抽取出来：这里再用常量ADD替换一下：
2021-08-30 19:42:47
362
原创 请叙述vuex的工作流程
用户通过dispatch改变数据去触发action, action通过commit去触发mutations, mutations去改变state伴随着state的改变，会重新渲染页面
2021-08-30 19:25:28
82
原创 vuex中getters使用
要获取state里面goods中id为1的一项，可以这样写，但是如果有N多个组件，每个组件都这样写，很繁琐，所以可以用getters:使用的时候只要通过this.$store.getters.getById()传入参数就可以查询了
2021-08-30 18:51:57
147
原创 Java基础1
因为默认是int类型的，需要手动加上L：因为默认是double类型，所以要手动加上F:注意事项：注意+=操作符隐含了强制类型转换操作j = ++i, 先++i自增，然后把自增后的值赋值给j...
2021-08-28 22:29:16
62
原创 根据穿梭框动态显示表格栏
<template> <div> <el-table :data="tableData" style="width: 100%"> <el-table-column v-if="transferValue.includes('date')" prop="date" label="日期" > </el-table-column>
2021-08-20 14:03:19
213
1
原创 Vue2.X响应式原理
在Vue2.X 响应式中使用到了 defineProperty进行数据劫持，所以我们对它必须有一定的了解，那么我们先来了解它的使用方法， 这里我们来使用 defineProperty来模拟 Vue 中的 data<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge".
2021-08-01 17:15:18
125
原创 vue侦听器使用以及lodash防抖应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>侦听器使用</title></head><body> <div id="app"> <p
2021-07-16 16:10:03
211
原创 Map的使用
我们先来看一个现象：上面代码的意思就是，一个``对象调用toString方法的时候，会被转化为"[object Object]"我们再来看一个现象：ES5中， 对象的结构是键值对， 如果键传入的是非字符串， 比如传入一个对象，或者数组，就会隐式调用它的toString方法var obj1 = { name: 'dean'}var obj2 = { name: 'amanda'}var obj3 = { [obj1]: '11', [obj2]: '22'}con
2021-07-15 17:01:03
297
原创 js优化代码之使用对象字面量代替switch语句
需求：基于颜色打印水果<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <script ty
2021-07-14 22:51:04
278
原创 jsES6对象解构之提前退出和提前返回
需求：代码可以这样改进：注意：这样写是错误的，会报错因为如果不写({type, name, gender} = {})的话，如果调用printAnimalsDetails方法不传入任何参数，那么左边{type, name, gender}解构就是对于undefined的解构，会报错，所以要给传入printAnimalsDetails方法设置一个默认参数{},一个空对象，这样在解构这里就不会报错了，相当于兜底...
2021-07-14 22:27:47
232
原创 js原型链继承 构造函数继承 组合继承 的优缺点和解决方案
原型链继承<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>继承</title></head><body> <script type="text/jav
2021-07-14 15:05:11
279
原创 js基础复习之 原型链的继承和缺点
加上这行代码：我们发现虽然__proto__改过来了，但是 constructor还没有改过来，所以还需要继续改造：原型链继承的缺点：
2021-07-13 22:16:29
643
原创 js基础复习之 call apply 和bind
call： 只能单独传入参数apply： 可以传入数组应用1： 将伪数组转化为 数组伪数组有哪些： arguments, 获取的DOM元素，和含有length属性的对象：使用Array.prototype.slice.call转化为数组：注意： slice方法不适用于IE8以下的浏览器， 会报错考虑到兼容性，我们可以自己封装一个方法listToArray：<!DOCTYPE html><html lang="en"><head> <
2021-07-13 16:56:09
92
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人