0
0

《让你两小时结合AI成为前端高手秘籍》

前言：作为一个有追求的优秀的后端开发程序员，怎么会允许自己不会简单易学的前端开发呢？而每当你将要开始奋斗时，却又十分迷茫不知从何下手时。孩子，你就非常需要我整理的这份《让你两小时结合AI成为前端高手秘籍》。

前端三剑客：html，css，js

标题标签 

<h1></h1>

超链接标题 

<a></a>

css选择器

CSS选择器通用语法如下：
选择器名   {
    css样式名：css样式值;
    css样式名：css样式值;
}

元素选择器，类选择器，id选择器

  • 盒子：页面中所有的元素（标签），都可以看做是一个 盒子，由盒子将页面中的元素包含在一个矩形区域内，通过盒子的视角更方便的进行页面布局。
  • 盒子模型组成：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）。

布局标签

布局标签：实际开发网页中，会大量频繁的使用 div 和 span 这两个没有语义的布局标签。

  • 标签：<div>``````<span>
  • ​ 标签： ​
  • 一行只显示一个（独占一行）
  • 宽度默认是父元素的宽度，高度默认由内容撑开
  • 可以设置宽高（width、height）
  • <span>标签：
  • 一行可以显示多个
  • 宽度和高度默认由内容撑开
  • 不可以设置宽高（width、height）
  • flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
  • 通过给父容器添加flex属性,来控制子元素的位置和排列方式。

flex布局

  • flex是flexible Box的缩写，意为"弹性布局"。采用flex布局的元素，称为Flex容器（container），它的所有子元素自动成为容器成员，称为Flex项目（item）。
  • 通过给父容器添加flex属性,来控制子元素的位置和排列方式。

flex布局相关的css样式

如果主轴设置为row，其实就是横向布局。 主轴设置为column，其实就是纵向布局。

表单标签

那其实，上述的整个窗口是一个表单，而表单是一项一项的，这个我们称为表单项 或 表单元素。

  • 表单场景: 表单就是在网页中负责数据采集功能的，如：注册、登录的表单。

  • 表单标签: <form>

  • 表单属性:- action: 规定表单提交时，向何处发送表单数据，表单提交的URL。- method: 规定用于发送表单数据的方式，常见为： GET、POST。- GET：表单数据是拼接在url后面的， 如： xxxxxxxxxxx?username=Tom&age=12，url中能携带的表单数据大小是有限制的。- POST： 表单数据是在请求体（消息体）中携带的，大小没有限制。

  • 表单项标签: 不同类型的input元素、下拉列表、文本域等。- input: 定义表单项，通过type属性控制输入形式- select: 定义下拉列表- textarea: 定义文本域

  • GET请求演示：

如果是get请求，在提交表单时，表单数据是拼接在url后面的。

  • POST请求演示：

如果是post请求，在提交表单时，表单数据是在请求体中传递给服务端的。

表格标签：

js

JavaScript（简称：JS**） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。

  • 组成：- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等

js引入方式：

  • 第一种方式：内部脚本，将JS代码定义在HTML页面中- JavaScript代码必须位于<script></script>标签之间- 在HTML文档中，可以在任意地方，放置任意数量的<script></script>- 一般会把脚本置于<body>元素的底部，可改善显示速度
  • 第二种方式：外部脚本， 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中- 外部JS文件中，只包含JS代码，不包含<script>标签- 引入外部js的<script>标签，必须是双标签
  • JS书写规范：- 结束符：每行js代码，结尾以分号结尾，而结尾的分号可有可无。（建议在一个项目中保持一致，要么全部都加，要么全部都不加）- 注释：单行注释，多行注解的写法， 与java中一致。
  • 注意1：demo.js中只有js代码，没有<script>标签
  • 注意2：通过<script></script>标签引入外部JS文件时，标签不能自闭合，如：<script src="js/demo.js" />

JS基础语法

变量

在js中，变量的声明和java中还是不同的。

  • JS中主要通过 let 关键字来声明变量的。
  • JS是一门弱类型语言，变量是可以存放不同类型的值的。

