Web学习路线

阅读前请看一下：我是一个热衷于记录的人，每次写博客会反复研读，尽量不断提升博客质量。文章设置为仅粉丝可见，是因为写博客确实花了不少精力。希望互相进步谢谢！！

提示：以下是本篇文章正文内容

1、学习路线

目前用的技术是前端为Vue框架，后端是python。Vue其实就是集成了HTML、JavaScript、CSS的一个框架。如果会JS、html，那可以直接去学Vue。CSS不用学，我们用的是Bootsrap模板框架，直接去学BootStrap框架。

下面是学习路线：

1、先学HTML：《HTML 菜鸟教程》 一天4-6h。学完应该清楚：元素标签、属性、基本编程步骤等。
2、再学JavaScript：《JavaScript 菜鸟教程》 一天6-8h。学完应该清楚：基础语法、事件、异步编程等。
3、学Ajax（Vue的通信用的是axios，其实就是把Ajax封装了，理解为Ajax.plus）：《AJAX 教程https://www.runoob.com/ajax/ajax-tutorial.html》 1h，了解即可，直到post和get咋请求的。
4、再学Vue，这一点可以搭配视频：《黑马程序员vue前端基础教程-4个小时带你快速入门vue》+《【狂神说Java】Vue最新快速上手教程通俗易懂》、官网教程《Vue官网中文手册》即可。两天18h。学完应该知道：vue的各种v-指令；vue的属性如el、data、methods、compute、watch等；组件等概念，尤其要学会使用vue编写背后逻辑。
关于VUE的，官方文档如果看起来吃力，可以学习《菜鸟Vue教程》。同时可以伴随下面两篇文章看，《【Vue】各v-指令用法》 + 《Vue实例的基本属性》
5、最后学BootStrap框架，也不用特别学，有需要的话我这里有书。其实就是别人写好的CSS模板，比如想要一个表格，直接去官网复制代码过来，再按需求改即可。《BootStrap官网地址：https://code.z01.com/bootstrap/docs/index.html》

---

2、Vue知识点

重新看了视频，此视频讲得比黑马、狂神的好。《【2023最新版】Vue3从入门到精通，零基础小白也能听得懂，写得出，web前端快速入门教程》。下面是记录的笔记

2.1、编码风格

选项式API：vue2.0；组合式API：vue3.0。写的时候，<template>里最好别带逻辑，只放逻辑返回的结果，而逻辑全部写在<script>里。

2.2、模板语法即使用{{}}插值

将data里的数据写到html页面中去。其实就是用“{{ }}”进行文本插值，对应是v-text指令，只不过“{{}}”是简写。但文本插的是文本，想要插html的话需要用v-html指令。

2.3、属性绑定

将data里的数据绑定到html标签的属性（例如id、class、disabled等属性甚至自定义属性）中，v-bind指令。所以看需求，如果将数据绑定到html标签的属性中，就v-bind。如果只是单纯页面的文本，就{{}}。

2.4、条件渲染

Vue强大的功能，根据条件去渲染不同的视图板块。v-if、v-else、v-else-if、v-show。v-if切换开销大，初始渲染开销小（因为只有true才初始化渲染，false都不添加初始化渲染，但是每次true的话都是重建）。v-show反之。

2.5、列表渲染

将列表进行渲染。使用v-for指令基于data中定义的数组进行列表的渲染。而传统是在for循环中一条条添加到DOM元素。但大多数情况下，所渲染的数据来源于网络的请求，即JSON格式。

2.6、通过key管理状态

2.7、事件处理

使用v-on:或@来监听DOM事件，并在事件触发时执行对应的JavaScript。事件处理器的值可以是两类：内联事件处理器、方法事件处理器（更推荐此种，解耦）。

2.8、事件传参

事件参数可以获取Vue的event对象（和原始的event一模一样）和通过数据获取参数。@click=getNameHandle(item, $event)

2.9、事件修饰符：

2.10、数组变化侦测

主要用于检测、更新数组的动态变化。有两种：变更、替换一个数组

2.11、计算属性

把模板（‘{{}}’）中的复杂表达式提到计算属性中（不要忘了return）去，方便解耦、维护。

computed和methods的区别：

2.12、Class绑定

掌握对象形式写法即可

2.13、Style绑定

style其实是内联修改。掌握对象形式写法即可。但不推荐Style，后期维护更改很麻烦。推荐上面的Class，因为是解耦的

2.14、侦听器

侦听器作用：监测页面数据的变化，即页面数据一旦变化，侦听器就能检测到，从而做出想要实现的业务逻辑操作。当然，不是页面所有数据都能别监听，只有响应式数据才能。

2.15、表单输入绑定

v-model实现双向绑定。

2.16、模板引用即Vue中获取DOM元素

DOM元素其实就是各种html标签，例如<div>、<p>等。Vue其实抽象了DOM操作，使用它给的指令就能实现DOM操作。但是Vue中也可以进行DOM操作，使用ref属性。

2.17、组件组成

2.18、组件的嵌套关系

2.18、组件的注册方式

2.19、组件传递数据——Props

组件与组件间并不是完全独立的，很可能有交集，因此涉及到数据的传递。解决方案：props属性。

父亲要传递给儿子100w。要传递的数据100w写在父组件中引入子组件的位置，props放子组件，也定义同名参数。最后，再将这个参数放在子组件里需要渲染的地方。

注意事项：props只能实现父到子的传递，不能反其道行之。

2.20、组件传递多种数据类型

2.21、组件传递props校验

即传递的参数检查。分三类：类型检查type、默认值default、必选项required。

注意：props只能是只读的。比如父传给子一个参数，子接收到了，子还想对父类这个参数修改，是不允许的。再次说明props流向是父到子单向。

2.21、组件事件（即自定义事件，想要实现子传父）

事件：事件处理，页面中元素去添加事件如点击事件。
组件事件：是去给组件本身添加一个事件，目的不是用户点击行为的处理，而是用来实现组件间数据的传递的，在老版本vue中，称为自定义事件。

2.22、组件事件配合v-model、watch使用

组件事件（即自定义事件）实现了数据的子传父；v-model可以实现单组件的表单数据显示。组件事件配合v-model使用如何使用？考虑如下业务场景：

A为父类，B为子类。在B中有一个表单输入框，输入以后，但是想在A中实时显示B中输入的内容。效果如下：

实现

2.22、组件事件传递（props也能实现子传付，但是不推荐）

父亲让儿子通过自己的函数给自己的属性赋值

2.23、插槽slot

组件与组件的数据传递两大类：
1、数据传递。props或自定义事件实现。
2、模板传递。slot实现。父传给子不再是Js值，还有可能是模板（如一些标签）。

2.24、组件生命周期

各个特定阶段运行相应代码，可以作个比喻。人到了18岁，就可以进网吧了。

2.24、组件生命周期应用

2.25、动态组件

有些场景，需要在两个组件间来回切换。

2.25、动态组件

2.26、异步组件

一个项目100个组件，若同步，则打开会都加载，影响速度。如果异步组件，需要A打开A，需要B再打开B。

2.27、依赖注入

目的是为了将数据更深的传递。

---

3、知识点2

---

4、总结

---

码字不易，谢谢点赞！！！
码字不易，谢谢点赞！！！
码字不易，谢谢点赞！！！