JavaWeb笔记2-JavaScript&Vue&Ajax

1. JavaScript

1.1 基础介绍

JavaScript(简称：JS)是一门跨平台、面向对象的脚本语言，是用来控制网页行为，实现页面的交互效果。JavaScript和Java是完全不同的语言，但基本语法类似
组成
- ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。
- BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。
- DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。

1.2 引入方式

JS有两种引入方式,分为内部脚本和外部脚本
- 内部脚本： 将JS代码定义在HTML页面中
  - JavaScript代码必须位于<script></script>标签之间
  - 在HTML文档中，可以在任意地方，放置任意数量的<script></script>
  - 一般会把脚本置于<body>元素的底部，可改善显示速度
    - HTML页面是从上往下解析的，如果JS代码过多，影响页面显示速度
    - JS代码中，可以操作HTML标签，如果标签还没渲染出来[在JS代码下面，没加载出来],就可能会报错
- 外部脚本： 将JS代码定义在外部 JS文件中，然后引入到 HTML页面中
  - 外部JS文件中，只包含JS代码，不包含<script>标签
  - 引入外部js的<script>标签，必须是双标签

内部脚本引入

<script>

js代码;

</script>

html 复制代码

<body>
    <script>
        //1.内部脚本
        alert('Hello,World');
    </script>
</body>

外部脚本引入

<script src="外部文件路径"></script>

html 复制代码

HTML代码
<body>
    <script src="hello.js"></script>
</body>

javascript 复制代码

js代码
alert('外部引入');

细节:
- demo.js中只有js代码，没有<script>标签
JS书写规范
- 结束符：每行js代码，结尾以分号结尾，而结尾的分号可有可无。（建议在一个项目中保持一致，要么全部都加，要么全部都不加）
- 注释：单行注释，多行注解的写法，与java中一致。

1.3 JS基础语法

1.31 变量&常量

JS中主要通过 let 关键字来声明变量的。( 弱类型语言，变量是可以存放不同类型的值的。)
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线（_）或美元符号（$），且数字不能开头[与java相同]
- 变量名严格区分大小写，name和Name是不同的变量
- 不能使用关键字作为变量名，如：let、var、if、for等
JS中用 const 关键字声明常量
- 在早期js中，声明变量还能用var，但不严谨(不推荐)
  - var声明的变量可以重复声明
  - var声明的作用域为全局作用域
一旦声明，常量的值就不能改变(不能重新赋值)

html 复制代码

<body>
    <script>
        let a=10;
        a="hello";
        b=true;
        
        alert(a);
        alert(n);
    </script>
</body>

拓展[输出方式]:
- alert() 弹出警告框
- console.log() 输出到控制台
- document.write() 输出到body区域，在页面中显示(不常用)

1.32 数据类型

JavaScript的数据类型分为:基本数据类型和引用数据类型(对象)
基本数据类型

|-----------|-----------------------------------------------|
| number | 数字(整数、小数、NaN(not a Number)) |
| boolean | 布尔。true，false |
| null | 对象为空，JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的 |
| undefined | 声明的变量未初始化时，该变量的默认值是undefined |
| string | 字符串、单引号、双引号、反引号皆可，推荐单引号 |

数据类型可以用 typeof 去检测

示例

html 复制代码

<body>
    <script>
    console.log(typeof 1)
    console.log(typeof 1.3)
    console.log(typeof true)
    console.log(typeof null)
    console.log(typeof 'asd')
    console.log(typeof "asd")
    console.log(typeof `asd`)
    </script>

</body>

演示

模板字符串语法[字符串反引号的应用场景]

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

html 复制代码

    <script>
        let name ='张三';
        let age = 18;
        let info = `大家好，我是新入职的${name}，今年${age}岁`;
        let info1 = `大家好，我是新入职的`+name+`，今年`+age+`岁`;
        console.log(info);
        console.log(info1);
    </script>

1.33 函数

介绍
- 函数(function)是被设计用来执行特定任务的代码块，方便程序的封装复用。
定义
- JavaScript中的函数通过function关键字进行定义，语法为:

javascript 复制代码

function functionName(参数1，参数2....){
        执行代码
}

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

调用 :函数名称(实际参数列表)

注:JS为弱类型语言，形参、返回值都不需要指定类型，在调用函数时，实参个数和形参个数可以不一致，但建议一致

html 复制代码

<body>
    <script>
        function add(a,b){
            return a+b;
        }

        alert(add(20,10));
    </script>
</body>

1.34 匿名函数

匿名函数是一种没有名称的函数，可以通过两种方式定义：函数表达式和箭头函数。

javascript 复制代码

函数表达式
let add=function(a,b){
    retutn a+b;
}

箭头函数
let add =add(a,b) =>{
    return a+b;
}

匿名函数定义后，可以通过变量名直接调用

