【黑马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>元素的底部，可改善显示速度
- JavaScript代码必须位于
- 外部脚本：将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：单引号、双引号、反引号都可以，推荐使用单引号
-
模板字符串语法：
-
``（反引号）
-
内容拼接变量时，使用${}包住变量
let name = "小明"; // 声明变量并赋值 let age = 18; // 声明变量并赋值 console.log('大家好，我是' + name + '，今年' + age + '岁。'); // 输出变量的值 console.log(`大家好，我是${name}，今年${age}岁。`); // 输出变量的值
-
-
-
使用typeof运算符可以获取数据类型
-
-
引用数据类型
-
-
函数：被设计用来执行特定任务的代码块，方便程序封装复用
JS是弱类型语言，形参、返回值都不需要指定类型，在调用函数时，实参个数与形参个数可以不一致，但建议一致。-
定义：JavaScript中的函数通过function关键字进行定义：
function functionName(parameter1, parameter2...){} -
调用：函数名称（实际参数列表）
let result = functionName(1,2); -
匿名函数（用一个变量接收以后可被调用）
-
函数表达式
let add = function(a, b){return a + b; } -
箭头函数
let add = (a, b) => {return a + b }
-
-
-
自定义对象
在箭头函数中，this指向的是当前对象的父级，不要在自定义对象的时候用箭头函数let 对象名 = {属性名1：属性值1；属性名2：属性值2；属性名3：属性值3；方法名：function（形参列表）{} } let 对象名 = {属性名1：属性值1；属性名2：属性值2；属性名3：属性值3；方法名（形参列表）{} } -
JSON（JavaScript Object Notation），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程序优化
导入其他文件中的函数：
import {printLog} from './utils.js'
导出函数被其他类看见：
export function printLog(){}
html文件中宣布类型为模块化：
<script src="./js/eventDemo.js" type="module"></script>
Vue3
什么是Vue？
-
Vue是一款用于构建用户界面的渐进式的JavaScript框架。官方网站
-
渐进式：
-
框架：一套完整的项目解决方案，用于快速构建项目
-
优点：大大提升前端项目的开发效率
-
缺点：需要理解记忆框架的使用规则。（参照官网）
Vue快速入门
-
准备
- 引入Vue模块（官网提供）
- 创建Vue程序的应用实例，控制视图的元素
- 准备元素（div），被Vue控制
-
数据驱动视图
-
准备数据
-
通过插值表达式渲染页面
<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指令<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
<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中定义。<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
入门
-
定义：Asynchronous JavaScript And XML，异步的JavaScript和XML（Extensible Markup 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]])