笔记梳理---仅供参考
目录
Ajax
原生Ajax(基本不用)
1、准备数据地址:http://yapi.smart-xwork.cn/mock/169327/emp/list
2、创建XMLHttpRequest对象:用于和服务器交换数据
3、想服务器发送请求
4、获取服务器响应数据
Axiso
<!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>
<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>
<th>最后操作时间</th>
</tr>
<tr align="center"v-for="(emp,index)in emps"></tr>
<td>{{index+1}}</td>
<td>{{emp.name}}</td>
<td>
<img :src="emp.image"width="30px"height="50px">
</td>
<td>
<span v-if="emp.gender==1">男</span>
<span v-if="emp.gender==2">女</span>
</td>
<td>{{emp.job}}</td>
<td>{{emp.entrydate}}</td>
<td>{{emp.updatetime}}</td>
</table>
</div>
</body>
<script>
new Vue({
el:"#app",
data:{
},
mounted(){
//发送异步请求
axios.get(" ").then(result=>{
this.emps=result.data.data;
})
}
})
</script>
</html>
前端工程化
接口文档:YApi(YApi Pro-高效、易用、功能强大的可视化接口管理平台)
模块化(js、css) 组件化(UI结构、样式、行为)规范化(目录结构、编码、接口)自动化(构建、部署、测试)
检查是否安装nodejs和npm镜像文件
安装vue-cli
npm install -g @vue/cli
确认是否安装成功
vue --version
element组件库:Element - The world's most popular Vue UI framework
Vue路由
前端路由:URL中的hash(#号)与组件之间的对应关系