酷爱前端的小陈博客

1. vue 简介1.1.什么是 vue官方给出的概念：Vue (读音/vjuː/，类似于 view) 是一套用于构建用户界面的前端框架。1. 构建用户界面 用 vue 往 html 页面中填充数据，非常的方便2. 框架 框架是一套现成的解决方案，程序员只能遵守框架的规范，去编写自己的业务功能！ 要学习 vue，就是在学习 vue 框架中规定的用法！ vue 的指令、组件（是对 UI 结构的复用）、路由、Vuex、vue 组件库 只有把上面老师罗列的...

1. 指令的概念指令（Directives）是 vue 为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。vue 中的指令按照不同的用途可以分为如下 6 大类：① 内容渲染指令② 属性绑定指令③ 事件绑定指令④ 双向绑定指令⑤ 条件渲染指令⑥ 列表渲染指令注意：指令是vue 开发中最基础、最常用、最简单的知识点。1.1 内容渲染指令内容渲染指令用来辅助开发者渲染 DOM 元素的文本内容。常用的内容渲染指令有如下 3 个：1、v-text...

推荐大家安装的 VScode 中的 Vue 插件Vue 3 Snippets https://marketplace.visualstudio.com/items?itemName=hollowtree.vue-snippetsVetur https://marketplace.visualstudio.com/items?itemName=octref.vetur什么是 vue构建用户界面用 vue 往 html 页面中填充数据，非常的方便

过滤器过滤器的注意点要定义到 filters 节点下，本质是一个函数在过滤器函数中，一定要有 return 值在过滤器的形参中，可以获取到“管道符”前面待处理的那个值如果全局过滤器和私有过滤器名字一致，此时按照“就近原则”，调用的是”私有过滤器“watch 侦听器侦听器的格式方法格式的侦听器缺点1：无法在刚进入页面的时候，自动触发！！！缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！对象格式的侦听器好处1：可以通过 immediate 选项

1. node.js 中如何实现模块化node.js 遵循了 CommonJS 的模块化规范。其中：导入其它模块使用require() 方法模块对外共享成员使用module.exports 对象模块化的好处：大家都遵守同样的模块化规范写代码，降低了沟通的成本，极大方便了各个模块之间的相互调用，利人利己。2. 前端模块化规范的分类在 ES6 模块化规范诞生之前，JavaScript 社区已经尝试并提出了AMD、CMD、CommonJS 等模块化规范。 但是，这些由社区提出的模块

1. 回调地狱多层回调函数的相互嵌套，就形成了回调地狱。示例代码如下：回调地狱的缺点：代码耦合性太强，牵一发而动全身，难以维护大量冗余的代码相互嵌套，代码的可读性变差1.1 如何解决回调地狱的问题为了解决回调地狱的问题，ES6（ECMAScript 2015）中新增了 Promise 的概念。2.Promise 的基本概念① Promise 是一个构造函数我们可以创建 Promise 的实例const p = new Promise()...

1、EventLoop1. JavaScript 是单线程的语言JavaScript 是一门单线程执行的编程语言。也就是说，同一时间只能做一件事情。单线程执行任务队列的问题：如果前一个任务非常耗时，则后续的任务就不得不一直等待，从而导致程序假死的问题。2.同步任务和异步任务为了防止某个耗时任务导致程序假死的问题，JavaScript 把待执行的任务分为了两类：① 同步任务（synchronous）又叫做非耗时任务，指的是在主线程上排队执行的那些任务只有前一个任..

1、案例内容：1. 案例需求基于MySQL 数据库+ Express 对外提供用户列表的API 接口服务。用到的技术点如下：第三方包express 和mysql2ES6 模块化Promiseasync/await2. 主要的实现步骤① 搭建项目的基本结构② 创建基本的服务器③ 创建db 数据库操作模块④ 创建 user_ctrl 业务模块⑤ 创建 user_router 路由模块3.搭建项目的基本结构① 启用 ES6 模块化支持在 pack

1. 什么是 watch 侦听器watch 侦听器允许开发者监视数据的变化，从而针对数据的变化做特定的操作。 语法格式如下：侦听器的格式1. 方法格式的侦听器 缺点1：无法在刚进入页面的时候，自动触发！！！ 缺点2：如果侦听的是一个对象，如果对象中的属性发生了变化，不会触发侦听器！！！2. 对象格式的侦听器 好处1：可以通过 immediate选项，让侦听器自动触发！！！ 好处2：可以通过 deep选项，让侦听器深度监听对象中每个属性的变化！！！...

1. 什么是计算属性计算属性指的是通过一系列运算之后，最终得到一个属性值。这个动态计算出来的属性值可以被模板结构或methods 方法使用。示例代码如下：2. 计算属性的特点① 虽然计算属性在声明的时候被定义为方法，但是计算属性的本质是一个属性② 计算属性会缓存计算的结果，只有计算属性依赖的数据变化时，才会重新进行运算计算属性特点：1. 定义的时候，要被定义为“方法”2. 在使用计算属性的时候，当普通的属性使用即可好处：1. 实现了代码的复用2. 只要计算

