爱玲姐姐的博客

记录学习的点点滴滴~ 如有写得不恰当之处，请在评论区留言，我的邮箱会立刻收到您的评论。如果您觉得写得不错，请给我点个赞再走吧~如有更多问题探讨也可以加我qq:517486222,微信jal517486222

12月 11月 10月 09月 07月 06月 05月 04月 03月 02月 01月

原创大前端课程学习心得体会+学习笔记

大前端课程学习心得体会+学习笔记心得体会已经学习了两周半的大前端课程了，课程质量真的是好得没话说，我看过很多前端的课程，但从没有哪家课程能将前端的知识体系划分的如此全面细致，还能保证每一个知识点还都能讲得如此透彻，在讲知识点的基础上还能开篇幅去讲思想，更是难得。比如下面的函数式编程，这种编程范式我之前从来都没使用过，更不知道柯里化、函数组合为何物。直到在拉钩大前端课程中，每一个知识点的学习，都让我有种重获新生的感觉，仿佛以前学习的东西都白学了，只知道简单的用法，不了解核心原理，更不会用高级特性。现在每学

2020-09-30 10:36:23 9102 12

原创大前端学习 -- NuxtJS学习笔记

NuxtJS学习笔记文章内容输出来源：大前端高薪训练营代码仓库地址：https://gitee.com/jiailing/nuxtjs-demo，在多个分支里都有代码一、Nuxt.js是什么一个基于Vue.js生态的第三方开源服务端渲染应用框架它可以帮我们轻松的使用Vue.js技术栈构建同构应用官网：https://zh.nuxtjs.org/Github仓库：https://github.com/nuxt/nuxt.js二、Nuxt.js的使用方式初始化项目已有的Node.j

2020-09-30 10:35:37 1776 1

原创大前端学习 -- 虚拟 DOM 和 Diff 算法学习笔记

