1.js: JavaScript
基础学习
JavaScript基础学习简单案例
1.点击img1，则展示img1图片默认，点击img2则展示img2图片 2.输入框鼠标聚焦onfocus后，显示小写toLowerCase()，失去焦点onblur后显示大写toUpperCase() 3.点击全选按钮，所有复选框为被选中状态，点击反选则取消勾选状态JavaScript案例
2.Vue2入门
Vue是一套前端框架，免除JavaScript中的DOM操作，简化书写。
基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上。
2.1下载Vue.js文件，引入到项目中
<script src="js/vue.js"></script>2.2Vue基础指令
v-bind:给标签属性绑定vue中定义的模型数据，可简写为：
v-model：给表单项双向绑定vue中定义的模型数据
v-on：给标签绑定事件，v-on:事件名="方法名()"，可简写为@事件名="方法名()"
v-if、v-else-if、v-else; v-show、v-for
<div id = "study01">
<!-- 插值表达式{{message}}:将变量的值显示到标签内容体 -->
<p>{{message}}</p>
<!-- 展示到标签中使用 v-model -->
<input type="text" v-model="message">
</div>
<div id = "study02">
<!-- v-bind:href、v-model的使用 -->
<a v-bind:href="url">链接1</a>
<a :href="url">链接2</a>
<br>
<!-- 在text里面修改网址，也会直接修改了链接12的网址：双向绑定 -->
<input type="text" v-model="url">
<br>
<!-- v-on使用:给HTML标签绑定事件 -->
<input type="button" value="按钮1" v-on:click="handle()">
<input type="button" value="按钮2" @click="handle()">
<br>
<!-- v-if、v-else-if、v-else; v-show -->
年龄<input type="text" v-model="age">经判定，为：
<span v-if="age <= 35">年轻人</span>
<span v-else-if="age>35&&age<=60">中年人</span>
<span v-else>老年人</span>
<br>
<!-- v-show -->
年龄<input type="text" v-model="age">经判定，为：
<span v-show="age <= 35">年轻人</span>
<span v-show="age>35&&age<=60">中年人</span>
<span v-show>老年人</span>
<br>
<!-- v-for -->
<p v-for="ithem in addrs">{{ithem}}</p>
<p v-for="(ithem,index) in addrs">{{index+1}},{{ithem}}</p>
</div>
<script>
new Vue({
//定义Vue接管的区域
el:"#study01",
data: {
//定义模型数据
message: "hello Vue"
}
})
new Vue({
el: "#study02",
data: {
url:"http://www.baidu.com",
age: 20,
addrs: ["北京","上海","广州","深圳"]
},
methods:{
//定义绑定的自定义函数
handle: function(){
alert("按钮被点击了...");
}
}
})
</script>
2.3案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue案例1</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user,index) in users">
<td>{{index+1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.gender==1?"男":"女"}}</td>
<td>{{user.score}}</td>
<td v-if="user.score<60" style="color: red;">不及格</td>
<td v-else-if="user.score>=60&&user.score<80">及格</td>
<td v-else>优秀</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data: {
users: [
{
name: "Tom",
age: 20,
gender: 1,
score: 78
},
{
name: "Rose",
age: 18,
gender: 2,
score: 86
},
{
name: "Jerry",
age: 26,
gender: 1,
score: 90
},
{
name: "Tony",
age: 30,
gender: 1,
score: 52
}
]
}
})
</script>
</html>
3.Ajax和Axios
3.1Ajax
Asynchronous JavaScript And XML，异步的JavaScript和XML
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不刷新加载整个页面的情况下，与服务器交换数据且更新部分网页的技术
3.2Axios
官方文档：起步 | Axios中文文档 | Axios中文网 (axios-http.cn)
Axios对原生的Ajax进行封装，简化书写，快速开发。
3.2.1下载并引入Axios的js文件
3.2.2基础学习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios基础学习</title>
<script src="js/axios-0.18.0.js"></script>
</head>
<body>
<input type="button" value="获取数据Get请求" onclick="get()">
<input type="button" value="删除数据Post请求" onclick="post()">
</body>
<script>
//基础学习
function get(){
axios({
method: "get",//发送get请求
url: "https://mock.apifox.cn/m1/2954513-0-default/emp/list"//请求地址
}).then(result=>{
console.log(result.data);//获取响应回来的数据要加data
})
//优化写法
// axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{
// console.log(result.data);
// })
}
function post(){
axios({
method: "post",
url: "https://mock.apifox.cn/m1/2954513-0-default/emp/deleteById",
data: "id=10" //获取id=10的数据
}).then(result=>{
console.log(result.data);
})
}
</script>
</html>
3.3.3案例
页面刷新 vue中：mounted()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Axios案例1</title>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
</head>
<!-- 页面加载的函数vue中：mounted() -->
<body>
<div id = "app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>图像</th>
<th>性别</th>
<th>职位</th>
<th>入职日期</th>
<th>最后操作时间</th>
</tr>
<tr align="center" v-for="(emp,index) in emps">
<td>{{index+1}}</td>
<td>{{emp.name}}</td>
<td>
<img v-bind:src="emp.image" width="70px" height="50px">
</td>
<td>
{{emp.gender==1?"男":"女"}}
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</tr>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
emps: [
{name: "小名",img: "https://web-framework.oss-cn-hangzhou.aliyuncs.com/web/1.jpg",gender: 1,job: "班主任",entrydate: "2018-09-10",updatetime:"2020-02-28"}
]
},
//mounted:页面加载完成后的方法
mounted(){
axios.get("https://mock.apifox.cn/m1/2954513-0-default/emp/list").then(result=>{
//注意result.data得到响应回来的数据，该数据中又有code、message、data，数据在data中
console.log(result.data.data);
//给emps赋值
//不能直接写emps=result.data.data,这里的emps不是指vue中的ems，而是外层的
this.emps=result.data.data;
})
}
})
</script>
</html>