Web day02 Js & Vue & Ajax
目录
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;
},原文地址：https://blog.csdn.net/moskidi/article/details/144020390
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！