【黑马JavaWeb+AI知识梳理】前端Web基础02 - JS+Vue+Ajax

JS（行为/交互效果）

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

和Java完全不同，但基础语法类似。

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

JS核心语法

引入方式

内部脚本：将JS代码定义在HTML页面中
- JavaScript代码必须位于<script></script>标签之间
- 在HTML文档中，可以在任意地方，防止任意数量的<script>
- 一般会把脚本置于<body>元素的底部，可改善显示速度
外部脚本：将JS代码定义在外部JS文件中，然后通过<script src=""></script>引入到HTML页面中
书写规范：每行结束符为分号，但可有可无

基础语法

变量/常量

JS中用let关键字来声明变量（弱类型语言，变量可以存放不同类型的值）。

早期可以用var，但并不严谨（不推荐）：var声明的变量可以重复声明，且会提升变量的作用域

变量名需要遵循：
- 只能用字母、数字、下划线（_）、美元符号($)组成，且数字不能开头
- 变量名严格区分大小写，大小写不同则变量不同
- 不能使用关键字，如let\var\if\for等
JS中用const关键字声明常量，一旦声明无法更改

输出方式：
- window.alert() 弹出警告窗（window.可省略）
- console.log() // 输出到控制台
- document.write() // 输出到body区域，不常用
数据类型
- 基本数据类型：
  - number：数字（整数、小数、NaN（Not a Number））
  - boolean：true、false
  - null：对象为空，JavaScript大小写敏感，null、Null、NULL不同
  - undefined：声明的变量未初始化
  - string：单引号、双引号、反引号都可以，推荐使用单引号
    - 模板字符串语法：
      - ``（反引号）
      - 内容拼接变量时，使用${}包住变量
        
        javascript 复制代码
        
        let name = "小明"; // 声明变量并赋值 let age = 18; // 声明变量并赋值 console.log('大家好，我是' + name + '，今年' + age + '岁。'); // 输出变量的值 console.log(`大家好，我是${name}，今年${age}岁。`); // 输出变量的值
  - 使用typeof运算符可以获取数据类型
- 引用数据类型
函数：被设计用来执行特定任务的代码块，方便程序封装复用

JS是弱类型语言，形参、返回值都不需要指定类型，在调用函数时，实参个数与形参个数可以不一致，但建议一致。
- 定义：JavaScript中的函数通过function关键字进行定义：
  js 复制代码
```
function functionName(parameter1, parameter2...){}
```
- 调用：函数名称（实际参数列表）
  js 复制代码
```
let result = functionName(1,2);
```
- 匿名函数（用一个变量接收以后可被调用）
  - 函数表达式
    js 复制代码
```
let add = function(a, b){
    return a + b;
}
```
  - 箭头函数
    js 复制代码
```
let add = (a, b) => {
    return a + b
}
```

自定义对象

在箭头函数中，this指向的是当前对象的父级，不要在自定义对象的时候用箭头函数

js 复制代码

let 对象名 = {
    属性名1：属性值1；
    属性名2：属性值2；
    属性名3：属性值3；
    方法名：function（形参列表）{}
}
let 对象名 = {
    属性名1：属性值1；
    属性名2：属性值2；
    属性名3：属性值3；
    方法名（形参列表）{}
}

JSON（J avaS cript O bject N otation），JavaScript对象标记法。
- JSON 是通过JavaScript 对象标记法书写的文本
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体 ，在网络中进行数据传输
- 自定义对象时，属性名不用加双引号 ，但JSON中必须要加
  - JSON.parse()
    
    JSON转对象
  - JSON.stringfy()
    
    对象转JSON

DOM（Document Object Model，文档对象模型）

将标记语言的各个组成部分封装为对应的对象：

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

JavaScript通过DOM，就能对HTML进行：

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

操作：

核心思想：将网页中所有的元素当做对象来处理（标签的所有属性在该对象都可以找到）
步骤：
- 获取要操作的DOM元素对象
- 操作DOM对象的属性或方法
获取DOM对象

早期为document.getElementById等等
- 根据CSS选择器来获取DOM元素，获取匹配到的第一个元素：document.querySelector('选择器')
- 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('选择器')
  
  注意：得到的是一个NodeList节点集合，是一个伪数组（有长度、有索引的数组）

JS事件监听

事件：HTML事件是发生在HTML元素上的"事情"。如：

按钮被点击
鼠标移动到元素上
按下键盘按键

事件监听：JavaScript可以在事件触发时，立即调用一个函数做出响应，也称为事件绑定或注册事件

