前端HTML、CSS、JS、VUE 汇总
前言
提示：这里可以添加系列文章的所有文章的目录，目录需要自己手动添加
使用VS Code运行前端代码
在VS Code上安装前端插件
正在更新中~ ✨
文章目录
提示：这里可以添加本文要记录的大概内容：
HTML+CSS
学习 https://developer.mozilla.org/zh-CN/docs/Learn/CSS
| 学习路线 | 知识定位 |
|---|---|
| HTML基础 | 标签、表格、表单、按钮、div、单元格合并 |
| CSS基础 | 基本语法、选择器、使用方式、优先级、层叠样式、继承特性 |
| CSS常用样式 | 字体样式、文本样式、列表样式、背景样式、鼠标样式、伪类样式、设置透明度 |
| CSS 内容盒子与边框盒子 | 边框、内边距与外边距 |
| CSS+HTML实现元素定位 | 相对定位、绝对定位、固定定位、z-index样式、数量角标、透明度 |
| ❗CSS 弹性布局 | justify-content 主轴排列方式、align-items与align-content 侧轴排列方式 |
JS
推荐学习视频
| 学习路线 | 知识定位 |
|---|---|
| JavaScript（JS基础） | js编写方式、js基本写法、数据类型，==和=== 、流程控制语句 |
| JS中的函数与数组 | 函数定义与调用、函数参数与返回值、let与var关键字使用、数组创建及使用 |
| JS中常用内置对象 | 数组常用方法❗、字符串常用方法、数学对象常用方法、全局对象方法Global |
| BOM模型 | window对象常用方法、location 地址栏对象、history 对象 |
| DOM模型 | 获取DOM对象常用方法、获取DOM对象时机、操作DOM属性、常用DOM对象属性、遍历DOM数组 |
| DOM编程事件与简单编程 | 事件绑定、DOM编程应用 |
| JSON轻量级数据交换格式 | 前后端数据交换格式比较、JavaScript自定义对象 |
| jQuery从入门到应用：选择器、DOM与Ajax综合指南 | jQuery对象（jQuery的使用、jQuery包装集与Dom对象）、jQuery选择器（基础、层次、表单选择器）、Dom操作（增加、删除、遍历元素）、jQuery事件（ready加载事件、绑定事件、jQuery的.click()）、Ajax（原生Ajax的实现流程、Ajax使用） |
Vue2
推荐学习视频1、推荐学习视频2
| 学习路线 | 知识定位 |
|---|---|
| Vue2 属性绑定 v-bind | 属性绑定 v-bind |
| Vue2 事件绑定 @ | 单击事件 (click) 、双击事件 (dblclick)、内容改变事件 (change)、键盘按下事件 (keydown) 、键盘抬起事件 (keyup) 、鼠标移入事件 (mouseenter) 和移出事件 (mouseleave)、表单事件：获取焦点 (focus) 和失去焦点 (blur) 、组合事件示例 |
| Vue2 使用 v-if、v-else、v-else-if、v-show 以及 v-has 自定义指令实现条件渲染 | v-if 的基础用法、v-else、v-else-if、v-show 和 v-if 对比、自定义指令 v-has、v-if 和 v-has 结合使用场景 |
| Vue2 双向绑定 v-model | v-model 双向绑定 |
| Vue2 列表渲染 | 基本数组渲染、对象属性渲染、表格数据渲染、动态表单生成、级联选择器、数据更新视图不刷新、动态过滤/排序、空状态处理 |
| Vue2 过滤器 Filters | 过滤器的核心特性、过滤器的常见使用场景、案例 |
| Vue2 监听器 watcher | 监听器的作用、工作流程、基本用法、使用场景、关键配置项、与计算属性的区别、动态添加监听器、注意事项 |
| Vue2 生命周期 | Vue2 生命周期流程（8个核心钩子） |
| Vue2 组件创建与使用 | 组件的创建与使用（组件的定义、子组件的注册与使用、组件通信Mixins 复用逻辑、动态组件与条件渲染、第三方组件库）、第三方组件库与私有组件的区别（定义组件、注册组件、Props 数据传递、自定义事件通信、插槽（Slots）） |
| Vue2 组件切换方式 | 使用 v-if 和 v-else 实现组件切换、:is 实现组件切换 |
| Vue2 父子组件数据传递与调用：从 ref 到 $emit | 父组件向子组件传递数据的方式、父组件调用子组件方法的方式、子组件向父组件传递数据的方式、流程示意图 |
| Vue2 插槽 Slot | 在组件中定义插槽（子组件视角）、使用插槽（父组件视角）、插槽与 Props 的对比 |
Vue3
推荐学习视频
Vue.js - 渐进式 JavaScript 框架 | Vue.js
| 学习路线 | 知识定位 |
|---|---|
| vue3 基本语法 | MVVM框架、文本渲染指令 v-text、属性绑定指令、事件绑定 @事件名、❗条件渲染指令、循环遍历指令 |
| Vue3 创建 | Vue-Cli脚手架创建、vite 创建 |
| Vue3 组合式API | Vue2与Vue3区别、ref 对比 reactive |
| Vue3 setup 语法糖 | setup 语法糖 |
| Vue计算属性与监听器 | 计算属性配置项 computed、监听器配置项 watch |
| v-model双向绑定指令 | v-model.lazy 延迟同步、v-model.trim 去掉空格 |
| ❗Vue生命周期 | 钩子函数 |
| Vue3 路由 | 命名路由、嵌套路由、路由传参、路由导航 |
| Vuex 使用 | state 配置项、getters 配置项、mutations 配置项、actions 配置项 |
| Pinia 状态管理库 | 了解 Pinia |
| AJAX与axios框架 | 跨域访问 |
| Vue 组件化开发 | 父子组件相互传数据、插槽 slot |
