axios简化操作，组件化和Vue路由

最新推荐文章于 2021-08-30 22:08:18 发布

每天都有在学习

最新推荐文章于 2021-08-30 22:08:18 发布

阅读量116

点赞数

文章标签： vue.js javascript ajax

本文链接：https://blog.csdn.net/weixin_60267819/article/details/120004067

版权

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. 这个过程称之为重定向

每天都有在学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
axios简化操作，组件化和Vue路由

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> <
复制链接

扫一扫