Web day02 Js & Vue & Ajax

1.javascript:

1.js的引入方式：

[2.js变量 & 数据类型 & 输出语句：](#2.js变量 & 数据类型 & 输出语句：)

模板字符串：

[3.函数 & 自定义对象：](#3.函数 & 自定义对象：)

[4. json 字符串 & DOM操作：](#4. json 字符串 & DOM操作：)

[5. js事件监听：](#5. js事件监听：)

6.js的模块化导入或者导出：

2.Vue:

1.vue的准备工作：

[2.Vue 指令：](#2.Vue 指令：)

1.v-for:

2.v-bind:

[3.v-if & v-show：](#3.v-if & v-show：)

1.javascript:

概念：是一门浏览器脚本语言弱类类型的语言无需编译浏览器直接解析执行

1.js的引入方式：

方式1：

方式2：

2.js变量 & 数据类型 & 输出语句：

变量：

常量：

数据类型：

模板字符串：

使用反引号： ` ` 引起来的字符串也称为模板字符串

使用场景：拼接字符串和变量。

内容拼接时，使用 ${ } 来引用变量

3.函数 & 自定义对象：

函数方式1：

方式2匿名函数：

箭头方式创造：

自定义对象：

函数可以以以下方式进行简化

4. json 字符串 & DOM操作：

json对象: key必须使用双引号标记 value除了数字其他的也必须使用双引号标记

注意：使用 stringify 转换字符串时如果 person中有函数不会转换 jason 只会转换属性名和属性值

JS DOM：

DOM 封装的对象有：

DOM操作：

DOM的核心思想：将网页的内容当做对象来处理，标签的所有属性在该对象上都可以找到，并且修改这个对象的属性，就会自动映射到标签身上。
document对象
- 网页中所有内容都封装在document对象中
- 它提供的属性和方法都是用来访问和操作网页内容的，如：document.write(...)

DOM操作步骤:
- 获取DOM元素对象
- 操作DOM对象的属性或方法 (查阅文档)
我们可以通过如下两种方式来获取DOM元素。
- 根据CSS选择器来获取DOM元素，获取到匹配到的第一个元素：document.querySelector('CSS选择器');
- 根据CSS选择器来获取DOM元素，获取匹配到的所有元素：document.querySelectorAll('CSS选择器');

注意：获取到的所有元素，会封装到一个NodeList节点集合中，是一个伪数组（有长度、有索引的数组，但没有push、pop等数组方法）

选择器有：

1.元素（标签选择器）

2.类选择器：' .类名 '

3.id选择器：'#id名'

javascript 复制代码

 <script>
    /* 借助于DOM操作html元素 */
    //需求一: 把第一个h1标签的内容修改为 我爱柳岩
    let h1Ele = document.querySelector('#title1')
    h1Ele.innerHTML = 'new title'

    //需求二: 把第一个h1标签的颜色修改为红色
    let h1Ele2 = document.querySelector('h1')
    h1Ele2.style.color = 'red'

    //需求三: 把所有的h1标签的背景色修改为绿色
    let h1Eles = document.querySelectorAll('h1')
    for(let i=0; i<h1Eles.length; i++){
      h1Eles[i].style.backgroundColor = 'green'
    }
  </script>

5. js事件监听：

核心逻辑：当在某个地方发生了某件事的时候,会自动的执行一段带代码

实现鼠标移入自动变色的效果

常见的事件有：

6.js的模块化导入或者导出：

2.Vue:

1.vue的准备工作：

准备一个html文件，并在其中引入Vue模块（参考官方文档，复制过来即可）【注意：模块化的js，引入时，需要设置 type="module"】
创建Vue程序的应用实例，控制视图的元素
准备元素（div），交给Vue控制

本质为运用模块化导入createApp函数传参为自定义类型 data为自定义类型中的函数

methods为键值为 {}自定义类型

操纵dom对象：

2.Vue 指令：

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

1.v-for:

empLIst为有很多自定义对象的数组

2.v-bind:

data为 createApp 中的函数

3.v-if & v-show：

注意：

v-if: 条件不满足,标签不存在

v-show: 条件不满足, 通过display:none控制不显示

4.v-model:

完成数据到表单项的双向绑定

input的数据会同步到 Vue data中的 serchEmp 自定义对象中

5.v-on:

3.Vue生命周期：

vue实例从生到死的过程, 共经历8个阶段,每个阶段都会调用特定的函数

mounted钩子函数

注意：mounted：挂载完成，Vue初始化成功，HTML页面渲染成功。以后我们一般用于页面初始化自动的ajax请求后台数据 mounted函数和methots平级

3.Ajax：

概念： asynchronous javascript and xml, 异步的js和xml

同步：发起请求后, 浏览器需要等待请求完毕,才能做其它操作

异步：发起请求后, 浏览器无需等待请求完毕,可以做其它操作

异步的本质为开启子线程不影响主线程的执行

axios：

分为两步：

可以简写为：

async await为js中的关键字

修改前：

javascript 复制代码

search() {
    //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
    axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then(res => {
      this.empList = res.data.data
    })
  },

修改后：

javascript 复制代码

  async search() {
    //基于axios发送异步请求，请求https://web-server.itheima.net/emps/list，根据条件查询员工列表
    const 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;
  },