虚拟 DOM 和 Diff 算法Virtual DOM的实现原理一、Virtual DOM介绍1. 什么是Virtual DOMVirtual DOM（虚拟DOM），是由普通的JS对象描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM真实的DOM成员非常非常多，所以创建一个DOM对象的成本非常高可以通过Virtual DOM来描述真实DDOM，示例：{ sel: 'div', data: {}, text: 'Hello Virtual DOM'

2020-09-29 22:30:36 1189

原创大前端学习 -- 手写 Vue Router

手写 Vue RouterVue-Router代码仓库地址：https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-01/code/06-my-vue-routervue-router核心代码:App.vue<template> <div id="app"> <div id="nav"> <router-link to="/">Home</route

2020-09-29 22:30:01 1098

原创大前端学习 -- 服务端渲染学习笔记

服务端渲染文章内容输出来源：大前端高薪训练营一、概述1. 基于客户端渲染的前端框架AngularReactVue2. SPA单页应用优点：用户体验好开发效率高渲染性能好可维护性好缺点：首屏渲染时间长不利于SEO3. 借鉴传统的服务器渲染4. 客户端激活为SPA5. 同构应用通过服务端渲染首屏直出，解决SPA应用首屏渲染慢以及不利于SEO问题通过客户端渲染结果页面内容交互得到更好的用户体验这种方式通常称之为现代化的服务端渲染，也叫同构渲染这种方

2020-09-29 22:29:32 1156

原创大前端学习--Vuex状态管理

Vuex状态管理文章内容输出来源：大前端高薪训练营一、组件内的状态管理流程1. 状态管理state：驱动应用的数据源view：以声明方式将state映射到视图actions：相应在view上的用户输入导致的状态变化二、组件间通信方式1. 父组件给子组件传值子组件通过props接受数据<template> <div> <h2>{{title}}</h2> </div></templa

2020-09-29 22:29:13 916

原创大前端学习笔记 -- 封装Vue.js组件库

封装Vue.js组件库一、组件库介绍1. 开源组件库Element-UIIView2. 组件开发方式CDD自下而上从组件级别开始，到页面级别结束3. CDD的好处组件在最大程度上被重用并行开发可视化测试二、处理组件边界情况vue中处理组件边界情况的API1. $root01-root.vue<template> <div> <!-- 小型应用中可以在 vue 根实例里存储共享数据组件中可以通过 $

2020-09-29 22:27:06 1431 2

原创大前端学习--两个多月来的收获与进步学习总结

两个多月来的收获与进步有多少作为大前端课程的第一期学员，我已经学了2个多月了，课程质量和教学水平如何不用再重复了，之前在大前端高薪训练营心得体会+学习笔记这篇文章里已经说过了。这两个月来有很多人向我打听这个课程如何，我都给予推荐态度。市场上的前端网课那么多，然而真正有难度、有深度的课程，少之又少，这个课程我是认可的。2020年有件一直压抑着我的事情，这周末应该算是结束了吧，所以心情有点愉悦，下周准备加大马力学习了。今晚来记录一下这两个多月来的收获与进步，好记性不如烂笔头，我习惯了隔段时间就随笔写一

2020-09-29 22:24:45 8917 8

原创大前端学习 -- Vue.js源码分析（响应式、虚拟DOM、模板编译和组件化）-- 总结

Vue.js源码分析（响应式、虚拟DOM、模板编译和组件化）Vue.js源码剖析-响应式原理一、准备工作1. Vue源码的获取项目地址：https://github.com/vuejs/vueFork一份到自己仓库，克隆到本地，可以自己写注释提交到GitHub为什么分析Vue2.6到目前为止Vue3.0的正式版还没有发布新版本发布后，现有项目不会升级到3.0，2.x还有很长的一段过渡期3.0项目地址：http://github.com/

2020-09-29 22:23:12 2020 4

原创大前端学习--规范化标准学习笔记

规范化标准学习笔记规范化标准为什么要有规范化标准软件开发需要多人协同不同开发者具有不同的编码习惯和喜好不同的喜好增加项目维护成本每个项目或者团队需要明确统一的标准哪里需要规范化标准代码、文档、甚至是提交日志开发过程中人为编写的成果图代码标准化规范最为重要实施规范化的方法编码前人为的标准约定通过工具实现Lint常见的规范化实现方式ESLint 工具使用定制ESLint校验规则ESLint对TypeScript的

2020-09-29 22:22:41 1676 2

原创大前端学习 -- 手写Vue响应式实现

手写Vue响应式实现Vue响应式一、数据驱动1.数据响应式数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率2. 双向绑定数据改变，视图改变；视图改变，数据也随之改变我们可以使用v-modle在表单元素上创建双向数据数据3. 数据驱动是Vue最独特的特性之一开发过程中仅需要关注数据本身，不需要关心数据是如何渲染到视图二、数据响应式的核心原理1. Vue

2020-09-29 22:22:07 1415

原创大前端学习--模块化开发学习笔记

模块化开发与规范化标准学习笔记模块化开发模块化开发时当前最重要的前端开发范式之一模块化只是思想一、模块化演变过程Stage1 文件划分方式污染全局作用域命名冲突问题无法管理模块依赖早起模块化完全依靠约定Stage2 命名空间方式每个模块只暴露一个全局对象，所有模块都挂载到这个对象上减少了命名冲突的可能但是没有私有空间，模块成员可以在外部被访问或修改模块之间的依赖关系没有得到解决Stage3 IIFE 立即执行函数使

2020-09-29 22:21:32 1652 3

原创大前端学习笔记 -- NuxtJS项目案例--RealWorld（Nuxt脚手架创建项目、Git Actions自动发布和PM2部署）

NuxtJS项目案例–RealWorld（创建Nuxt项目、Git Actions自动发布和部署）一、案例项目realworld介绍1. 案例项目介绍案例名称：RealWorld这是一个开源的学习项目，目的就是帮助开发者快速学习新技能。GitHub仓库：https://github.com/gothinkster/realworld在线实例：https://demo.realworld.io/2. 案例相关资源页面模板：https://github.com/gothinkster/real

2020-09-29 22:19:02 2792 1

原创大前端学习笔记 - 静态站点生成（Gridsome静态站点方案、GraphQL查询数据、Strapi生成接口、自动部署到Vercel）

静态站点生成文章内容输出来源：大前端高薪训练营一、Gridsome基础知识1. Gridsome是什么一个免费、开源、基于VUE.js技术栈的静态网站生成器官方网址：https://gridsome.orgGitHub: https://github.com/gridsome/gridsome2. 什么是静态网站生成器静态网站生成器是使用一系列配置、模板以及数据，生成静态HTML文件及相关资源的工具这个功能也叫做预渲染生成的网站不需要类似PHP这样的服务器只需要放到支持静态

2020-09-29 22:18:30 3406 1

原创大前端学习笔记--Vue.js 3.0

Vue.js 3.0 介绍文章内容输出来源：大前端高薪训练营一、Vue.js 源码组织方式1. 源码采用TypeScript重写提高了代码的可维护性。大型项目的开发都推荐使用类型化的语言，在编码的过程中检查类型的问题。2. 使用Monorepo管理项目结构使用一个项目管理多个包，把不同功能的代码放到不同的package中管理，每个功能模块都可以单独发布，单独测试，单独使用。3. 不同构建版本Vue3中不再构建UMD模块化的方式，因为UMD会让代码有更多的冗余，它要支持多种模块化的方式。V

2020-09-29 22:17:58 3521

原创大前端课程 - 4.5个月学习总结

大前端课程 - 4.5个月学习总结文章内容输出来源：大前端高薪训练营时光匆匆如白驹过隙，4.5个月的大前端课程学习，让我收获了很多，也意识到虽然知识是有限的，但是随着学习的深入，发现自己不会的知识也越来越多。从几个方面记录一下最近的学习的情况吧。一、课程内容我现在已经学习了30%了，看似好像很慢，其实并不是慢，而是因为内容太丰富了，每个 Part 都有好几个模块，而每个模块差不多要学2个星期左右，因为每个模块讲的就是一个技术方向的大知识点，这些一个个模块单独拎出来都可以当一门或者几门那种几百块

2020-09-29 22:16:46 2338 2

原创大前端学习笔记 -- Composition API

Composition API一、Composition API使用1. 使用Vue3.0先创建一个空文件夹，然后进入文件夹执行npm init -y，再执行npm install vue@3.0.0-rc.1安装vue3.0创建index.html，vue3.0的使用<body> <div id="app"> x: {{ position.x }} <br> y: {{ position.y }} <br> </div

2020-09-29 18:00:27 1244 1

原创 Vue3.0实现todoList案例

Vue3.0实现todolist案例代码地址：https://gitee.com/jiailing/lagou-fed/tree/master/fed-e-task-03-05/code/04-todolist1. ToDoList功能列表添加待办事项删除待办事项编辑待办事项切换待办事项存储待办事项2. 项目结构使用vue脚手架创建Vue项目，先升级vue-cli，4.5.6版本的vue-cli创建项目时可以选择vue版本。Vue CLI 的包名称由 vue-cli 改成了 @v

2020-09-29 18:00:07 5543 1

原创大前端学习笔记 -- Vue.js 3.0响应式系统原理

Vue.js 3.0响应式系统原理一、介绍1. Vue.js响应式回顾Proxy对象实现属性监听多层属性嵌套，在访问属性过程中处理下一级属性默认监听动态添加的属性默认监听属性的删除操作默认监听数组索引和length属性可以作为单独的模块使用2. 核心函数eactive/ref/toRefs/computedeffecttracktrigger二、Proxy对象回顾1. 在严格模式下，Proxy的函数得返回布尔类型的值，否则会报TypeErrorUncaught Ty

2020-09-29 17:59:39 1046

原创大前端学习笔记 -- Vite实现原理

Vite实现原理一、Vite介绍1. Vite概念Vite是一个面向现代浏览器的一个更轻更快的web应用开发工具它基于ECMAScript标准原生模块系统（ES Modules）实现2. Vite项目依赖Vite@vue/compiler-sfc3. 基础使用vite serve / vite build在执行vite serve的时候不需要打包，直接开启一个web服务器，当浏览器请求服务器，比如请求一个单文件组件，这个时候在服务器端编译单文件组件，然后把编译的结果返回给浏览器

2020-09-29 17:59:18 1766 2

原创大前端学习笔记 -- 搭建自己的服务器端渲染 (SSR)

搭建自己的SSR一、渲染一个Vue实例mkdir vue-ssrcd vue-ssrnpm init -ynpm i vue vue-server-renderderserver.jsconst Vue = require('vue')const renderer = require('vue-server-renderer').createRenderer()const app = new Vue({ template: ` <div id="app

2020-09-29 17:54:45 2210 1