1. axios简化操作
1.1 async-await关键字
关键字用法：async用来标识函数；await用来标识请求。
async - await 是axios为了简化then()的一种全新的语法，该用法只能用到ajax请求中
1.2 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>简化axios的操作</title>
<!-- 导入ajax的js文件 -->
<script src="../js/axios.js"></script>
</head>
<body>
<h2>简化语法的操作</h2>
<script>
// 1. 定义axios请求的前缀
axios.defaults.baseURL = "http://localhost:8080/axios"
//2. 定义函数
async function getAll(){
//解构赋值操作
let {data: result} = await axios.get("/getAll")
alert(result)
}
//3. 最后调用函数
getAll()
</script>
</body>
</html>
2. 组件化
2.1组件说明
在VUE中 可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理，组件可以进行复用. 组件化的思想体现了"分治思想"。
2.2 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全局组件</title>
<!--1. 导入js -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 若使用组件，在vue渲染区中使用 -->
<add-num></add-num>
<add-num></add-num>
</div>
<!-- 定义模板标签语法，必须有根标签 -->
<template id="numTem">
<div>
<h2>我是一个组件</h2>
获取到数值：{{num}}
</div>
</template>
<!-- 2.定义全局组件
参数：组件名称；组件实体内容
-->
<script>
Vue.component("addNum",{
data(){
return{
num:50
}
},
//页面标记
template:"#numTem"
})
const app = new Vue({
el:"#app"
})
</script>
</body>
</html>
2.3 局部组件 代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>局部组件</title>
<!-- 导入js -->
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 定义的app2 ，局部组件只能在特定位置使用，所以该位置，不能解析-->
<div id="app2">
<msg-com></msg-com>
<msg-com></msg-com>
</div>
<!-- 模板标签必须在vue渲染div外边 -->
<template id="msgTem">
<div>
<h3>我是局部组件</h3>
</div>
</template>
<script>
let msgCom = {
template:"#msgTem"
}
// 定义局部组件，只对当前vue对象有效
const app = new Vue({
el:"#app",
components:{
msgCom
}
})
</script>
</body>
</html>
2.4 总结
1.为什么要使用组件？
1.原来用户编辑页面时,需要引入/维护大量的JS/CSS等.如果数量很多,则导致代码结构混乱.所以需要引入组件化思想；
2.前端框架为了更好的解耦,采用了"分治"思想的构建代码.前端向后端代码结构看齐；
3.组件采用树形结构, 可以将功能小型化.单独维护；
4.组件是一个独立的个体,内部包含HTML/CSS/JS；
5.使用组件看做就是一个页面；
2.如何理解template属性?
1.template标签是组件中定义html标记的模板；
2.template标签必须有根标签div；
3.template标签最好定义在body标签内部,写法方便；
3.关于组件使用的注意事项
1. 组件的使用必须在VUE对象渲染的区域中使用；
2. 组件有全局的/有局部的.注意作用域；
3. 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接；
4. 组件必须先定义再使用；
3. Vue路由
3.1 路由说明
说明: 用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)
3.2 入门案例
3.2.1 步骤说明：引入JS类库；指定路由跳转链接；指定路由填充位；封装路由对象；vue对象绑定路由
3.3 路由入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>路由入门案例</title>
<!-- 导入JS类库-->
<script src="../js/vue.js"></script>
<script src="../js/vue-router.js"></script>
</head>
<body>
<div id="app">
<h2>实现路由案例</h2>
<!-- 定义路由的标签 -->
<router-link to="/dog">小黄狗</router-link>
<!-- 指定路由填充位 -->
<router-view></router-view>
</div>
<!-- 定义template标签 -->
<template id="homeDog">
<div>
<h3>我是小黄狗</h3>
<img src="../img/1.jpg" />
</div>
</template>
<!-- 封装路由对象 -->
<script>
let homePet = {
template:"#homeDog"
}
let router = new VueRouter({
routes:[
{path:"/dog",component:homePet}
]
})
// 实现路由对象绑定
const app = new Vue({
el:"#app",
router
})
</script>
</body>
</html>
3.4 页面效果
3.5 重定向/转发
说明：用户请求服务器时,由服务器将请求转给另一台服务器的过程，叫做转发
重定向说明：用户请求服务器时,服务器由于特殊原因告知用户应该访问服务器B,之后用户再次发起请求访问服务器B. 这个过程称之为重定向