在早期的JS中，声明变量还可以使用 

var

关键字来声明

常量

在JS中，如果声明一个场景，需要使用

const

关键字。一旦声明，常量的值就不能改变 （不可以重新赋值）。

  1. 数据类型

虽然JS是弱数据类型的语言，但是JS中也存在数据类型，JS中的数据类型分为 ：原始数据类型 和 引用数据类型。

使用

typeof

关键字可以返回变量的数据类型

对于字符串类型的数据，除了可以使用双引号（"..."）、单引号（'...'）以外，还可以使用反引号 （``）。 而使用反引号引起来的字符串，也称为 模板字符串。

  • 模板字符串的使用场景：拼接字符串和变量。
  • 模板字符串的语法：- ... ：反引号 （英文输入模式下键盘 tab 键上方波浪线 ~ 那个键）- 内容拼接时，使用 ${ } 来引用变量
函数

函数（function）是被设计用来执行特定任务的代码块，方便程序的封装复用。 那我们学习函数，主要就是学习JS中函数的定义及调用的语法。

  1. 方式一
function 函数名(参数1,参数2..){
    要执行的代码
}

function add(a, b){
    return a + b;
}

let result = add(10,20);
alert(result);

因为JavaScript是弱数据类型的语言，所以有如下几点需要注意：

  • 形参不需要声明类型，并且JS中不管什么类型都是let去声明，加上也没有意义。
  • 返回值也不需要声明类型，直接return即可

注意：由于JS是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

  1. 方式二匿名函数：是指一种没有名称的函数，由于它们没有名称，因此无法直接通过函数名来调用，而是通过变量或表达式来调用。匿名函数定义可以通过两种方式：函数表达式 和 箭头函数。
  • 示例一（函数表达式）：
var add = function (a,b){
    return a + b;
}
  • 示例二（箭头函数）：
var add = (a,b) => {
    return a + b;
}
流程控制

在JS中，当然也存在对应的流程控制语句。常见的流程控制语句如下：

  • if ... else if ... else ...
  • switch
  • for
  • while
  • do ... while

DOM介绍

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。

DOM 其实我们并不陌生，之前在学习 XML 就接触过，只不过 XML 文档中的标签需要我们写代码解析，而 HTML 文档是浏览器解析。封装的对象分为

  • Document：整个文档对象
  • Element：元素对象
  • Attribute：属性对象
  • Text：文本对象
  • Comment：注释对象

DOM主要作用如下：

  • 改变 HTML 元素的内容
  • 改变 HTML 元素的样式（CSS）
  • 对 HTML DOM 事件作出反应
  • 添加和删除 HTML 元素

DOM操作

  • DOM的核心思想：将网页的内容当做对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上。

  • document对象- 网页中所有内容都封装在document对象中- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(…)

  • DOM操作步骤:- 获取DOM元素对象- 操作DOM对象的属性或方法 (查阅文档)

  • 我们可以通过如下两种方式来获取DOM元素。- 根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');- 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但没有push、pop等数组方法）

事件监听语法

事件源.addEventListener('事件类型', 要执行的函数);

在上述的语法中包含三个要素:

  • 事件源: 哪个dom元素触发了事件, 要获取dom元素
  • 事件类型: 用什么方式触发, 比如: 鼠标单击 click, 鼠标经过 mouseover
  • 要执行的函数: 要做什么事

  1. 常见事件

上面案例中使用到了事件 

click

、

mouseenter

、

mouseleave

，那都有哪些事件类型供我们使用呢？下面就给大家列举一些比较常用的事件属性:

Vue渐进式js框架

是一款用于构建用户界面的渐进式的JS框架

构建用户界面：在vue中，可以基于数据渲染出用户看到的界面

渐进式：渐进式中的渐进的意思是循序渐进。所谓渐进，指的是我们使用Vue框架呢，我们不需要把所有的组件、语法全部学习完毕才可以使用Vue。 而是，我们学习一点就可以使用一点了

