前端杂货铺 - 个人主页动态 - 牛客网

发布(15) 评论刷题收藏

2022-08-29 22:41

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 一、虚拟 DOM - diff 算法概述 [diff 算法参考链接](https://juejin.cn/post/6994959998283907102) - diff 算法是 vdom 中最核心、最关键的部分 - diff 算法能在日常使用 vue react 中体现出来（如 key） **diff 算法概述：** - diff 即对比，是一个广泛的概念，如 linux diff 命令，git diff 命令 - 两个 js 对象也可以做 diff - 两棵树做 diff，如这里的 vdom diff 出处：...

0 点赞评论收藏

分享

2022-08-28 22:37

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 一、虚拟 DOM - diff 算法概述 [diff 算法参考链接](https://juejin.cn/post/6994959998283907102) - diff 算法是 vdom 中最核心、最关键的部分 - diff 算法能在日常使用 vue react 中体现出来（如 key） **diff 算法概述：** - diff 即对比，是一个广泛的概念，如 linux diff 命令，git diff 命令 - 两个 js 对象也可以做 diff - 两棵树做 diff，如这里的 vdom diff 出处：...

0 点赞评论收藏

分享

2022-08-27 22:47

清华大学 Web前端

web前端面试高频考点——性能优化篇

# 系列文章目录 > JavaScript 知识梳理，收录了web前端面试 ==95%以上== 的高频考点，满满的干货。给你做一个高效的知识梳理，为你的面试保驾护航！ |内容| 参考链接 | |--|--| | HTML & CSS 篇 | [HTML & CSS 篇](https://blog.csdn.net/qq_45902692/article/details/126056763) | | JavaScript 篇（一） | [JavaScript 篇（一）【JS的三座大山 】原型和原型链、作用域和闭包、异步](https://blog.csdn.net/qq_...

0 点赞评论收藏

分享

2022-08-26 21:56

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 一、Vue原理 ### 1、理解MVVM模型 **组件化** - 组件化就是将一个页面拆分成一个个小的功能模块 - 每个功能模块完全属于自己这部分独立的功能 - 使得整个页面的管理和维护变得非常容易。 - asp jsp php 已经有组件化了 - nodejs 中也有类似的组件化 **数据驱动视图** - 传统组件，只是静态渲染，更新还要依赖于操作 DOM - 数据驱动视图 - Vue MVVM - 数据驱动视图 - React setState **MVVM 模型** ![在这里插入图片描述](https://...

0 点赞评论收藏

分享

2022-08-25 23:08

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 一、Vue组件间通信 ### 1、props 和 $emit - `props` 常用于 ==父给子== 传递数据 - `this.$emit` 常用于 ==子给父== 传递数据 - `event.$emit` 常用于 ==兄弟组件间== 传递数据 示例：两个子组件（输入框组件&列表组件）动态添加和删除 ==父组件（index.vue）== - 父组件在子组件标签上绑定 `@add` 和 `@delete` 自定义事件 ```javascript <template>   <div>...

0 点赞评论收藏

分享

2022-08-24 23:51

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 一、Vue高级特性 ### 1、动态组件 - 按未知顺序渲染组件 **图片出处：https://coding.imooc.com/lesson/419.html#mid=33846** ![在这里插入图片描述](https://img-blog.csdnimg.cn/75063757ccb64eb080586aa8c2ad7e73.png) 示例：动态组件的使用 ==index.vue 父组件== - 在 data 中接收组件名 - 在 `<component>` 中通过 `:is="xxx...

0 点赞评论收藏

分享

2022-08-23 23:16

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 一、Vue组件间通信 ### 1、props 和 $emit - `props` 常用于 ==父给子== 传递数据 - `this.$emit` 常用于 ==子给父== 传递数据 - `event.$emit` 常用于 ==兄弟组件间== 传递数据 示例：两个子组件（输入框组件&列表组件）动态添加和删除 ==父组件（index.vue）== - 父组件在子组件标签上绑定 `@add` 和 `@delete` 自定义事件 ```javascript <template>   <div>...

0 点赞评论收藏

分享

2022-08-22 23:58

清华大学 Web前端

# 系列文章目录 --- @[TOC](文章目录) --- ## 拖放 拖放（Drag 和 drop）即抓取对象以后拖到另一个位置，是 HTML5 标准的组成部分。 注： 1. 使元素可拖动，把 draggable 属性设置为 true  2. ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。 3. dataTransfer.setData() 方法设置被拖数据的数据类型和值 4. Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型。值是可拖动元素的 id ("drag1")。 ...

0 点赞评论收藏

分享

2022-08-21 23:45

清华大学 Web前端

## flex 子项 flex 份数 flex 属性：定义子项目分配剩余空间，用 flex 来表示占多少份数。 ![在这里插入图片描述](https://img-blog.csdnimg.cn/8258d8e08c5c4bb280dac94eec4e83d8.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBALUJheW1heC0=,size_20,color_FFFFFF,t_70,g_se,x_16) ```javascript <!DOCTYPE html> <ht...

0 点赞评论收藏

分享

2022-08-20 23:14

清华大学 Web前端

HTML5 —— 初识 Canvas 画布

# 系列文章目录 --- @[TOC](文章目录) --- ## Canvas 画布 `<canvas>` 元素用于图形的绘制，通过脚本（通常是JavaScript）来完成 ### 绘制一个矩形 注： 1. **getContext("2d")** 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法 2. fillStyle 可以是CSS颜色，渐变，或图案。fillStyle 默认设置是#000000（黑***r /> 3. fillRect(x, y, width, height) 方法定义了矩形当前的填充方...

0 点赞评论收藏

分享

2022-08-19 23:28

清华大学 Web前端

ES6——新增方法

@[TOC](文章目录) --- #### 一、数组方法 迭代（遍历）方法：forEach()、map()、filter()、some()、every()。 1. forEach() ```javascript     array.forEach(function(currentValue, index, arr)) ``` > 1. currentValue：数组当前项的值 > 2. index：数组当前项的索引 > 3. arr：数组对象本身 ```javascript     let arr = [1, 2, 3]     let sum = 0     a...

0 点赞评论收藏

分享

2022-08-18 22:35

清华大学 Web前端

1. 初始化渲染页面 ![在这里插入图片描述](https://img-blog.csdnimg.cn/be3e310aecbb4834b0662f67d1acc694.png) 2. 按价格区间搜索对应产品 ![在这里插入图片描述](https://img-blog.csdnimg.cn/ba320c2beda7472ea2252639de7870ef.png) 3. 按商品名称查询商品 ![在这里插入图片描述](https://img-blog.csdnimg.cn/e1597570bc754de38f3f04c887038022.png) ```javascript <!DO...

0 点赞评论收藏

分享

2022-08-17 23:45

清华大学 Web前端

ES6 —— 继承

@[TOC](文章目录) --- #### 一、call() 方法的使用 1. call()：调用这个函数，并且修改函数运行时的 this 指向。 > 语法：`fun.call(thisArg, arg1, arg2, ...)` > 1. `this.Arg`：当前调用函数 this 的指向对象 > 2. `arg1, arg2`：传递的其他参数 ```javascript     //ES5 直接调用     function fn(){         console.log('I want to eat.')         console.log(this)...

0 点赞评论收藏

分享

2022-08-16 18:26

清华大学 Web前端

ES6 —— 构造函数和原型

@[TOC](文章目录) --- #### 1、利用构造函数创建对象  1. 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量附初始值，它总与 `new` 一起使用。我们可以把对象中一些公共属性和方法抽取出来，然后封装到这个函数里面。  2. new 在执行时会做的四件事情： > 1. 在内存中创建一个新的空对象。 > 2. 让 this 指向这个新的对象。 > 3. 执行构造函数里面的代码，给这个新对象添加属性和方法。 > 4. 返回这个新对象（所以构造函数里面不需要 return） ```javascript     // 利用构造函数创建对象...

0 点赞评论收藏

分享

2022-08-15 23:32

清华大学 Web前端

ES6——类和对象

@[TOC](文章目录) --- #### 一、创建类和生成实例 1. 通过 `class` 关键字创建，类名首字符大写。 2. 类里面有 `constructor` 函数，可以接受传递过来的参数，同时返回实例对象。 3. `constructor` 函数 只要 `new` 生成实例时，就会自动调用这个函数，如果不写这个函数，类也会自动生成这个函数。 4. 生成实例 `new` 不能省略。 ```javascript     // 1.创建类 class     class Star {         constructor(name, age){             this.n...

0 点赞评论收藏

分享

创作者周榜

更多

关注他的用户也关注了：

牛客网
牛客企业服务