阅读前请看一下：我是一个热衷于记录的人，每次写博客会反复研读，尽量不断提升博客质量。文章设置为仅粉丝可见，是因为写博客确实花了不少精力。希望互相进步谢谢！！
文章目录
- 阅读前请看一下：我是一个热衷于记录的人，每次写博客会反复研读，尽量不断提升博客质量。文章设置为仅粉丝可见，是因为写博客确实花了不少精力。希望互相进步谢谢！！
- 1、学习路线
- 2、Vue知识点
- 2.1、编码风格
- 2.2、模板语法即使用{{}}插值
- 2.3、属性绑定
- 2.4、条件渲染
- 2.5、列表渲染
- 2.6、通过key管理状态
- 2.7、事件处理
- 2.8、事件传参
- 2.9、事件修饰符：
- 2.10、数组变化侦测
- 2.11、计算属性
- 2.12、Class绑定
- 2.13、Style绑定
- 2.14、侦听器
- 2.15、表单输入绑定
- 2.16、模板引用即Vue中获取DOM元素
- 2.17、组件组成
- 2.18、组件的嵌套关系
- 2.18、组件的注册方式
- 2.19、组件传递数据——Props
- 2.20、组件传递多种数据类型
- 2.21、组件传递props校验
- 2.21、组件事件（即自定义事件，想要实现子传父）
- 2.22、组件事件配合v-model、watch使用
- 2.22、组件事件传递（props也能实现子传付，但是不推荐）
- 2.23、插槽slot
- 2.24、组件生命周期
- 2.24、组件生命周期应用
- 2.25、动态组件
- 2.25、动态组件
- 2.26、异步组件
- 2.27、依赖注入
- 3、知识点2
- 4、总结
提示：以下是本篇文章正文内容
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。写的时候，里最好别带逻辑，只放逻辑返回的结果，而逻辑全部写在里。
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标签，例如、
等。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、总结
码字不易，谢谢点赞！！！
码字不易，谢谢点赞！！！
码字不易，谢谢点赞！！！