目录

1.javascript:

1.js的引入方式：

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

模板字符串：

3.函数 & 自定义对象：

4. json 字符串 & DOM操作：

5. js事件监听：

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

2.Vue:

1.vue的准备工作：

2.Vue 指令：

1.v-for:

 2.v-bind:

3.v-if & v-show：

4.v-model:

5.v-on:

3.Vue生命周期：

3.Ajax：

axios：

---

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名'

 <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：

 分为两步：

1.

 可以简写为：

 

async await为js中的关键字

 修改前：

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})},

修改后：

  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;},