Web学习路线

2023-12-13 04:48:53

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


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

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、总结


码字不易,谢谢点赞!!!
码字不易,谢谢点赞!!!
码字不易,谢谢点赞!!!

文章来源:https://blog.csdn.net/qq_40967086/article/details/134884313
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。