1. 什么是单页面应用程序单页面应用程序（英文名：Single Page Application）简称 SPA，顾名 思义，指的是一个Web 网站中只有唯一的一个HTML 页面，所有的功能 与交互都在这唯一的一个页面内完成。例如资料中的这个Demo 项目：2. 什么是 vue-clivue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于webpack 创建工程化的 Vue 项目的过程。 引用自 vue-cli 官网上的一句话：程序员可以专注在撰写应用上，而不必花好几天.

出现的问题or报错当使用vue-cli（脚手架）创建项目后，并用npm run serve运行项目过程中，出现Conflict: Multiple assets emit different content to the same filename index.html的报错，原因可能是打包时重名了，那么该如何解决？解决方案如下：点击两次ctrl+c将报错项目停掉终止批处理操作吗(Y/N)? ^C第一步：把index.html重命名为index.ejsindex.

1. 什么是组件化开发组件化开发指的是：根据封装的思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护。2. vue 中的组件化开发vue 是一个支持组件化开发的前端框架。vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。3. vue 组件的三个组成部分每个 .vue 组件都由 3 部分构成，分别是：template -> 组件的模板结构script -> 组件的JavaScrip.

配置原因：在使用vue-cli开发过程中，由于在输入路径的时候没有提示，既影响开发的速度，又无法判断输入的路径是否正确，因此我们可以在vscode中配置@路径提示配置方法：1、在使用webpack工具进行项目的开发时（目前已经很少用到）@默认指向的就是 src目录这个配置的意思就是 @ 代表的就是 src这个目录在webpack.config.js文件中配置如下程序module.exports ={resolve: { alias: { //..

1. 生命周期 & 生命周期函数生命周期（Life Cycle）是指一个组件从创建 -> 运行-> 销毁的整个阶段，强调的是一个时间段。 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。注意：生命周期强调的是时间段，生命周期函数强调的是时间点。2. 组件生命周期函数的分类组件生命周期函数共有三个阶段：组件生命周期的第 1 个阶段：组件创建阶段组件生命周期的第 2 个阶段：组件运行阶段组件生命周期的第 3 个阶段：组件

1. 组件之间的关系在项目开发中，组件之间的最常见的关系分为如下两种：① 父子关系② 兄弟关系2. 父子组件之间的数据共享父子组件之间的数据共享又分为：① 父 -> 子共享数据② 子 -> 父共享数据2.1 父组件向子组件共享数据父组件向子组件共享数据需要使用自定义属性。示例代码如下：2.2 子组件向父组件共享数据子组件向父组件共享数据使用自定义事件。示例代码如下：3. 兄弟组件之间的数据共享在 vue2.x 中，兄...

ref 用来辅助开发者在不依赖于jQuery 的情况下，获取DOM 元素或组件的引用。每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的DOM 元素或组件的引用。默认情况下， 组件的$refs 指向一个空对象。

1. 案例效果2. 实现步骤① 初始化项目基本结构② 封装MyHeader 组件③ 基于axios 请求商品列表数据（ GET 请求，地址为 https://www.escook.cn/api/cart）④ 封装MyFooter 组件⑤ 封装MyGoods 组件⑥ 封装MyCounter 组件3. 完整代码：项目目录：main.js部分：import Vue from 'vue'import App from './App.vue'...

1. 什么是动态组件动态组件指的是动态切换组件的显示与隐藏。2. 如何实现动态组件渲染vue 提供了一个内置的 <component> 组件，专门用来实现动态组件的渲染。示例代码如下：3. 使用 keep-alive 保持状态默认情况下，切换动态组件时无法保持组件的状态。此时可以使用vue 内置的 <keep-alive> 组件保持动态组 件的状态。示例代码如下：4. keep-alive 对应的生命周期函数当组件被缓存时，会自动触发...

1. 什么是插槽插槽（slot）是 vue 为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。可以把插槽认为是组件封装期间，为用户预留的内容的占位符。2. 体验插槽的基础用法声明一个插槽区域vue 官方规定：每一个 slot 插槽，都要有一个 name 名称如果省略了 slot 的 name 属性，则有一个默认名称叫做 default在封装组件时，可以通过 <slot> 元素定义插槽，从而为用户预留内容占位符。示例...

1. 什么是自定义指令vue 官方提供了v-text、v-for、v-model、v-if 等常用的指令。除此之外vue 还允许开发者自定义指令。2. 自定义指令的分类vue 中的自定义指令分为两类，分别是：私有自定义指令全局自定义指令3. 私有自定义指令在每个vue 组件中，可以在directives 节点下声明私有自定义指令。示例代码如下：4. 使用自定义指令在使用自定义指令时，需要加上v- 前缀。示例代码如下：5. 为自定义指令动态绑定参数值.

1、ESLint工具介绍可组装的JavaScript和JSX检查工具用来团队开发整顿代码的风格（例如代码后面是否加“ ；”，代码前使用4个空格，还是两个空格或是一个Tab键）使用方法查阅官方网址ESLint官方文档http://eslint.cn/2、在VScode中配置ESLint工具首先在VScode中搜索tabsize在VScode中搜索format3、创建带有ESLint工具 的Vue项目找到需要创建项目的根目录......

1. 什么是路由路由（英文：router）就是对应关系。2. SPA 与前端路由SPA 指的是一个 web 网站只有唯一的一个 HTML 页面，所有组件的展示与切换都在这唯一的一个页面内完成。此时，不同组件之间的切换需要通过前端路由来实现。结论：在 SPA 项目中，不同功能之间的切换，要依赖于前端路由来完成！3. 什么是前端路由通俗易懂的概念：Hash 地址与组件之间的对应关系。Hash地址就是在URL中从#开始到后面的地址就是Hash地址例如：如下的..

1. 什么是 vue-routervue-router 是 vue.js 官方给出的路由解决方案。它只能结合 vue 项目进行使用，能够轻松的管理 SPA 项目中组件的切换。vue-router 的官方文档地址：https://router.vuejs.org/zh/https://router.vuejs.org/zh/2. vue-router 安装和配置的步骤① 安装 vue-router 包② 创建路由模块③ 导入并挂载路由模块④ 声明路由链接和占位...

1. 路由重定向路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：2. 嵌套路由通过路由实现组件的嵌套展示，叫做嵌套路由。点击父级路由链接显示模板内容① 模板内容中又有子级路由链接② 点击子级路由链接显示子级模板内容3.声明子路由链接和子路由占位符在 About.vue 组件中，声明 tab1 和...

1. 素材下载：练习资料素材上传到如下链接，需要的自行下载：案例：后台管理系统（VUE路由）素材https://download.youkuaiyun.com/download/qq_57587705/853208252. 案例效果3. 案例用到的知识点⚫ 命名路由⚫ 路由重定向⚫ 导航守卫⚫嵌套路由⚫ 动态路由匹配⚫ 编程式导航4. 案例各个部分的实例代码(这里只提供修改的代码)项目目录：路由模块index.js部分：import Vu..

出现的问题：当在 VScode 中用 npm安装 Vant 组件库时，发生 npm ERR! code ERESOLVE；npm ERR! ERESOLVE could not resolve；报错时，例如：PS C:\Users\86136\Desktop\前端基础资料\Vue2\exam\demo-toutiao1> npm i vant@latest-v2npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm .

出现的问题：在 vue-cli 创建的项目中，创建文件并命名后，会报“Component name "*****" should always be multi-word”报错；报错截图如下：Component name "******" should always be multi-word.eslintvue/multi-word-component-names报错的原因：在组件命名的时候不够规范，根据 ESLint 官方风格指南，除了根组件（A..........

优快云话题挑战赛第1期活动详情地址：优快云参赛话题：前端学习记录话题描述：记录前端学习过程中的某个知识点、解决方案等等目录出现的问题及其报错：报错原因：解决方案：方案一：方案二：方案三：space-before-function-paren 规则:规则细节选项“always”“never”{"anonymous": "always", "named": "never", "asyncArrow": "always"}{"an...

1. 创建 vite 的项目按照顺序执行如下的命令，即可基于vite 创建vue 3.x 的工程化项目：2.梳理项目的结构使用vite 创建的项目结构如下：其中：node_modules 目录用来存放第三方依赖包public 是公共的静态资源目录src 是项目的源代码目录（程序员写的所有代码都要放在此目录下）.gitignore 是 Git 的忽略文件index.html 是 SPA 单页面应用程序中唯一的HTML 页面package.json 是项目..

目录1. 什么是自定义事件2. 自定义事件的 3 个使用步骤2.1 声明自定义事件2.2 触发自定义事件2.3 监听自定义事件3. 自定义事件传参4. 组件上的 v-model1. 为什么需要在组件上使用 v-model2. 在组件上使用 v-model 的步骤5.任务列表案例1. 案例效果​编辑2. 用到的知识点3. 整体实现步骤6. 总结1. 什么是自定义事件在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，...

目录1. 什么是 vue 组件库2. vue 组件库和 bootstrap 的区别3. 最常用的 vue 组件库4. Element UI4.1在 vue2 的项目中安装 element-ui4.2 引入 element-ui4.3 完整引入4.4 按需引入步骤1，安装babel-plugin-component：​编辑步骤2，修改根目录下的babel.config.js 配置文件，新增plugins 节点如下：​编辑步骤3，如果你只希望引入部分...

1. 在 vue3 的项目中全局配置axios2. 在 vue2 的项目中全局配置 axios需要在main.js 入口文件中，通过Vue 构造函数的prototype 原型对象全局配置 axios：3. 什么是拦截器拦截器（英文：Interceptors）会在每次发起 ajax 请求和得到响应的时候自动被触发。应用场景：① Token 身份认证② Loading 效果③ etc…4. 配置请求拦截器通过 axios.intercepto...

1. Vuex 概述