let result = add(10,20);

alert(result);

html 复制代码

    <script>
        let add=function(a,b){
            return a+b;
        }

        let del=(a,b)=>{
            return a-b;
        }

        console.log(add(1,2));
        console.log(del(1,2));
    </script>

1.35 自定义对象

定义格式

let 对象名 ={

属性名1:属性值1，

属性名2:属性值2，

属性名3:属性值3，

方法名:function(形参列表){ }

}

html 复制代码

    <script>
        let user={
            name:'zhangsan',
            age:18,
            gender:'男',
            toString(){
                return `姓名：${this.name}，年龄：${this.age}，性别：${this.gender}`
            }
        }
        console.log(user.toString())
    </script>

细节 :如果使用箭头函数，this不指向当前对象，指向当前对象的父级【不推荐】

1.36 json

概念:
- JavaScript Object Notation，JavaScript对象标记法(JS对象标记法书写的文本)
- 由于语法简单，层次结构鲜明，多用于作为数据载体，在网络中进行数据传输。
方法
- JSON.parse() :将json文本转换成JS对象
- JSON.stringify():将JS对象转换成json文本

html 复制代码

    <script>
        let user={
            name:'zhangsan',
            age:18,
            gender:'男',
            toString:function(){
                return `姓名：${this.name}，年龄：${this.age}，性别：${this.gender}`
            }
        }
        console.log(JSON.stringify(user));
        let personJson='{"name":"zhangsan","age":18,"gender":"男"}'
        console.log(JSON.parse(personJson));
    </script>

细节:json格式的文本所有的key必须使用双引号引起来

1.4 DOM

1.41 概念

DOM：Document Object Model 文档对象模型。也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象。
- Document：整个文档对象
- Element：元素对象 [如<html>，<head>,<body>等]
- Attribute：属性对象 [如<href>等]
- Text：文本对象 [如<h1>文本</h1>中的文本]
- Comment：注释对象 [就是注释]

1.42 操作

DOM操作核心思想 :
- 将网页中所有的元素当作对象来处理(标签的所有属性在该对象上都可以找到)
操作步骤:
- 获取要操作的DOM元素对象
- 操作DOM对象的属性或方法(查文档或AI)
获取DOM对象
- 根据CSS选择器来获取DOM元素，获得匹配到的第一个元素:document.querySelector('选择器')
- 根据CSS选择器来获取DOM元素，获得匹配到的所有元素:document.querySelectorAll('选择器')
  - 注:得到的是一个NodeList节点集合，是一个伪数组(有长度、有索引的数组)
- 其他方式(了解,已经用的很少了)
  - document.getElementById('id')
  - document.getElementsByTagName('div')
  - document.getElementsByClassName('cls')

html 复制代码

<body>
    <h1 id="title">111</h1>
    <h1 id="title1">222</h1>
    <h1 id="title1">333</h1>

    <script>
        //1.获取DOM对象
        let h1=document.querySelector('#title');
        let h2=document.querySelectorAll('#title1');
        //2.调用DOM对象中的属性或方法
        h1.innerHTML='修改文本';
        h2[1].innerHTML='修改文本2';
    </script>
</body>

1.5 事件监听

1.51 概念

事件:HTML事件是发生在HTML元素上的"事情"。比如:
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听:JavaScript可以在事件触发时，立即调用一个函数做出相应，也成为事件绑定 或注册事件。

1.52 事件监听

语法：事件源.addEventListener('事件类型'，事件触发执行的函数);
事件监听三要素
- 事件源:哪个dom元素触发了条件，要获取dom元素
- 事件类型:用什么方式触发，比如：鼠标单击 click
- 事件触发执行的函数：要做什么事

html 复制代码

<body>
    <input type="button" id="btn1" value="按钮1">
    <input type="button" id="btn2" value="按钮2">

    <script>
        var btn1 =document.querySelector("#btn1").addEventListener("click",function(){
            console.log("第一个按钮点击成功")
        });
    </script>
</body>

早期版本写法(了解):

事件源.on事件 = function() {...}
缺点:on方式会被覆盖，addEventListener方式可以绑定多次，拥有更多特性，推荐使用

1.53 常见事件

鼠标事件
- click：鼠标点击
- mouseenter：鼠标移入
- mouseleave：鼠标移出
键盘事件
- keydown：键盘按下触发
- keyup：键盘抬起触发
焦点事件
- focus：获得焦点触发
- blur：失去焦点触发
表单事件
- input：用户输入时触发
- submit：表单提交时触发

2. Vue

2.1 概述

