JS+JSON+Vue
JS核心语法
内部脚本:script标签定义的js代码块建议放在<body>元素的底部
<script>
// 定义变量:使用let关键字
let a = 3;
a = "Hello Js";
alert('a'); //弹出警告框,常用
//定义常量:使用const关键字
const PI = 3.14;
console.log(PI); //写入浏览器控制台,常用
document.write(PI);//直接写入body内,不常用
</script>JavaScript是一门弱类型语言,共有五种基本数据类型:number,boolean,string,null,undefined.
可用typeof()方法判别类型.
//1. 数据类型
alert(typeof 10); //number类型
alert(typeof 1.5);
alert(typeof true); //boolean类型
alert(typeof false);
alert(typeof "Hello"); //string类型
alert(typeof 'JS');
alert(typeof `JavaScript`);
alert(typeof null); //object类型
let a ;
alert(typeof a); //undefined类型JS的string类型中反引号``的用途:作模板字符串,方便字符串的拼接
let name = 'Bob';
let age = '20';
console.log('我的姓名:'+name+',我的年龄:'+age);//一般写法
console.log(`我的姓名:${name},我的年龄:${age}`);//反引号写法JS函数篇
<script>
//一.具名函数
function add(a,b){
return a+b;
}
let res = add(10,20);
console.log(res);
//二.匿名函数(两种表示方法:表达式,箭头)
//表达式函数
let add1 = function(a,b){
return a+b;
}
let res1 = add1(10,20);
console.log(res1);
//箭头函数
let add2 = (a,b) =>{
return a+b;
}
let res2 = add1(10,20);
console.log(res2);
</script>JS自定义对象篇
<script>
//自定义对象
let user = {
name: 'Tom',
age: 20,
gender: '男',
sing: function(){
alert(this.name+'在唱歌');
}
}
alert(user.name);
user.sing();
//方法简写
let user1 = {
name: 'Bob',
age: 20,
gender: '男',
sing(){
alert(this.name+'在唱歌');
}
}
alert(user1.name);
user1.sing();
//自定义对象中不建议使用箭头函数表示方法
let user3 = {
name: 'Nik',
age: 20,
gender: '男',
sing: () => { //箭头函数体内的this指向的不是当前对象,而是当前对象的父级(当前为object windows)
alert(this+'在唱歌');
}
}
alert(user3.name);
user3.sing();
</script>DOM篇
DOM: 全称Document Object Model,文档对象模型.
由JS所提供,专为操作网页内容的一类接口.
将html中所有的内容都封装为对象,采用面向对象的方式来操作内容
<body>
<h1>111111</h1>
<h1>222222</h1>
<h1>333333</h1>
<script>
//使用DOM修改第一个标签里的文本内容
//1.获取DOM对象(使用元素选择器)
let h1 = document.querySelector('h1'); //document.querySelector()方法用于修改选择器选中的第一个元素
let h2 = document.querySelectorAll('h1'); //document.querySelector()方法用于修改选择器选中的所有元素,用伪数组来存储,可通过索引依次访问,但其并无数组类方法
//2.调用DOM对象中的属性或方法
h1.innerHTML = 'aaaaaa';
h2[0].innerHTML = 'bbbbbb';
//选择器还有id选择器,class选择器
//let h1 = document.querySelector('#id'); //id选择器
//let h1 = document.querySelector('.class'); //class选择器
</script>
</body>JSON篇
json格式中的key必须用双引号""包围
//JSON
let ren = {
name:'a',
age:19,
aihao:'a'
}
//stringify()方法,将js对象转换为json字符串
alert(JSON.stringify(ren));
//parse()方法,用于将json字符串转换为js对象格式
let ren1 = '{"name": "a","age" :20}';
alert(JSON.parse(ren1).name);JS事件篇
语法:事件源.addEventListener('事件类型',执行函数);
<body>
<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">
<script>
//推荐用法:addEventListener()方法,可定义多个事件监听,不会覆盖
document.querySelector('#btn1').addEventListener('click',() => {
console.log("样吧样吧");
})
document.querySelector('#btn1').addEventListener('click',() => {
console.log("哎样吧样吧也出现了");
})
//不推荐用法:onclick(),on方式定义多个事件监听时后者会覆盖前者
document.querySelector('#btn2').onclick = () => {
console.log("不样吧");
}
document.querySelector('#btn2').onclick = () => {
console.log("不样吧被覆盖了");
}
</script>
</body>小案例
<script>
//通过JS为上述的表格中数据行添加事件监听, 实现鼠标进入后, 背景色#f2e2e2; 鼠标离开后, 背景色需要设置为#fff; (JS新版本的语法)
let a = document.querySelectorAll('tr');
for(let i=0;i<a.length;i++){
a[i].addEventListener('mouseenter',function (){
this.style.backgroundColor = "#f2e2e2";
})
a[i].addEventListener('mouseleave',function(){
this.style.backgroundColor = "#fff";
})
}
</script>常见事件
<script>
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
console.log("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
console.log("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
console.log("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
console.log("键盘被按下了...");
})
//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
console.log("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
console.log("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
console.log("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
console.log("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})
</script>JS优化篇
JS模块化：import，exeport
//event.js
import {print} from './utils.js';
//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
print("我被点击了...");
})
//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
print("鼠标移入了...");
})
//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
print("鼠标移出了...");
})
//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
print("键盘被按下了...");
})
//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
print("键盘被抬起了...");
})
//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
print("失去焦点...");
})
//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
print("获得焦点...");
})
//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
print("用户输入时触发...");
})
//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
alert("表单被提交了...");
})//utils.js
export function print(a){
console.log(a);
}html页面中使用下列代码导入模块化文件（模块化JS必须加type="module"）
<script src="./js/event.js" type="module"></script>Vue篇
Vue：用于构建用户界面的渐进式JavaScript框架。
Vue构建步骤：
一、准备
1.1：引入Vue模块（本文使用ES模块构建，可参考https://vuejs.org/guide/quick-start.html）
1.2：创建vue程序的应用实例，控制视图元素
1.3：准备元素div，被Vue控制
<body>
<div id="app">
<h1></h1>
</div> <script type="module">
import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
}
}
}).mount('#app');
</script>二、数据驱动视图
2.1：准备数据（写在return方法体内）
message:"Hello Vue"2.2：通过插值表达式渲染页面（使用双大括号包围，写在标签的文本区域，本文为{{message}}）
<body>
<div id="app">
<h1>{{message}}</h1>
</div>Aue常用指令
一、v-for
用于列表渲染，遍历容器的元素。
//语法：
<h1 v-for = "(item,index) in items" :key = "item.id"><!-- 表格展示区 -->
<table>
<!-- 表头 -->
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>头像</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
<th>操作</th>
</tr>
</thead>
<!-- 表格主体内容 -->
<tbody>
<tr v-for="(e, index) in empList" :key="e.id">
<td>{{index+1}}</td>
<td>{{e.name}}</td>
<td>{{e.gender == 1 ? '男' : '女'}}</td>
<td><img class="avatar" src="https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg" alt="令狐冲"></td>
<td>{{e.job}}</td>
<td>{{e.entrydate}}</td>
<td>{{e.updatetime}}</td>
<td class="action-buttons">
<button type="button">编辑</button>
<button type="button">删除</button>
</td>
</tr>
</tbody>
</table><script type="module">
import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
createApp({
data() {
return {
empList: [
{ "id": 1,
"name": "谢逊",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/4.jpg",
"gender": 1,
"job": "1",
"entrydate": "2023-06-09",
"updatetime": "2024-09-30T14:59:38"
},
{
"id": 2,
"name": "韦一笑",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/1.jpg",
"gender": 1,
"job": "1",
"entrydate": "2020-05-09",
"updatetime": "2024-09-01T00:00:00"
},
{
"id": 3,
"name": "黛绮丝",
"image": "https://web-framework.oss-cn-hangzhou.aliyuncs.com/2023/2.jpg",
"gender": 2,
"job": "2",
"entrydate": "2021-06-01",
"updatetime": "2024-09-01T00:00:00"
}
]
}
}
}).mount('#container')
</script>最终效果：
二、v-bind
用于动态绑定标签属性值。（原因：插值表达式不允许出现在标签内部）
语法：v-bind:属性值=“demo”或:属性值=“demo”（后者为简写版）
<td><img class="avatar" v-bind:src="e.image" :alt="e.name"></td>三、v-if&&v-show
<td>
<!-- v-if指令，只渲染满足条件的属性值，适用于不频繁切换的场景 -->
<span v-if="e.job == 1">班主任</span>
<span v-else-if="e.job == 2">讲师</span>
<span v-else-if="e.job == 3">学工主管</span>
<span v-else-if="e.job == 4">教研主管</span>
<span v-else-if="e.job == 5">咨询师</span>
<span v-else>其他</span>
</td><td>
<!-- v-show指令，通过css的display属性值控制元素的显示与隐藏，全部属性值都会渲染，适用于频繁切换的场景 -->
<span v-show ="e.job == 1">班主任</span>
<span v-show="e.job == 2">讲师</span>
<span v-show="e.job == 3">学工主管</span>
<span v-show="e.job == 4">教研主管</span>
<span v-show="e.job == 5">咨询师</span>
</td>最终效果：
四、v-model && v-on
v-model指令用于对表单元素进行双向绑定，以获取或设置表单项数据。
语法：在标签内 v-model = "变量"，变量在data中生成
<input type="text" id="name" name="name" placeholder="请输入姓名" v-model="searchForm.name">
<select id="gender" name="gender" v-model="searchForm.gender">
<select id="position" name="position" v-model="searchForm.job">return {
searchForm: {
name: '',
gender:'',
job:''
}
}v-on指令：为html标签绑定事件（添加事件监听）
语法：v-on :事件名 = “方法名” || @事件名："方法名"
在methods中，想要获取Vue应用实例中的数据，需通过this关键字
methods:{ //与data同级，在methods中，想要获取Vue应用实例中的数据，需通过this关键字
submit(){
console.log(this.searchForm); //this指向当前vue应用实例
},
clear(){
this.searchForm = {name:'',gender:'',job:''}
}
}<button type="button" v-on:click="submit">查询</button>
<button type="button" @click="clear">清空</button>Ajax篇
Ajax，异步JavaScript和XML（XML：可扩展标记语言，本质是一种数据格式，用于存储复杂的数据结构）
Axios对Ajax进行了封装，简化了开发
步骤：1.引入Axios的js文件。2.使用axios发送请求并获取响应结果.
初识
<body>
<input type="button" value="获取数据GET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">
<script src="js/axios.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click', () => {
axios.get('https://mock.apifox.cn/m1/3083103-0-default/emps/list').then((result) => {
console.log(result);
}).catch((err) => {
});
console.log('=================='); //“======================”先输出，result后输出，证明ajax请求为异步，不会等到服务器返回消息，会接着往下执行程序
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click', () => {
axios.post('https://mock.apifox.cn/m1/3083103-0-default/emps/update').then((result) => {
console.log(result);
}).catch((err) => {
});
})
</script>
</body>使用ajax技术实现动态访问服务器数据并展示
methods:{
async submit(){
//发送异步请求，获取数据
// axios.get(`https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`).then((result) => {
// this.empList = result.data.data;
// })
//通过ansyc，await使异步操作变为同步操作，使程序真正意义上的从上往下顺序执行，提高程序可读性，便于维护
let 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;
console.log(result);//先输出
console.log("===============");//后输出
},
//清空表单内容，并展示出全部数据
clear(){
this.searchForm = {name:'',gender:'',job:''}
this.submit()
}
}钩子函数
（Vue应用实例在不同生命周期阶段（共八个）触发生命周期事件时自动执行的生命周期方法统称为钩子函数）
mounted(){
//钩子函数mounted(),用于在页面加载完成后立即渲染数据
this.submit()
}前端基础篇至此完结撒花，少年仍需努力。