一、JS
1. JS引入方式
内部脚本：定义在<body>的底部
外部脚本：定义在JS文件中，通过<script src=""></script>标签引入
2. JS基础语法
2.1 变量/常量
特点：JS是弱类型语言，变量可以存放不同类型的值
声明：
let：声明变量
const：声明常量，一旦声明，常量的值不能改变
注意：
在早期的js中，声明变量还可以使用var，但是并不严谨（不推荐）
2.2 输出语句
window.alert()：弹出警告框(使用频次较高)
console.log()：写入浏览器控制台(使用频次较高)
document.write()：向HTML的body内输出内容
2.3 基本数据类型
number、boolean、null、undefined、string
2.4 反引号
应用场景：字符串拼接
2.5 JS函数
定义
<script>
//具名函数
function add(a, b) {
return a + b;
}
let result = add(10, 20.2);
console.log(result);
//匿名函数
//函数表达式
let add = function (a, b) {
return a + b;
}
let result = add(100, 200);
console.log(result);
//箭头函数
let add = (a, b) => {
return a + b;
}
let result = add(10, 300)
console.log(result);
</script>注意：JS是弱类型语言，定义函数时，无需指定形参、返回值类型。
2.6 自定义对象
<script>
//自定义对象
let user = {
name: 'Tom',
age: 18,
gender: '男',
//定义对象中的方法时，不要用箭头函数
sing: function () {
alert(this.name + '唱歌');
}
//简写
sing() {
alert(this.name + '唱歌');
}
}
//调用对象属性/方法
alert(user.name);
user.sing();
</script>2.7 JSON
2.7.1 格式特点
key必须使用双引号引起来
2.7.2 JSON对象的两个方法
<script>
//JSON.stringify()：将js对象转为json字符串
let student = {
name: '张三',
age: 18,
gender: 23
}
alert(JSON.stringify(student));
//JSON.parse()：将json字符串转为js对象
let personJSON = '{"name": "heima", "age": 18}';
alert(JSON.parse(personJSON).name);
</script>3. DOM
3.1 DOM介绍
3.1.1 什么是DOM
• 文档对象模型，用于操作网页内容
3.1.2 如何获取DOM对象
document.querySelector('选择器')
document.querySelectorAll(‘选择器’)
3.1.3 代码演示
<body>
<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>
<script>
//1.修改第一个<h1>的文本内容
//1.1 获取DOM对象
//获取匹配到的第一个元素
let h = document.querySelector('#title1');
let h1 = document.querySelector('h1');//获取第一个标签
//获取匹配到的所有元素
let hs = document.querySelectorAll('h1');
//1.2 调用DOM对象中的属性和方法
hs[0].innerHTML = '修改后的文本内容';
</script>
</body>3.2 事件监听
3.2.1 语法
事件源.addEventListener('事件类型'，要执行的函数)
<script>
//事件监听
document.querySelector('#btn1').addEventListener('click', () => {
console.log(1);
})
//事件监听（早期写法）
document.querySelector('#btn2').onclick = () =>{
console.log(2);
}
</script>JS案例-员工列表
<script>
//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
let tr = document.querySelectorAll('tr'); //获取所有的行
for (let i = 0; i < tr.length; i++) {
tr[i].addEventListener('mouseenter', () => {
tr[i].style.backgroundColor = '#f2e2e2';
})
tr[i].addEventListener('mouseleave', () => {
tr[i].style.backgroundColor = '#fff';
})
}
</script>3.2.2 常见事件
3.2.3 JS模块化
二、Vue
渐进式JavaScript 框架，用于提高前端开发效率。
1. Vue的使用步骤
2. Vue常用指令
HTML页面中带有 v- 前缀的特殊属性
2.1 v-for指令
作用：列表渲染，遍历容器的元素
语法：<h1 v-for="(item,index) in items" :key="item.id">
• 注意：想让哪个标签遍历展示多次，指令就加在哪个标签上
2.2 v-bind指令
• 场景：动态为标签属性绑定值（插值表达式，不能在标签内使用）
• 语法：v-bind：属性="变量"/：属性="变量"
2.3 v-if与v-show指令
1.v-if 与v-show 的作用?
• 根据条件判断，是否展示某元素
2.v-if 与v-show 的区别?
v-if：条件不成立，直接不渲染这个元素（不频繁切换的场景）
v-show：通过css样式，来控制元素的展示与隐藏（频繁切换的场景）
2.4 v-model指令
• 作用：表单元素上进行双向数据绑定，用于获取或设置表单项数据
• 注意：v-model="变量"，变量必须在data中声明
2.5 v-on指令
作用：事件绑定
语法：v-on：click="..."/@click="..."
三、Ajax
3.1 Ajax作用
1. 与服务器进行数据交换
2. 异步交互
3.2 异步同步
3.3 Axios
3.3.1 入门程序
<body>
<button id="getData">GET</button>
<button id="postData">POST</button>
// 引入Axios文件
<script src="https://unpkg.***/axios/dist/axios.min.js"></script>
<script>
//GET请求
document.querySelector('#getData').onclick = function() {
axios({
url:'https://mock.apifox.***/m1/3083103-0-default/emps/list',
method:'get'
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})
}
//POST请求
document.querySelector('#postData').onclick = function() {
axios({
url:'https://mock.apifox.***/m1/3083103-0-default/emps/update',
method:'post'
}).then(function(res) {
console.log(res.data);
}).catch(function(err) {
console.log(err);
})
}
</script>
</body>3.3.2 get 和 post 请求
1. get 请求：获取数据
axios.get("https://mock.apifox.***/m1/3083103-0-default/emps/list").then(result => {
console.log(result.data);
})2. post 请求：提交数据
axios.post("https://mock.apifox.***/m1/3083103-0-default/emps/update","id=1").then(result => {
console.log(result.data);
})3.4 异步获取数据
可以通过async、await可以让异步变为同步操作。async就是来声明一个异步方法，await是用来等待异步任务执行
async search() {
//基于axios发送异步请求，请求https://web-server.itheima.***/emps/list，根据条件查询员工列表
const result = await axios.get(`https://web-server.itheima.***/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
this.empList = result.data.data;
},3.5 案例完善
需求：页面加载完毕，就查询出员工列表
methods: {
async search() {
//基于axios发送异步请求，请求https://web-server.itheima.***/emps/list，根据条件查询员工列表
const result = await axios.get(`https://web-server.itheima.***/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`);
this.empList = result.data.data;
},
clear() {
this.searchForm= {
name: '',
gender: '',
job: ''
}
this.search();
}
},
// 页面加载完毕后执行
mounted() {
this.search();
}
}).mount('#container')02-前端Web开发(JS+Vue+Ajax) - 飞书云文档