语法：事件源.addEventListener('事件类型', 事件触发执行的函数);

早期：事件源.on事件=...，on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用

事件监听三要素：

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

常见事件

鼠标事件
- click
- mouseenter
- mouseleave
键盘事件
- keydown
- keyup
焦点事件
- focus
- blur
表单事件
- input
- submit

JS程序优化

导入其他文件中的函数：

js 复制代码

import {printLog} from './utils.js'

导出函数被其他类看见：

js 复制代码

export function printLog(){}

html文件中宣布类型为模块化：

html 复制代码

<script src="./js/eventDemo.js" type="module"></script>

Vue3

什么是Vue？

Vue是一款用于构建用户界面 的渐进式 的JavaScript框架。官方网站
渐进式：
框架：一套完整的项目解决方案，用于快速构建项目
优点：大大提升前端项目的开发效率
缺点：需要理解记忆框架的使用规则。（参照官网）

Vue快速入门

准备
- 引入Vue模块（官网提供）
- 创建Vue程序的应用实例，控制视图的元素
- 准备元素（div），被Vue控制

数据驱动视图

准备数据

通过插值表达式渲染页面

html 复制代码

<div id="app">
    <h1>
        {{message}}
    </h1>
</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>

Vue常用指令

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

常用指令

指令	作用
v-for	列表渲染，遍历容器的元素或者对象的属性
v-bind	动态为HTML标签绑定属性值，如设置href，css，style样式等
v-if/v-else-if/v-else	条件性的渲染某元素，判定为true时渲染，否则不渲染
v-show	根据条件展示某元素，区别在于切换的是display属性的值
v-model	在表单元素上创建双向数据绑定，可以方便地获取或设置表单项数据
v-on	为HTML标签绑定事件（添加事件监听）

v-for

注意：遍历的数组必须在data中定义；要想让哪个标签循环展示多次，就在哪个标签上使用v-for指令
html 复制代码
```
<tr v-for="(item, index) in items" :key="item.id">{{item}}</tr>
```
- items：遍历的数组
- item：遍历出来的元素
- index：索引/下标，从0开始；可以省略：v-for="item in items"
- key
  - 作用：给元素添加的唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
  - 推荐使用id作为key（唯一），不推荐使用index作为key（会变化，不对应）

v-bind

html 复制代码

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

v-if/v-else-if/v-else

注意：v-else-if必须出现在v-if之后，可以出现多个；v-else必须出现在v-if/v-else-if之后。
- v-if="表达式"，表达式值为true，显示，false，隐藏
- 基于条件判断，来控制或移除元素节点（条件渲染）
- 要么显示，要么不显示，不频繁切换的场景
- 可以配合v-else-if / v-else进行链式调用条件判断
v-show
- v-show="表达式"，表达式值为true，显示，false，隐藏
- 基于CSS样式display来控制显示与隐藏
- 频繁切换显示隐藏的场景
v-model：v-model="变量名"

注意：v-model中绑定的变量，必须在data中定义。
html 复制代码
```
<input type="text" id="name" v-model="searchForm.name"
```
v-on：v-on: 事件名="方法名"，简写为：@事件名="..."

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

Vue生命周期

生命周期：指一个对象从创建到销毁的整个过程。

生命周期的八个阶段：每触发一个生命周期事件，会自动执行一个生命周期方法（钩子）

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	数据更新前
updated	数据更新后
beforeUnmount	组件销毁前
unmounted	组件销毁后

Ajax

入门

定义：A synchronous J avaScript A nd X ML，异步的JavaScript和XML（Ex tensible M arkup Language，可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。）
作用
- 数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互：可以在不重新加载整个页面 的情况下，与服务器交换数据并更新部分网页的技术。如：搜索联想、用户名是否可用的校验等等。
同步与异步
async & await

await关键字只能在async函数内有效，await关键字取代then函数，等待获取到请求成功的结果值

Axios

介绍：Axios对原生的Ajax进行了封装，简化书写，快速开发。
官网：https://www,axios-http.cn/
步骤：
- 引入Axios的js文件（参照官网）
- 使用Axios发送请求，并获取响应结果
  - GET：axios.get(url).then((res)=>{...}).catch((err)=>{})
  - POST：axios.post(url).then((res)=>{...}).catch((err)=>{})
- 参数
  - method：请求方式，GET/POST
  - url：请求路径
  - data：请求数据（POST）
  - params：发送请求时携带的url参数，如：?pwd=1234
- Axios-请求方式别名
  - 格式：axios.请求方式(url [, data [, config]])