Vue，是一款用于构建用户界面 的渐进式 的JavaScript框架（官方网站：https://cn.vuejs.org）。
构建用户界面
- 构建用户界面是指，在Vue中，可以基于数据渲染出用户看到的界面。
渐进式
- 渐进式中的渐进呢，字面意思就是 "循序渐进"。Vue生态中的语法呢是非常多的，比如声明式渲染、组件系统、客户端路由（VueRouter）、状态管理（Vuex、Pinia）、构建工具（Webpack、Vite）等等。
框架
- 就是一套完整的项目解决方案，用于快速构建项目。
- 优点：大大提升前端项目的开发效率。
- 缺点：需要理解记忆框架的使用规则。

2.2 准备工作

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

html 复制代码

<body>
    <div id="app">

    </div>
    <script type="module">
        //引用官方模块
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.global.js'
        //控制视图元素
        createApp({

        }).mount('#app');    //调用mount方法，接管app区域[其实就是CSS选择器]
    </script>
    
</body>

数据驱动视图
- 准备数据
- 通过插值表达式渲染页面

html 复制代码

<body>
    <div id="app">
     <!--    通过插值表达式渲染页面 -->
        <h1>{{msg}}</h1>
    </div>
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
        createApp({
        //定义方法[准备数据]
        data(){
            return{
                msg:'hello vue'
            }
        }
        }).mount('#app');    
    </script>
    
</body>

细节:

Vue中定义数据，必须通过data方法来定义，data方法返回值是一个对象，在这个对象中定义数据。
插值表达式中编写的变量，一定是Vue中定义的数据，如果插值表达式中编写了一个变量，但是在Vue中未定义，将会报错。
Vue应用实例接管的区域是 '#app'，超出这个范围，就不受Vue控制了，所以vue的插值表达式，一定写在
...
的里面。

2.3 常用指令

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

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

2.31 v-for

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

html 复制代码

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

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

2.32 v-bind

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

javascript 复制代码

v-bind:属性="变量"

//简化版
  :属性="变量"

<td><img class="avatar" v-bind:src="e.image" alt="令狐冲"></td>

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

2.33 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之后

javascript 复制代码

<td>
    <span v-if="e.job==1">班主任</span>
    <span v-else-if="e.job==2">讲师</span>
    <span v-else-if="e.job==3">学工主管</span>
    <span v-else-if="e.job==4">教研主管</span>
    <span v-else-if="e.job==5">咨询师</span>
    <span v-else>其他</span>
</td>

v-show：
- 语法：v-show="表达式"，表达式值为 true，显示；false，隐藏
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景

html 复制代码

<td>
    <span v-show="e.job == 1">班主任</span>
    <span v-show="e.job == 2">讲师</span>
    <span v-show="e.job == 3">学工主管</span>
    <span v-show="e.job == 4">教研主管</span>
    <span v-show="e.job == 5">咨询师</span>
</td>

v-if 与 v-show的区别

v-if: 条件不成立，直接不渲染这个元素(不频繁切换的场景)
v-show:通过css样式，来控制元素的展示与隐藏(频繁切换的场景)

2.34 v-model

作用：在表单元素上使用，双向数据绑定 。可以方便的获取或设置表单项数据
语法：v-model="变量名"
这里的双向数据绑定，是指 Vue中的数据变化，会影响视图中的数据展示。

javascript 复制代码

createApp({
  data() {
    return {

    此处数据
      searchForm:{
          name: '',
          gender: ''
          job: '',
      },

      empList: [...]
}}}.mount(...)

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

2.35 v-on

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

javascript 复制代码

语法
v-on:时间名="方法名"
简写为   @时间名="..."

<button type="button" v-on:click="search">查询</button>
<button type="button" @click="clear">清空</button>

方法需定义，与data平级

3. Ajax

介绍: Asynchronous JavaScript And XML，异步的JavaScript和XML
作用:
- 数据交换:通过Ajax可以给服务器发送请求，并获取服务器响应的数据。
- 异步交互:可以在不重新加载整个页面的 情况下，与服务器交换数据并更新部分网页的技术,如：搜索联想、用户名是否可用的校验等。

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

3.1 同步与异步

同步请求

浏览器页面在发送请求给服务器，在服务器处理请求的过程中，浏览器页面不能做其他的操作。只能等到服务器响应结束后才能，浏览器页面才能继续做其他的操作

异步请求

浏览器页面发送请求给服务器，在服务器处理请求的过程中，浏览器页面还可以做其他的操作。

3.2 Axios

介绍: Axious 是对原生的Ajax进行了封装，简化书写，快速开发。
官网:Axious
步骤:
- 引入Axious的js文件(参考官网)
- 使用Axious发送请求，并获取响应结果

html 复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

javascript 复制代码

 axios({
        url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
        method:'get'
      }).then(function(res) {
        console.log(res.data);
      }).catch(function(err) {
        console.log(err);
      })

method:请求方式 GET/POST

url:请求路径

data:请求数据(POST)

params:发送请求时携带的url参数，如:...?key=val