网站被别人备案,社区网站建设平台,网站建设分工说明,北京综合网络营销JavaScript学习目录 一、JavaScript1. 引入方式1.1 内部脚本 (Inline Script)1.2 外部脚本 (External Script) 2. 基础语法2.1 声明变量2.2 声明常量2.3 输出信息 3. 数据类型3.1 基本数据类型3.2 模板字符串 4. 函数4.1 具名函数 (Named Function)4.2 匿名函数 (Anonymous Fun… JavaScript学习目录 一、JavaScript1. 引入方式1.1 内部脚本 (Inline Script)1.2 外部脚本 (External Script) 2. 基础语法2.1 声明变量2.2 声明常量2.3 输出信息 3. 数据类型3.1 基本数据类型3.2 模板字符串 4. 函数4.1 具名函数 (Named Function)4.2 匿名函数 (Anonymous Function)4.2.1 函数表达式4.2.2 箭头函数 (Arrow Function 5. 自定义对象5.1 自定义对象5.2 调用对象属性/方法5.3 JSON - JS对象标记法 6. DOM6.1 获取DOM对象6.2 修改DOM对象的内容6.3 其他常用的DOM操作方法 7. 事件监听7.1 addEventListener 方法7.2 传统onclick属性7.3 事件处理的区别与选择 8. 常见事件8.1 typemodule关键字8.2 export关键字8.3 import关键字8.4 常见事件8.4.1 鼠标事件8.4.2 键盘事件8.4.3 表单事件8.4.4 焦点事件8.4.5 其他事件 二、Vue1. Vue快速入门1.1 数据绑定1.2 模块化脚本加载1.3 响应式数据1.4 应用实例创建与挂载2. Vue生命周期2.1 Vue 生命周期的主要阶段2.1.1 创建阶段 (Creation)2.1.2 挂载阶段 (Mounting)2.1.3 更新阶段 (Updating)2.1.4 销毁阶段 (Destroying) 2.2 生命周期图示2.3 使用场景 三、Axios1. Axios快速入门1.1 Axios GET请求1.2 Axios POST请求1.3 回调函数 2. Axios请求方式别名 四、案例---员工列表1. Vue 关键知识点总结1.1 searchForm 对象1.2 v-model 指令1.3 v-on 指令 1.4 v-if 和 v-else-if 指令1.5 v-show 指令1.6 v-show 与 v-if 的区别1.7 v-for 指令1.8 async 和 await1.9 URL 解释1.9.1 基础URL1.9.2 查询参数 本文参考黑马程序员全网首发AIJavaWeb开发入门
一、JavaScript
1. 引入方式
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-引入方式/title
/head
body!-- script//1. 内部脚本alert(Hello JS);/script --!-- 2. 外部脚本 --script srcjs/demo.js/script
/body
/htmljs/demo.js
alert(Hello JavaScript);1.1 内部脚本 (Inline Script)
内部脚本是直接嵌入到HTML文档中的JavaScript代码。它们通常放在script标签内可以放置在HTML文档的任何位置但大多数情况下会放在head或body标签内。在给定的代码示例中内部脚本被注释掉了因此不会被执行。如果取消注释alert(Hello JS);这行代码将会创建一个弹窗显示消息Hello JS。
1.2 外部脚本 (External Script)
外部脚本是将JavaScript代码保存在一个单独的.js文件中并通过script标签的src属性来引用这个文件。这种方法有助于保持HTML和JavaScript代码的分离使得代码更易于维护和重用。在示例中script srcjs/demo.js/script这行代码用来加载位于相对路径js/demo.js的外部JavaScript文件。这意味着HTML文档所在的目录下应该有一个名为js的子目录其中包含了一个名为demo.js的文件。使用外部脚本还可以让浏览器缓存JavaScript文件从而加快页面加载速度特别是在用户访问同一网站的多个页面时。
2. 基础语法
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-基础语法/title
/head
bodyscript//1. 声明变量// let a 10;// a Hello;// a true;// alert(a); //弹出框//2. 声明常量const PI 3.14;//PI 5.0;console.log(PI); //输出到控制台// document.write(PI); //输出到body区域(不常用)/script
/body
/html2.1 声明变量
在JavaScript中可以使用let关键字来声明变量。let允许你声明一个块级作用域的局部变量。变量可以在声明后被重新赋值。在给定的代码示例中变量a被注释掉了但是按照其设计它最初被赋予了一个数值10然后又被赋予了字符串Hello最后是布尔值true。这展示了JavaScript是一种动态类型语言变量可以在不同的时间点持有不同类型的值。
2.2 声明常量
使用const关键字可以声明一个常量意味着这个变量一旦被赋值就不能再改变它的值。这并不意味着const定义的对象或数组的内容不可变只是不能重新赋值给该常量引用。在代码示例中常量PI被赋予了值3.14。如果尝试再次为PI赋值如PI 5.0;将会导致错误因为这是不允许的操作。
2.3 输出信息
alert()函数用于创建一个弹窗向用户显示一条消息。此功能在示例中被注释掉了。console.log()方法用于将信息输出到浏览器的开发者工具中的控制台这对于调试非常有用。document.write()方法可以用来直接向文档写入文本字符串。这种方法在现代开发中不常用因为它会覆盖页面上的现有内容并且只能在页面加载期间使用。
3. 数据类型
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-数据类型/title
/head
bodyscript//1. 数据类型// alert(typeof 10); //number// alert(typeof 1.5); //number// alert(typeof true); //boolean// alert(typeof false); //boolean// alert(typeof Hello); //string// alert(typeof JS); //string// alert(typeof JavaScript); //string// alert(typeof null); //null ? - object// let a ;// alert(typeof a); //undefined//2. 模板字符串 - 简化字符串拼接let name Tom;let age 18;console.log(我是name, 我今年age岁);console.log(我是${name}, 我今年${age}岁);/script
/body
/html3.1 基本数据类型 JavaScript中有几种基本的数据类型包括number、boolean、string、null、undefined等。 number: 用于表示数值包括整数如10和浮点数如1.5。在JavaScript中所有的数字都是以64位浮点数格式存储的。 boolean: 表示逻辑值只有两个值true 和 false。 string: 用于表示文本可以使用单引号‘…’、双引号“…”或反引号...来定义字符串。 null: 表示一个空值或不存在的对象在技术上它是一个对象类型的特殊值虽然这在语义上可能有些混淆。 undefined: 当声明了一个变量但没有赋值时默认的值就是undefined。它也用来表示某个变量或属性不存在。
3.2 模板字符串
模板字符串是增强版的字符串允许嵌入表达式。它们使用反引号来包裹并且可以在其中直接插入变量和表达式通过${expression}语法。使用模板字符串可以简化字符串拼接使得代码更易读和编写。例如console.log(我是${name}, 我今年${age}岁); 这行代码会输出 我是Tom, 我今年18岁;其中${name}和${age}会被相应的变量值替换。
typeof运算符: typeof是一个运算符返回一个字符串表示操作数的数据类型。上面的注释部分展示了如何使用typeof来检查不同类型的值。
注意事项:
注意到typeof null返回的是object这是一个历史遗留问题是因为JavaScript最初实现上的一个错误但它一直保留至今以保持向后兼容性。
4. 函数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-函数/title
/head
bodyscript//1. 函数定义及调用 - 具名函数// function add(a,b){// return a b;// }// let result add(10,20);// console.log(result);//2. 函数定义及调用 - 匿名函数//2.1 函数表达式// let add function(a,b){// return a b;// }// let result add(100,200);// console.log(result);//2.2 箭头函数let add (a,b) {return a b;}let result add(1000,2000);console.log(result);/script
/body
/html4.1 具名函数 (Named Function)
具名函数是使用function关键字定义并且具有一个明确的名字。这个名称可以在函数内部用于递归调用也可以在调试或堆栈跟踪时提供有用的上下文信息。在示例中add函数接收两个参数a和b并返回它们的和。虽然这部分被注释掉了但其目的是展示如何定义和调用一个具名函数。
4.2 匿名函数 (Anonymous Function)
匿名函数是没有名字的函数。它们通常作为函数表达式来使用可以赋值给变量、作为参数传递给其他函数或者立即执行IIFE。
4.2.1 函数表达式
函数表达式是将匿名函数赋值给一个变量的方式。这使得函数可以通过该变量名进行调用。示例中的add变量指向了一个匿名函数该匿名函数接收两个参数并返回它们的和。通过add(100,200)调用它结果为300。
4.2.2 箭头函数 (Arrow Function
箭头函数是ES6引入的一种更简洁的函数书写方式。它们有较短的语法并且不会绑定自己的thisargumentssuper或new.target。在代码示例中add是一个箭头函数它同样接收两个参数并返回它们的和。这里使用了大括号{}来包裹函数体因为函数体内有多行代码或需要显式地返回一个值。如果箭头函数只有一行代码可以直接省略大括号和return关键字。例如let add (a, b) a b;
5. 自定义对象
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-函数/title
/head
bodyscript//1. 自定义对象// let user {// name: Tom,// age: 18,// gender: 男,// sing: function(){// alert(this.name 悠悠的唱着最炫的民族风~)// }// }//let user {// name: Tom,// age: 18,// gender: 男,// sing(){// alert(this.name 悠悠的唱着最炫的民族风~)// }//}// let user {// name: Tom,// age: 18,// gender: 男,// sing: () { //注意: 在箭头函数中, this并不指向当前对象 - 指向的是当前对象的父级 【不推荐】// alert(this :悠悠的唱着最炫的民族风~)// }// }//2. 调用对象属性/方法//alert(user.name);//user.sing();//3. JSON - JS对象标记法let person {name: itcast,age: 18,gender: 男}alert(JSON.stringify(person)); //js对象 -- json字符串let personJson {name: heima, age: 18};alert(JSON.parse(personJson).name);/script
/body
/html5.1 自定义对象
在JavaScript中可以使用对象字面量的方式创建对象。对象是一组无序的键值对集合其中键是字符串或符号值可以是任何有效的JavaScript数据类型包括函数。对象的方法可以通过两种方式定义传统函数表达式和简化的ES6语法去掉function关键字。但是要注意在箭头函数中this关键字的行为与常规函数不同它不会绑定到当前对象而是继承自外层作用域因此在对象方法中通常不推荐使用箭头函数来定义方法。
5.2 调用对象属性/方法
可以通过点.操作符访问对象的属性或调用其方法。例如user.name会返回用户的名字而user.sing()将执行sing方法并弹出一个带有消息的对话框。
5.3 JSON - JS对象标记法 JSON是一种轻量级的数据交换格式易于人类阅读和编写同时也易于机器解析和生成。它基于JavaScript编程语言的一个子集。 JSON.stringify() 方法用于将JavaScript对象转换为JSON字符串。这在需要发送数据给服务器或存储时非常有用。 alert(JSON.stringify(person)); // 将 person 对象转换为 JSON 字符串并显示JSON.parse() 方法用于解析JSON字符串构造由字符串描述的JavaScript值或对象。这在接收来自服务器的数据或从存储中读取时非常有用。 alert(JSON.parse(personJson).name); // 解析 JSON 字符串并访问 name 属性6. DOM
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-DOM/title
/head
bodyh1 idtitle111111/h1h122222/h1h133333/h1script//1. 修改第一个h1标签中的文本内容//1.1 获取DOM对象// let h1 document.querySelector(#title1);//let h1 document.querySelector(h1); // 获取第一个h1标签let hs document.querySelectorAll(h1);//1.2 调用DOM对象中属性或方法hs[0].innerHTML 修改后的文本内容;/script
/body
/html6.1 获取DOM对象
document.querySelector 方法用于返回文档中与指定的选择器或选择器组匹配的第一个Element节点如果没有任何匹配则返回null。 使用ID选择器document.querySelector(#title1) 会选取具有idtitle1的元素。使用标签名选择器document.querySelector(h1) 会选择文档中的第一个h1元素。 document.querySelectorAll 方法用于返回一个静态不是实时更新的NodeList对象包含文档中所有与指定的选择器或选择器组匹配的元素。
6.2 修改DOM对象的内容
在代码示例中通过querySelectorAll(h1)获取了所有的h1元素并存储在变量hs中。然后通过访问hs[0]来定位到第一个h1元素并使用innerHTML属性设置其新的文本内容为“修改后的文本内容”。innerHTML 属性可以用来读取或设置元素的内容包括HTML标记。如果只想修改纯文本而不涉及HTML结构可以使用textContent属性。
6.3 其他常用的DOM操作方法
getElementById(id)通过元素的ID获取单个元素。getElementsByClassName(name)通过类名获取一组元素。getElementsByTagName(name)通过标签名获取一组元素。appendChild(child)向节点添加子节点。removeChild(child)从节点中移除子节点。insertBefore(newElement, referenceElement)在参考元素之前插入新元素。setAttribute(name, value) 和 getAttribute(name)分别为设置和获取元素的属性值。
7. 事件监听
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleJS事件/title
/head
bodyinput typebutton idbtn1 value点我一下试试1input typebutton idbtn2 value点我一下试试2script//事件监听 - addEventListener (可以多次绑定同一事件)document.querySelector(#btn1).addEventListener(click, () {console.log(试试就试试~~);});document.querySelector(#btn1).addEventListener(click, () {console.log(试试就试试22~~);});//事件绑定-早期写法 - onclick (如果多次绑定同一事件, 覆盖) - 了解document.querySelector(#btn2).onclick () {console.log(试试就试试~~);}document.querySelector(#btn2).onclick () {console.log(试试就试试22~~);}/script
/body
/html7.1 addEventListener 方法
addEventListener 是现代推荐的方式来为DOM元素添加事件监听器。它允许你为同一个事件类型如点击事件绑定多个不同的处理函数而不会相互覆盖。在示例中#btn1按钮通过addEventListener方法绑定了两个点击事件处理函数。当点击#btn1时这两个函数都会被执行依次输出“试试就试试~~”和“试试就试试22~~”。
7.2 传统onclick属性
早期的事件绑定方式是直接设置元素的onclick属性。这种方式只能为一个元素的特定事件指定一个处理函数如果再次为同一事件设置onclick则会覆盖之前的定义。示例中的#btn2按钮使用了onclick属性来绑定点击事件处理函数。由于第二次赋值覆盖了第一次的赋值因此只有最后一个绑定的处理函数会被执行即只会输出“试试就试试22~~”。
7.3 事件处理的区别与选择
使用addEventListener可以更灵活地管理事件特别是当你需要在不同地方或时间点添加多个事件处理器时。此外它还支持事件捕获阶段和冒泡阶段的选择提供了更多的控制。而onclick等内联事件处理程序较为简单直接但在复杂的应用中可能会导致代码难以维护并且容易被后续的脚本覆盖。
8. 常见事件
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleJS-事件-常见事件/title
/headbodyform action styletext-align: center;input typetext nameusername idusernameinput typetext nameage idageinput idb1 typesubmit value提交input idb2 typebutton value单击事件/formbrbrbrtable width800px border1 cellspacing0 aligncentertrth学号/thth姓名/thth分数/thth评语/th/trtr aligncentertd001/tdtd张三/tdtd90/tdtd很优秀/td/trtr aligncenter idlasttd002/tdtd李四/tdtd92/tdtd优秀/td/tr/table!-- typemodule 模块化JS --script src./js/eventDemo.js typemodule/script
/body/html8.1 typemodule关键字
该部分代码有如下结构
项目根目录
├── 常见事件.html
└── js├── eventDemo.js└── utils.js通过 typemodule我们可以创建一个清晰的模块系统其中各个模块可以相互依赖形成一层层的调用关系。浏览器能够智能地解析这些依赖关系确保所有必要的模块都被正确加载和执行。这种方式不仅提高了代码的可维护性和复用性还允许开发者利用现代JavaScript的强大功能来构建更加复杂的应用程序。
./utils.js
export function printLog(msg){console.log(msg);
}8.2 export关键字
export关键字允许你将函数、变量或类从当前模块中暴露出去以便其他模块可以通过import语句来使用它们。在这段代码中printLog函数被定义并立即通过export关键字导出这意味着任何导入此模块的地方都可以访问到printLog函数。 ./js/eventDemo.js
import { printLog } from ./utils.js;//click: 鼠标点击事件
document.querySelector(#b2).addEventListener(click, () {printLog(我被点击了...);
})//mouseenter: 鼠标移入
document.querySelector(#last).addEventListener(mouseenter, () {printLog(鼠标移入了...);
})//mouseleave: 鼠标移出
document.querySelector(#last).addEventListener(mouseleave, () {printLog(鼠标移出了...);
})//keydown: 某个键盘的键被按下
document.querySelector(#username).addEventListener(keydown, () {printLog(键盘被按下了...);
})//keyup: 某个键盘的键被抬起
document.querySelector(#username).addEventListener(keyup, () {printLog(键盘被抬起了...);
})//blur: 失去焦点事件
document.querySelector(#age).addEventListener(blur, () {printLog(失去焦点...);
})//focus: 元素获得焦点
document.querySelector(#age).addEventListener(focus, () {printLog(获得焦点...);
})//input: 用户输入时触发
document.querySelector(#age).addEventListener(input, () {printLog(用户输入时触发...);
})//submit: 提交表单事件
document.querySelector(form).addEventListener(submit, () {alert(表单被提交了...);
})8.3 import关键字
import语句用来从其他模块导入所需的函数、对象或原始值。这里的import { printLog } from ./utils.js;是从./utils.js文件中导入一个名为printLog的函数。{}花括号表示只导入特定的导出项。如果要导入整个模块的所有导出项可以省略花括号并使用星号*加上一个别名例如import * as utils from ./utils.js;。
8.4 常见事件
8.4.1 鼠标事件
click: 当用户点击某个元素时触发是最常用的鼠标事件之一。dblclick: 双击事件。mouseover 和 mouseout: 分别当鼠标指针进入和离开元素时触发。mousedown 和 mouseup: 分别在按下和释放鼠标按钮时触发。
8.4.2 键盘事件
keydown 和 keyup: 分别在按键被按下和释放时触发。keypress: 当字符键被按下时触发已废弃在现代开发中不推荐使用。
8.4.3 表单事件
submit: 当用户提交表单时触发。可以用来验证表单数据或阻止默认的提交行为。input 和 change: 分别在输入框内容变化时实时和失去焦点时触发适用于表单元素如文本框、下拉列表等。focus 和 blur: 分别在元素获得焦点和失去焦点时触发。
8.4.4 焦点事件
focusin: 当元素即将获得焦点时触发并且此事件会冒泡。可以在父级元素上监听focusin来响应任何子元素获得焦点的情况。focus: 当用户通过点击、键盘导航或脚本使一个元素获得焦点时触发。常用于表单元素如输入框、文本区域等以检测用户的交互。blur: 当元素失去焦点时触发。与focus事件相对它标志着用户已经结束了对该元素的操作或离开了该元素。
8.4.5 其他事件
load: 页面加载完成后触发。resize: 窗口大小改变时触发。scroll: 页面滚动时触发。
二、Vue
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架旨在通过简洁的 API 实现响应式的数据绑定和组件化的视图管理。它允许开发者创建可复用的组件并通过声明式渲染将数据动态地绑定到DOM元素上。Vue 的核心库专注于视图层但其生态系统包括了路由Vue Router、状态管理Vuex等强大工具支持从简单的单页面应用到复杂的大规模应用开发。Vue 以其易学易用、灵活性高和性能优越而著称使其成为现代前端开发中非常受欢迎的选择。与传统的 MVC 框架相比Vue 更加轻量且易于集成到现有项目中。
1. Vue快速入门
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleVue-快速入门/title
/head
bodydiv idapph1{{message}}/h1h1{{count}}/h1/divscript typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.js;createApp({data() {return {message: Hello Vue,count: 100}}}).mount(#app);/script
/body
/html1.1 数据绑定
插值表达式: 使用双大括号语法 {{ }} 绑定数据属性到HTML中。例如h1{{ message }}/h1 会显示 message 的值。
1.2 模块化脚本加载
ES模块: 使用 script typemodule 标签来加载脚本并通过 import 语句从CDN引入Vue 3库文件。
1.3 响应式数据
响应式数据对象: 在 data() 方法中返回的对象中的所有属性都是响应式的。这意味着当这些属性的值发生变化时Vue会自动更新相关的视图部分。
1.4 应用实例创建与挂载
创建Vue应用实例: 使用 createApp({...}) 创建一个新的Vue应用实例并通过 .mount(#app) 将其挂载到指定的DOM元素上。
2. Vue生命周期
Vue 的生命周期是指 Vue 实例从创建到销毁所经历的一系列阶段。每个阶段都有特定的钩子函数Lifecycle Hooks允许开发者在这些关键点插入自定义逻辑如初始化数据、响应状态变化或清理资源等。理解 Vue 的生命周期对于开发高效且可维护的应用至关重要。
2.1 Vue 生命周期的主要阶段
2.1.1 创建阶段 (Creation)
beforeCreate实例刚刚被创建但尚未开始初始化属性如 data 和 methods。此时实例还不能访问 DOM 或者响应式数据。created实例已完成数据观测和事件配置但尚未挂载到 DOM 上。这是发起网络请求、设置定时器或执行其他初始化操作的好时机。
2.1.2 挂载阶段 (Mounting)
beforeMount模板编译完成虚拟 DOM 创建完毕但还没有渲染到真实 DOM 中。可以在这个阶段做一些准备工作比如预加载资源。mounted实例已经被挂载到真实的 DOM 中所有的指令和组件都已经解析并应用。现在你可以安全地操作 DOM 元素了。这也是一个常用的钩子来启动动画效果或与第三方库集成。
2.1.3 更新阶段 (Updating)
beforeUpdate当响应式数据发生变化时触发但在新旧 DOM 被替换之前。这里适合进行一些基于旧状态的操作。updatedDOM 已经根据最新的数据进行了更新。需要注意的是在这个钩子中再次修改状态可能会导致无限循环的更新。
2.1.4 销毁阶段 (Destroying)
beforeUnmount实例即将被销毁所有绑定的事件监听器和子组件都将被移除但此时实例仍然完全可用。可以在此处执行清理工作例如取消订阅外部服务或清除定时器。unmounted实例已经完全销毁所有相关的资源都被释放。之后不能再访问该实例。
2.2 生命周期图示
下图展示了 Vue 实例的生命周期
------------------- -------------------
| beforeCreate | ---- | created |
------------------- -------------------| |v v
------------------- -------------------
| beforeMount | ---- | mounted |
------------------- -------------------| |v v
------------------- -------------------
| beforeUpdate | ---- | updated |
------------------- -------------------| |v v
------------------- -------------------
| beforeUnmount | ---- | unmounted |
------------------- -------------------2.3 使用场景
数据初始化可以在 created 阶段进行数据的初始化例如发起网络请求获取初始数据。DOM 操作利用 mounted 阶段进行需要 DOM 元素的操作比如绑定事件监听器。清理工作在 beforeUnmount 阶段执行一些清理工作如清除定时器、取消订阅等。 三、Axios
Axios 是一个基于 Promise 的 HTTP 客户端适用于浏览器和 Node.js用于发起异步 HTTP 请求。它提供了简洁的 API 来处理请求和响应并支持诸如拦截请求和响应、自动转换 JSON 数据等功能。与传统的 AJAX通过 XMLHttpRequest 实现相比Axios 更加现代化且易于使用减少了样板代码并提高了可读性。
1. Axios快速入门
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/title
/head
bodyinput typebutton value获取数据GET idbtnGetinput typebutton value操作数据POST idbtnPostscript srcjs/axios.js/scriptscript//发送GET请求document.querySelector(#btnGet).addEventListener(click, () {//axios发起异步请求axios({url: https://mock.apifox.cn/m1/3083103-0-default/emps/list,method: GET}).then((result) { //成功回调函数console.log(result.data);}).catch((err) { //失败回调函数console.log(err);})})//发送POST请求document.querySelector(#btnPost).addEventListener(click, () {//axios发起异步请求axios({url: https://mock.apifox.cn/m1/3083103-0-default/emps/update,method: POST,data: id1 //POST请求方式 , 请求体}).then((result) { //成功回调函数console.log(result.data);}).catch((err) { //失败回调函数console.log(err);})})/script
/body
/html1.1 Axios GET请求
当用户点击“获取数据GET”按钮时将触发一个GET请求从指定URL https://mock.apifox.cn/m1/3083103-0-default/emps/list 获取数据。请求成功后结果会打印在控制台上。
1.2 Axios POST请求
当用户点击“操作数据POST”按钮时将触发一个POST请求到 https://mock.apifox.cn/m1/3083103-0-default/emps/update。在这个例子中POST请求携带的数据为 id1表示这是一个简单的键值对数据。同样地如果请求成功结果也会打印在控制台上。
1.3 回调函数
成功回调函数 (then): 处理成功的请求提供对响应数据的访问。失败回调函数 (catch): 处理请求中的错误帮助识别和处理不同类型的错误。
2. Axios请求方式别名
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleAjax-Axios/title
/head
bodyinput typebutton value获取数据GET idbtnGetinput typebutton value操作数据POST idbtnPostscript srcjs/axios.js/scriptscript//发送GET请求document.querySelector(#btnGet).addEventListener(click, () {axios.get(https://mock.apifox.cn/m1/3083103-0-default/emps/list).then((result) {console.log(result.data);});console.log();})//发送POST请求document.querySelector(#btnPost).addEventListener(click, () {axios.post(https://mock.apifox.cn/m1/3083103-0-default/emps/update, id1).then((result) {console.log(result.data);});})/script
/body
/htmlAxios 提供了多种请求方式的别名方法使开发者能够方便地发送不同类型的HTTP请求。通过使用这些别名方法可以简化代码并提高可读性。以下是常见的请求方式别名及其用途
axios.get(url[, config]): 发送GET请求。axios.post(url[, data[, config]]): 发送POST请求。axios.put(url[, data[, config]]): 发送PUT请求。axios.delete(url[, config]): 发送DELETE请求。axios.head(url[, config]): 发送HEAD请求。axios.options(url[, config]): 发送OPTIONS请求。axios.patch(url[, data[, config]]): 发送PATCH请求。
四、案例—员工列表
!DOCTYPE html
html langzh-CN
headmeta charsetUTF-8titleTlias智能学习辅助系统/titlestyle/* 导航栏样式 */.navbar {background-color: #b5b3b3; /* 灰色背景 */display: flex; /* flex弹性布局 */justify-content: space-between; /* 左右对齐 */padding: 10px; /* 内边距 */align-items: center; /* 垂直居中 */}.navbar h1 {margin: 0; /* 移除默认的上下外边距 */font-weight: bold; /* 加粗 */color: white;/* 设置字体为楷体 */font-family: 楷体;}.navbar a {color: white; /* 链接颜色为白色 */text-decoration: none; /* 移除下划线 */}/* 搜索表单样式 */.search-form {display: flex;flex-wrap: nowrap;align-items: center;gap: 10px; /* 控件之间的间距 */margin: 20px 0;}.search-form input[typetext], .search-form select {padding: 5px; /* 输入框内边距 */width: 260px; /* 宽度 */}.search-form button {padding: 5px 15px; /* 按钮内边距 */}/* 表格样式 */table {width: 100%;border-collapse: collapse;}th, td {border: 1px solid #ddd; /* 边框 */padding: 8px; /* 单元格内边距 */text-align: center; /* 左对齐 */}th {background-color: #f2f2f2;font-weight: bold;}.avatar {width: 30px;height: 30px;}/* 页脚样式 */.footer {background-color: #b5b3b3; /* 灰色背景 */color: white; /* 白色文字 */text-align: center; /* 居中文本 */padding: 10px 0; /* 上下内边距 */margin-top: 30px;}#container {width: 80%; /* 宽度为80% */margin: 0 auto; /* 水平居中 */}/style
/head
bodydiv idcontainer!-- 顶部导航栏 --div classnavbarh1Tlias智能学习辅助系统/h1a href#退出登录/a/div!-- 搜索表单区域 --form classsearch-formlabel forname姓名/labelinput typetext idname namename v-modelsearchForm.name placeholder请输入姓名label forgender性别/labelselect idgender namegender v-modelsearchForm.genderoption value/optionoption value1男/optionoption value2女/option/selectlabel forposition职位/labelselect idposition nameposition v-modelsearchForm.joboption value/optionoption value1班主任/optionoption value2讲师/optionoption value3学工主管/optionoption value4教研主管/optionoption value5咨询师/option/selectbutton typebutton v-on:clicksearch查询/buttonbutton typebutton clickclear清空/button/form!-- 表格展示区 --table!-- 表头 --theadtrth序号/thth姓名/thth性别/thth头像/thth职位/thth入职日期/thth最后操作时间/thth操作/th/tr/thead!-- 表格主体内容 --tbodytr v-for(e, index) in empList :keye.idtd{{index 1}}/tdtd{{e.name}}/tdtd{{e.gender 1?男 : 女}}/td!-- 插值表达式是不能出现在标签内部 --tdimg classavatar v-bind:srce.image :alte.name/td!-- v-if: 控制元素的显示与隐藏 --tdspan v-ife.job 1班主任/spanspan v-else-ife.job 2讲师/spanspan v-else-ife.job 3学工主管/spanspan v-else-ife.job 4教研主管/spanspan v-else-ife.job 5咨询师/spanspan v-else其他/span/td!-- v-show: 控制元素的显示与隐藏 --!-- tdspan v-showe.job 1班主任/spanspan v-showe.job 2讲师/spanspan v-showe.job 3学工主管/spanspan v-showe.job 4教研主管/spanspan v-showe.job 5咨询师/span/td --td{{e.entrydate}}/tdtd{{e.updatetime}}/tdtd classaction-buttonsbutton typebutton编辑/buttonbutton typebutton删除/button/td/tr/tbody/table!-- 页脚版权区域 --footer classfooterp江苏传智播客教育科技股份有限公司/pp版权所有 Copyright 2006-2024 All Rights Reserved/p/footer/divscript srcjs/axios.js/scriptscript typemoduleimport { createApp } from https://unpkg.com/vue3/dist/vue.esm-browser.jscreateApp({data() {return {searchForm: { //封装用户输入的查询条件name: ,gender: ,job: },empList: []}},//方法methods: {async search(){// 发送ajax请求获取数据// axios.get(https://web-server.itheima.net/emps/list?name${this.searchForm.name}gender${this.searchForm.gender}job${this.searchForm.job}).then((result) {// this.empList result.data.data;// })// console.log();let result await axios.get(https://web-server.itheima.net/emps/list?name${this.searchForm.name}gender${this.searchForm.gender}job${this.searchForm.job});this.empList result.data.data;},clear(){//清空表单项数据this.searchForm {name:, gender:, job:}this.search()}},//钩子函数mounted(){//页面加载完成之后发送ajax请求获取数据this.search()}}).mount(#container)/script/body
/htmlhttps://web-server.itheima.net/emps/list
{code: 1,msg: success,data: [{id: 1,name: 谢逊,image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg,gender: 1,job: 1,entrydate: 2023-06-09,updatetime: 2023-07-01 00:00:00},{id: 2,name: 韦一笑,image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg,gender: 1,job: 1,entrydate: 2023-06-09,updatetime: 2023-07-01 00:00:00},{id: 3,name: 黛绮丝,image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg,gender: 2,job: 2,entrydate: 2023-06-09,updatetime: 2023-07-01 00:00:00},{id: 4,name: 殷天正,image: https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/3.jpg,gender: 1,job: 3,entrydate: 2023-06-09,updatetime: 2023-07-01 00:00:00}]
}根据你提供的代码以下是关于Vue的关键知识点总结包括searchForm、v-model、v-on、v-if、v-for、async和await的详细解释
1. Vue 关键知识点总结
1.1 searchForm 对象
用途: 封装用户在搜索表单中输入的查询条件。定义:data() {return {searchForm: { // 封装用户输入的查询条件name: ,gender: ,job: },empList: []}
}作用: 在Vue实例的数据对象中定义searchForm用于存储用户的输入值并通过v-model指令将其与表单元素绑定。
1.2 v-model 指令
用途: 实现双向数据绑定将表单元素的值与Vue实例中的数据属性同步。示例:input typetext idname namename v-modelsearchForm.name placeholder请输入姓名
select idgender namegender v-modelsearchForm.genderoption value/optionoption value1男/optionoption value2女/option
/select
select idposition nameposition v-modelsearchForm.joboption value/optionoption value1班主任/optionoption value2讲师/option!-- 其他选项 --
/select作用: 当用户在表单元素中输入或选择内容时v-model会自动更新对应的Vue实例数据属性反之亦然。
1.3 v-on 指令
用途: 绑定事件监听器处理用户的交互行为。示例:button typebutton v-on:clicksearch查询/button
button typebutton clickclear清空/button作用: v-on:clicksearch当点击按钮时调用search方法。clickclear简写形式功能同上。是v-on:的缩写。
1.4 v-if 和 v-else-if 指令
用途: 条件渲染根据表达式的值决定是否渲染元素。示例:tdspan v-ife.job 1班主任/spanspan v-else-ife.job 2讲师/spanspan v-else-ife.job 3学工主管/spanspan v-else-ife.job 4教研主管/spanspan v-else-ife.job 5咨询师/spanspan v-else其他/span
/td作用: 根据e.job的值显示相应的职位名称。如果e.job为1则显示“班主任”依此类推。
好的让我们通过你提供的注释代码片段来详细解释 v-show 指令并说明它与 v-if 的区别。
1.5 v-show 指令
用途: 根据表达式的值动态地显示或隐藏元素。示例:tdspan v-showe.job 1班主任/spanspan v-showe.job 2讲师/spanspan v-showe.job 3学工主管/spanspan v-showe.job 4教研主管/spanspan v-showe.job 5咨询师/span /td作用: 通过 CSS 的 display 属性控制元素的显示和隐藏适用于需要频繁切换显示状态的场景。
1.6 v-show 与 v-if 的区别 v-show: 只是通过 CSS 的 display 属性来控制元素的显示和隐藏。元素始终存在于 DOM 中只是在需要时通过 display: none; 来隐藏。适用于需要频繁切换显示状态的场景因为其性能开销较小。 v-if: 根据条件决定是否渲染元素到 DOM 中。如果条件为假元素将不会被渲染到 DOM 中如果条件为真则会渲染。适用于不经常切换显示状态的场景因为它涉及到 DOM 的增删操作性能开销较大。
1.7 v-for 指令
用途: 列表渲染用于循环生成DOM元素。示例:tr v-for(e, index) in empList :keye.idtd{{index 1}}/tdtd{{e.name}}/tdtd{{e.gender 1 ? 男 : 女}}/tdtdimg classavatar v-bind:srce.image :alte.name/td!-- 职位显示部分 --td{{e.entrydate}}/tdtd{{e.updatetime}}/tdtd classaction-buttonsbutton typebutton编辑/buttonbutton typebutton删除/button/td
/tr作用: 遍历empList数组为每个员工生成一行表格数据。:keye.id确保每个元素都有一个唯一的标识符便于Vue进行高效的DOM更新。
1.8 async 和 await
用途: 处理异步操作使代码看起来更简洁和易于理解。示例:methods: {async search(){let result await axios.get(https://web-server.itheima.net/emps/list?name${this.searchForm.name}gender${this.searchForm.gender}job${this.searchForm.job});this.empList result.data.data;},clear(){this.searchForm {name:, gender:, job:};this.search();}
},
mounted(){this.search();
}作用: async search()定义一个异步函数允许使用await关键字等待异步操作完成。let result await axios.get(...)等待axios.get请求完成并将结果赋值给result变量。mounted()钩子函数在组件挂载完成后自动调用search方法加载初始数据。
当然可以简洁一些来解释这个URL。
1.9 URL 解释
https://web-server.itheika.net/emps/list?name${this.searchForm.name}gender${this.searchForm.gender}job${this.searchForm.job}1.9.1 基础URL
https://web-server.itheima.net/emps/list: 这是API的端点用于获取员工列表数据。
1.9.2 查询参数 ?: 表示开始传递查询参数。 name${this.searchForm.name}: name 是查询参数名。${this.searchForm.name} 是用户在搜索表单中输入的姓名。例如如果用户输入“张三”则这部分变为 name张三。 : 分隔不同的查询参数。 gender${this.searchForm.gender}: gender 是查询参数名。${this.searchForm.gender} 是用户选择的性别。例如如果用户选择“男”假设值为1则这部分变为 gender1。 job${this.searchForm.job}: job 是查询参数名。${this.searchForm.job} 是用户选择的职位。例如如果用户选择“班主任”假设值为1则这部分变为 job1。
