- 博客(71)
- 收藏
- 关注
RSS订阅原创 react 之路由
Link和useNavigate实现组件切换时，实计上伴随着组件的销毁与创建，所以建议只有整体页面切换时才使用路由，而局部切换时使用最原始的隐藏显示为佳，这样可以保让组件中通过ajax得到的数据一直存在。Link和useNavigate实现组件切换时，实计上伴随着组件的销毁与创建，所以建议只有整体页面切换时才使用路由，而局部切换时使用最原始的隐藏显示为佳，这样可以保让组件中通过ajax得到的数据一直存在。第2步在主路由对应的组件中使用配置新的路由, 子路由的访问path为"主路由+子路由"
2022-10-18 11:44:49
1071
3
原创 10/15 面试题
3.3、上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。2.3、上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。即它们所声明的变量一定要在声明后使用，否则报ReferenceError错。let和var声明的是变量，声明之后可以更改，声明时可以不赋值。var是ES5提出的，let和const是ES6提出的。
2022-10-16 20:38:11
211
原创 Vue3笔记
2.使用vite创建vite:新一代的前端工具优点：开发环境中,无需打包，可快速的冷启动轻量快速的热加载2、常用的Composition API（组合API）官方文档：https://cn.vuejs.org/api/总结：Vue3.0中一个新的配置向，值为一个函数，组件中所有用到的:数据、方法等等，均要配置在setup中。setup函数的两种返回值：若返回一个对象，则对象中的数据、方法、在模板中均可直接使用（重点）若返回一个渲染函数，则可以自定义渲染内容（了解）注意：总结：定义一
2022-10-09 16:07:16
323
原创 Vue2.0——仓库vuex
1.为了方便实现组件之间的数据共享,Vuex是他们团队借鉴了redux,用来实现vue组件全局状态(数据)管理的一种机制.2.特点(面试)能够在vuex中集中管理共享的数据，易于开发和后期维护能够高效地实现组件之间的数据共享, 提高开发效率存储在 vuex中的数据都是响应式的，能够实时保持数据与页面的同步一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可.3.使用场景。
2022-09-22 16:51:48
425
原创 Vue2.0——组件
组件是可复用的 Vue 实例,主要用于开发中 具有相同特征不同数据的模块 把它集成为一个组件 供重复利用组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次 多次使用只显示第一个)注册的组件不要跟系统标签同名一个vm实例可以有多个局部组件,但是只能供当前vm实例使用不能用外部data里面的数据，因为他是Vue全局的。必须要在过滤器中声明：而且必须在new Vue前申明，不然Vue里面的函数都加载完了还没有找到数据，就
2022-09-22 16:48:41
738
原创 Vue2.0——生命周期函数
el：指令所绑定的元素，可以用来直接操作 DOMname：指令名，不包括 v- 前缀。value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。expression：字符串形式的指令表达式。例如 v-my-directive=“1 + 1” 中，表达式为 “1 + 1”。arg：传给指令的参数，可选。
2022-09-22 16:41:54
564
原创 Vue2.0——自定义指令
我们看到的v-开头的行内属性，都是指令，不同的指令可以完成或实现不同的功能，对普通 DOM元素进行底层操作，这时候就会用到自定义指令。除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令案例：注册一个获取焦点的指令v-focus，注册自定义改变颜色v-color
2022-09-22 16:40:54
279
原创 Vue2.0——过滤器,计算属性,属性监听器
filter主要用于数据展示之前的处理过滤器只能用在v-bind或者插值表达式中要定义到filters节点下，本质上是一个函数在过滤器函数中，一定要有return值再过滤器的形参中，就可以获取到“管道符”前面待处理的那个值。
2022-09-22 16:39:16
306
原创 Vue2.0——数据绑定v-model
（缺陷：只会劫持data里面的成员，如果是特殊的引用数据【比如数组下标】，不会劫持到引用数据内部的成员，3.0改善了这个缺陷，使用了代理）[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Z1DeGeWi-1663835822506)(image\image-20220831112650289.png)]如果数据容器中的数据变了也会让页面刷新（dom操作让页面改变），如果用户操作dom，改变了页面，反之也让数据容器中的数据中的值改变。**笔试题有可能写：**最简单的实现方法。
2022-09-22 16:37:52
566
原创 Vue2.0—条件渲染和循环渲染
v-show 底层CSS的隐藏元素（dispaly:none）切换模块，具有更高的内存消耗；（针对频繁切换的使用）v-if /v-else ：底层移除元素来切换模块，具有更高的渲染消耗。（针对不常用的业务，用的时候在创建）dom中“冰元素”相似，vue中的组件， template标签，if成立了，并不会作为节点渲染到网页中。写成嵌套关系，不要写成平级的， 但是就浪费了一个节点；二者里面都是布尔值，用法一样，具体情况具体使用。
2022-09-22 16:36:42
319
原创 Vue2.0——基础指令
界面加载的时候会把节点直接挂载到文档树中,导致{{msg+“666”}}这个字符串会显示一下，vue对象生成data数据时候 回去刷新界面 把{{msg+“666”}}字符串替换成结果字符串，所以会出现页面闪烁的bug。其他元素的事件触发时 事件链经过它,无论是捕获还是冒泡阶段都不会触发它的事件,只有它自己是精准对象才会触发事件, 虽然它自己不会被别人影响,但是它自己的事件触发的时候还是会生成事件链经过其他元素,并不阻止继续冒泡到其他元素；事件只触发一次,触发完之后,事件就解绑；
2022-09-22 16:34:46
376
原创 Vue2.0简介
2014年2月，尤雨溪开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。Vue.js 是一套构建用户界面的 渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。Vue.js是前端的主流框架之一，和Angular.js、React.js并称为前端三大主流框架。数据驱动。
2022-09-20 12:43:18
1362
原创 DOM--基础
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。
2022-09-02 11:37:37
130
原创 DOM--预加载和懒加载
3、可视化区域加载：即只加载用户看得到的区域通过监控滚动来实现，一般会在距离用户看到图片前一定距离才开始加载，这样可以保证用户下拉时正好看到图片。**区别：**一个是提前加载，一个是延迟甚至不加载，懒加载可以缓解服务器对的压力。又叫做延迟加载，通过加载网络资源或符合某些条件时才加载资源。懒加载的意义：懒加载的目的主要是作为服务器前端的优化，减少请求数或延迟请求数。**2、预加载：**提前加载图片，当用户需要查看时可以直接从本地缓存中渲染。2、条件加载:符合某些条件，或者触发某些事件才开始异步加载。
2022-09-02 11:34:16
389
1
原创 DOM--页面渲染流程
③dom tree和样式结构体结合后构建呈现树(render tree),render tree有点类似于dom tree，但有区别，render tree能识别样式，render tree中每个node都有自己的style，而且render tree不包含隐藏的节点(比如display:none的节点，还有head节点)，因为这些节点不会用于呈现，而且不会影响呈现的，所以就不会包含到render tree中。⑤ 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)
2022-09-02 11:31:45
393
原创 DOM--事件代理（事件委托）
有： click , mousedown , mouseup , keydown , keyup , keypress。
2022-09-02 11:30:23
225
原创 DOM--事件响应链（冒泡目标捕获）
结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素（事件源元素）。（自顶向下）与事件冒泡是反过来的。要阻止事件传递，唯一的方式就是阻止事件冒泡：事件对象调用stopPropagation()这个函数。的冒泡，也会阻止同一个节点上同一事件的其他的事件处理程序 (优先级比它低的,同元素同事件多处理程序时)。：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。如 ：点击和鼠标移动是不同的点击事件和滑动事件是两条链。
2022-09-02 11:29:11
227
原创 DOM--盒子模型
dom.offsetParent 返回最近的定位父级元素，如无，返回body元素，document.body.offsetParent为 null。：与自己是否添加定位元素无关。
2022-09-02 11:27:40
121
原创 DOM--事件
事件：页面上的元素在某种状态（浏览器实现的）达成时，要执行的提前设定好程序，称之为事件句柄，简称事件。事件源事件类型事件处理程序行内式（两种写法）：1、直接在时间里面写处理程序< div class = 'box' onclick = 'console.log(' 666666 ')' > 点我 < / div >2、调用外面的事件程序。
2022-09-02 11:24:48
235
原创 DOM基础应用
文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API)，它可以动态地访问程序和脚本，更新其内容、结构和 www 文档的风格(目前，HTML 和 XML 文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM 是一 种基于树的 API 文档，它要求在处理过程中整个文档都表示在存储器中。
2022-09-02 11:22:58
371
原创 JavaScript学习笔记（二十七）——es6模块化
ES6 引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。ES6 的模块化分为导出（export） 与**导入（import）**两个模块。导出里面必须有且只有一个export default 语句。可以导出任何数据：例如导入import：import 必须与from关联使用，指明模块的存放目录；单例模式：多次重复执行同一句 import 语句，那么只会执行一次；也就是说：每一个模块只加载一次（是单例的）， 若再去加载同目录下同文件，直接从内存中读取；两种导入方式
2022-07-12 20:13:42
174
原创 什么叫语法糖？有哪些语法糖？
**定义：语法糖（**Syntactic sugar），也译为糖衣语法。指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。作用：通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。语法糖”可以给我们带来方便，是一种便捷的写法，编译器会帮我们做转换；而且可以提高开发编码的效率，在性能上也不会带来损失。2、箭头函数3、数组解构4、函数默认参数5、拓展运算符6、模板字符串7、多行字符串8、拆包表达式9、ES6中的类10、模块化开发
2022-07-11 19:51:41
1169
原创 讲一讲es6的版本怎么更新的（略少）
现在Firefox，Chrome，Edge，Safari和Node.js的最新版都原生实现了 ES6 规范中超过95％的标准了，但是我们并不需要等到规范百分百的被支持再使用新语法。在描述如何使用之前，我们先看看规范指定的几个阶段。ES6开始，TC39每年都会发布新的规范，新的规范将包含年号，如ES6 别名 ES2015，2016年通过的规范将叫 真名叫 ES2016 而非ES7，以此类推。不过对ES6，社区还是习惯喊其为 ES6，因为其在新命名规则公布之前就以被大家熟悉，ES7有时候也会面临类似的问题，不过
2022-07-11 19:49:18
79
原创 讲一讲es6的版本怎么更新的（略少）
现在Firefox，Chrome，Edge，Safari和Node.js的最新版都原生实现了 ES6 规范中超过95％的标准了，但是我们并不需要等到规范百分百的被支持再使用新语法。在描述如何使用之前，我们先看看规范指定的几个阶段。ES6开始，TC39每年都会发布新的规范，新的规范将包含年号，如ES6 别名 ES2015，2016年通过的规范将叫 真名叫 ES2016 而非ES7，以此类推。不过对ES6，社区还是习惯喊其为 ES6，因为其在新命名规则公布之前就以被大家熟悉，ES7有时候也会面临类似的问题，不过
2022-07-11 19:48:14
228
原创 es5 和es6的区别
答题思路：列出es6的新技术 + 解决了es5中哪些的不足 + 看法ES6是ES5 的语法糖。ES6的所有功能，使用ES5都可以实现，但是使用ES6更加简单、简介、标准化.1、系统库的引入es5：ES5中的引用需要先使用require导入React包，成为对象，再去进行真正引用es6：ES6里，可以使用import方法来直接实现系统库引用，不需要额外制作一个类库对象导出及引用单个类es5：ES5中要导出一个类给别的模块用，一般通过module.exports来实现。引用时，则依然通过require方
2022-07-11 19:47:44
3212
原创 浏览器内核
浏览器内核分为渲染引擎和js引擎，渲染引擎取得网页内容，整理数据，然后显示在浏览器页面上，JS引擎负责解析并执行js来实现网页的动态效果； 浏览器要渲染出网页给用户看，必须加载html编码和js脚本，渲染引擎渲染页面的UI和js执行引擎操作内存，就是浏览器的重要组成程序：内核；根据不同的浏览器厂商，使用不同的内核，内核的程序是很难实现的，根据我的了解，有一些内核是公司自己实现的，有一些是直接借用的，比如： 1、IE浏览器内核：Trident内核，也是俗称的IE内核； 2、Chro
2022-07-08 17:10:03
768
原创 JavaScript学习笔记（二十六）——箭头函数
思考：什么是优雅降级 渐进增强？先看个例子：结果：结果不会有任何的改变。结果：对象中使用箭头函数，this表示全局Window对象箭头函数体中的 this 对象，是定义函数时的对象，而不是使用函数时的对象。注意：箭头函数不可以作为构造函数，也就是不能使用 new 命令，否则会报错，这是就有了新技术：class箭头函数在参数中使用箭头函数可以与解构一起使用解决箭头函数中没有arguments 绑定的问题？ES6 之前，JavaScript 的 this 对象一直很令人头大，回调函数，经
2022-06-27 19:08:11
344
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人