框架：就是一套完整的项目解决方案，用于快速构建项目 。这是我们接触的第一个框架，那在我们后面的学习中，我们还会学习很多的java语言中的框架，那通过这些框架呢，就可以来快速开发java项目，提高开发效率。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue-快速入门</title>
</head>
<body>
  <div id="app">
    {{message}}
  </div>
  
  <script type="module">
    import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
    createApp({
      data(){
        return {
          message: 'Hello Vue'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

准备数据。在创建vue应用实例的时候，传入了一个js对象，在是这个对象中，我们要定义一个data方法，这个data方法的返回值就是vue中的数据

通过插值表达式渲染页面。插值表达式的写法：{{...}}

vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。

插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错 。

Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在 

<div id="app">...</div>

的里面 。

Vue指令

指令：指的是HTML标签带有v-前缀的特殊属性，不同指令具有不同含义，可以实现不同的功能。

形式：

<p v-xxx="....">.....</p>

常见指令：

指令 作用

v-for 列表渲染，遍历容器的元素或者对象的属性

v-bind 为HTML标签绑定属性值，如设置 href , css样式等

v-if/v-else-if/v-else 条件性的渲染某元素，判定为true时渲染,否则不渲染

v-show 根据条件展示某元素，区别在于切换的是display属性的值

v-model 在表单元素上创建双向数据绑定

v-on 为HTML标签绑定事件

Vue常见指令详解

v-for

作用：列表渲染，遍历容器的元素或者对象的属性

语法：

<tr v-for="(item,index) in items" :key="item.id">{{item}}</tr>

参数：

  • items 为遍历的数组
  • item 为遍历出来的元素
  • index 为索引/下标，从0开始 ；可以省略，省略index语法： v-for = "item in items"

key：

  • 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
  • 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

注意：遍历的数组，必须在data中定义； 要想让哪个标签循环展示多次，就在哪个标签上使用 v-for 指令。

v-bind

作用：动态为HTML标签绑定属性值，如设置href，src，style样式等。

语法：

v-bind:属性名="属性值"

<img v-bind:src="item.image" width="30px">

简化：

:属性名="属性值"

<img :src="item.image" width="30px">

注意：v-bind 所绑定的数据，必须在data中定义/或基于data中定义的数据而来。

v-if & v-show

作用：这两类指令，都是用来控制元素的显示与隐藏的

v-if：

  • 语法：v-if="表达式"，表达式值为 true，显示；false，隐藏
  • 原理：基于条件判断，来控制创建或移除元素节点（条件渲染）
  • 场景：要么显示，要么不显示，不频繁切换的场景
  • 其它：可以配合 v-else-if / v-else 进行链式调用条件判断

注意：v-else-if必须出现在v-if之后，可以出现多个； v-else 必须出现在v-if/v-else-if之后

v-show：

  • 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
  • 原理：基于CSS样式display来控制显示与隐藏
  • 场景：频繁切换显示隐藏的场景
v-model
  • 作用：在表单元素上使用，双向数据绑定。可以方便的 获取 或 设置 表单项数据
  • 语法：v-model="变量名"
  • 这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示 。 视图中的输入的数据变化，也会影响Vue的数据模型 。

注意：v-model 中绑定的变量，必须在data中定义。

v-on

作用：为html标签绑定事件（添加时间监听）

语法：

  • v-on:事件名="方法名"
  • 简写为 @事件名="…"
  • <input type="button" value="点我一下试试" v-on:click="handle">
  • <input type="button" value="点我一下试试" @click="handle">

这里的handle函数，就需要在Vue应用实例创建的时候创建出来，在methods定义。

注意： methods函数中的this指向Vue实例，可以通过this获取到data中定义的数据。

Ajax异步的js和xml

Ajax: 异步的javascript和xml。其作用有如下两点：

与服务器进行数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等等。

与服务器进行数据交互

如下图所示前端资源被浏览器解析，但是前端页面上缺少数据，前端可以通过Ajax技术，向后台服务器发起请求，后台服务器接受到前端的请求，从数据库中获取前端需要的资源，然后响应给前端，前端在通过我们学习的vue技术，可以将数据展示到页面上，这样用户就能看到完整的页面了。此处可以对比JavaSE中的网络编程技术来理解。

异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术。

XML：（英语：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。

Axios简化Ajax

使用原生的Ajax请求的代码编写起来还是比较繁琐的，所以接下来我们学习一门更加简单的发送Ajax请求的技术Axios 。Axios是对原生的AJAX进行封装，简化书写。

知识小贴士：在使用axios时，在axios之后，输入 thenc 会自动生成成功及失败回调函数结构 。

  1. 请求方法别名

Axios还针对不同的请求，提供了别名方式的api，具体格式如下：

axios.请求方式(url [, data [, config]])

具体如下：

方法 描述 axios.get(url [, config]) 发送get请求 查询 axios.delete(url [, config]) 发送delete请求 删除 axios.post(url [, data[, config]]) 发送post请求 添加

axios.put(url [, data[, config]]) 发送put请求 修改

  • ## 1. HTTP 请求方式HTTP（Hypertext Transfer Protocol）是一种在计算机网络中用于传输超媒体文档的应用层协议。HTTP 协议定义了客户端和服务器之间的通信规则，并规定了客户端向服务器发送请求时需要采用的请求方法（请求方式）。#### 常见的 HTTP 请求方式有四种：- `POST`（添加）- `GET`（查询）- `DELETE`（删除）- `PUT`（修改）

如果使用axios中提供的.then(function(){....}).catch(function(){....})，这种回调函数的写法，会使得代码的可读性和维护性变差。 而为了解决这个问题，我们可以使用两个关键字，分别是：async、await。

可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行。

Vue生命周期

  1. 介绍

vue的生命周期：指的是vue对象从创建到销毁的过程。

vue的生命周期包含8个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法，这些生命周期方法也被称为钩子方法。其完整的生命周期如下图所示：

beforeCreate创建前

created创建后

beforeMount挂载前

mounted挂载完成

beforeUpdate更新前

updated更新后

beforeDestroy销毁前

destroyed销毁后

其中我们需要重点关注的是mounted，其他的我们了解即可。

mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据

Vue工程化

Vue是一款用于构建用户界面的渐进式JavaScript框架 。

现在企业开发中更加讲究前端工程化方式的开发，主要包括如下4个特点:

  • 模块化：将js和css等，做成一个个可复用模块
  • 组件化：我们将UI组件，css样式，js行为封装成一个个的组件，便于管理
  • 规范化：我们提供一套标准的规范的目录接口和编码规范，所有开发人员遵循这套规范
  • 自动化：项目的构建，测试，部署全部都是自动完成

前端工程化，说白了，就是在企业级的前端项目开发中，把前端开发所需要的工具、技术、流程、经验进行规范化和标准化。

环境准备

create-vue是Vue官方提供的最新的脚手架工具，用于快速生成一个工程化的Vue项目。

  • create-vue提供了如下功能：- 统一的目录结构- 本地调试- 热部署- 单元测试- 集成打包上线

而要想使用create-vue来创建vue项目，则必须安装依赖环境：NodeJS

  • npm：Node Package Manager，是NodeJS的软件包管理器。

在开发前端项目的过程中，我们需要相关的依赖，就可以直接通过 

npm install xxx

命令，直接从远程仓库中将依赖直接下载到本地了。

Vue项目创建

创建好的项目如图所示

其中

*.vue

是Vue项目中的组件文件，在Vue项目中也称为单文件组件（SFC，Single-File Components）。Vue 的单文件组件会将一个组件的逻辑 (JS)，模板 (HTML) 和样式 (CSS) 封装在同一个文件里（

*.vue

）

Vue的组件有两种不同的风格：

组合式API 和 选项式API

  • 组合式API：是Vue3提供的一种基于函数的组件编写方式，通过使用函数来组织和复用组件的逻辑。它提供了一种更灵活、更可组合的方式来编写组件。代码形式如下：
<script setup>
import { ref, onMounted } from 'vue';
const count = ref(0); //声明响应式变量

function increment(){ //声明函数
   count.value++;
}

onMounted(() => { //声明钩子函数
  console.log('Vue Mounted....'); 
})
</script>

<template>
   <input type="button" @click="increment"> Api Demo1 Count : {{ count }}
</template>

<style scoped>
   
</style>
  • setup：是一个标识，告诉Vue需要进行一些处理，让我们可以更简洁的使用组合式API。
  • ref()：接收一个内部值，返回一个响应式的ref对象，此对象只有一个指向内部值的属性 value。
  • onMounted()：在组合式API中的钩子方法，注册一个回调函数，在组件挂载完成后执行。

钩子函数

在前端开发中，钩子函数（Hook Function）是一种特殊的函数，它在特定的事件或状态发生时被调用，允许开发者在特定的时间点插入自定义的逻辑。

常见用途：

  1. 页面加载和初始化：
  2. 数据处理和更新：
  3. 副作用处理：
  4. 组件生命周期管理：

选项式API：可以用包含多个选项的对象来描述组件的逻辑，如：

data

，

methods

，

mounted

等。选项定义的属性都会暴露在函数内部的

this

上，它会指向当前的组件实例。

<script>
export default{
   data() {
      return {
         count: 0
      }
   },
   methods: {
      increment: function(){
         this.count++
      }
   },
   mounted() {
      console.log('vue mounted.....');
   }
}
</script>

<template>
  <input type="button" @click="increment">Api Demo1 Count :  {{ count }}
</template>

<style scoped>

</style>

ElementPlus快速构建网页

  1. 介绍

Element：是饿了么公司前端开发团队提供的一套基于 Vue3 的网站组件库，用于快速构建网页。

Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等。

实现页面布局，可以借助于 

ElementPlus

中提供的 container 容器布局。

Container布局容器，用于布局的容器组件，方便快速搭建页面的基本结构：

<el-container>

：外层容器。 当子元素中包含 

<el-header>

或 

<el-footer>

时，全部子元素会垂直上下排列， 否则会水平左右排列。

<el-header>

：顶栏容器。

<el-aside>

：侧边栏容器。

<el-main>

：主要区域容器。

<el-footer>

：底栏容器。

VueRouter官方路由

  • Vue Router：Vue的官方路由。 为Vue提供富有表现力、可配置的、方便的路由。
  • Vue中的路由，主要定义的是路径与组件之间的对应关系。

比如，我们打开一个网站，点击左侧菜单，地址栏的地址发生变化。 地址栏地址一旦发生变化，在主区域显示对应的页面组件。

VueRouter主要由以下三个部分组成，如下所示：

watch侦听

作用：侦听一个或多个响应式数据源，并在数据源变化时调用给所给的回调函数。

用法：

导入watch函数

执行watch函数，传入要侦听的响应式数据源（ref对象）和回调函数；

  • 侦听对象的单个属性

  • 侦听对象的全部属性

第三个可选参数，常见两个选项：

  • deep（boolean）：是否深度侦听，默认浅层侦听。
  • immediate（boolean）：是否在侦听创建时立即触发回调函数。
标签： 前端
本文转载自: https://blog.csdn.net/2301_78554215/article/details/142407450
版权归原作者 LL.KK.LL 所有， 如有侵权，请联系我们删除。
登录后发布评论

“《让你两小时结合AI成为前端高手秘籍》”的评论:

还没有评论
关于作者
...
overfit同步小助手
文章同步
相关阅读

网络安全法-网络运行安全

使用selenium/drissionpage时如何阻止chrome自动跳转http到https

docker desktop 里部署的Open WebUI 管理员密码忘记了的处理方法

在ubuntu20.04中搭建onsite比赛运行环境

利用开源的低代码表单设计器FcDesigner高效管理和渲染复杂表单结构

Kafka学习笔记

【前端】浏览器输入url到页面呈现发生了什么？

文章导航