JS - Vue - Axios

1 JS的数据类型

number - sring - boolean - null - undefined

判断数据类型用 typeof 数据

2 JS的运算符 - 类型转换

2.1 运算符分类

算术运算符 + , - , * , / , % , ++ , --

赋值运算符 = , += , -= , *= , /= , %=

比较运算符 > , < , >= , <= , != , == , ===

逻辑运算符 && , || , !

三元运算符条件表达式 ? true_value: false_value

2.2 ==和===的区别

== 只比较内容，不比较类型会进行类型转换

=== 类型和内容都比较不会进行类型转换

在开发中用===的情况比较多

2.3 类型转换的方法

2.3.1 把字符串转化为整数

parseInt(字符串)

2.3.2 把字符串转化为小数

parseFloat(字符串)

2.3.3 注意事项

如果一个字符串中前面是数字，后面是字母，就转化时只会从数字开头，到非数字结束

0 , NaN, "", null , undefined在判断时会赋值为false

3 JS的函数

3.1 定义格式

function 方法名(参数 ， 参数){
//方法一
}
let 方法名 = function(参数...){
//方法二
}

3.2 调用格式

方法名(值1, 值2...)

4 对象

4.1 数组

4.1.1 定义格式

/\ let arr = new Array(值1 ，值2...);

/\ let arr = [值, 值...]

4.1.2 数据访问格式

变量名[索引]

4.1.3 遍历格式

数组名.forEach( (元素, 索引)=>{} );

4.1.4 特点

长度可变

4.2 字符串

4.2.1 定义格式

/\ let str = new String(数据);

/\ let str = "xxxxx"；

4.3 自定义对象

4.3.1 定义格式

let 变量名 = {
       键 ：值,
          ....,
         方法名 : function(){

      }, 
      方法名(){

     }
}

4.3.2 访问格式

- 访问变量: 变量名.键

- 访问方法: 变量名.方法名();

4.4 JSON (接口测试数据)

4.4.1 作用

用于数据传输

4.4.2 格式

'{ "key1" : value , "key2" :valu2...}'

注意: 这里单双引号不能互换!

4.4.3 和对象的相互转换

JSON.parse(json 字符串)

JSON.stringify(js对象)

4.5 BOM

4.5.1 window

- 弹框: alert()

- 确认框: confirm()

- 周期执行任务: setInterval( 函数，时间 )

- 定期执行一次任务: setTimeout( 函数，时间 )

4.5.2 location

location.href = 地址

4.6 DOM (Vue底层)

4.6.1 作用

获取页面上的标签

4.6.2 常用方法

根据id获取标签 => documente.getElementById()
根据name属性值获取标签 =>　documente.getElementsByName()
根据标签名获取标签　=> documente.getElementsByTagName()
根据class属性值获取标签 => documente.getElementsByClassName()

4.6.3 事件绑定

给标签添加事件

点击事件: onclick
获取焦点: onfocus
失去焦点: onblur
鼠标移入: onmouseover
鼠标移除: onmouseout
键盘按下: onkeydown
页面加载完之后: onload
表单提交: onsubmit

5 Vue

5.1 概念

前端框架，核心思想是 MVVM (Model-View-ViewModel)

5.2 标签

5.2.1 数据的双向绑定

v-model

5.2.2 给标签的属性绑定值

v-bind：属性名

:属性名

5.2.3 给标签绑定事件

v-on: 事件名

@事件名

5.2.4 实现判断

以下两个语句都可以实现判断, v-if系列会更好一点, 区别看控制台原始码

v-if v-elseif v-else : 满足条件才渲染

v-show: 都渲染

5.2.5 实现遍历

v-for: 格式: v-for=" (元素名，索引) in 数组名"

5.3 钩子函数

状态	阶段周期
beforeCreate	创建前
created	创建后
beforeMount	载入前
mounted	挂载完成
beforeUpdate	更新前
updated	更新后
beforeDestroy	销毁前
destroyed	销毁后

mounted: 实际运用的时机比较多

6 Axios

6.1 介绍

Axios 对原生的Ajax进行了封装，简化书写，快速开发

6.2 发送Get请求,并获取结果

axios.get("接收端的接口地址").then((result) => {
    console.log(result.data);
//result是接受的数据, 有时候多层数据封装在 result.data.data内
});

6.3 发送Post请求

axios.post("接收端的接口地址").then((result) => {
    console.log(result.data);
//result是接受的数据, 有时候多层数据封装在 result.data.data内
});