Axios简化

最新推荐文章于 2024-05-17 14:32:46 发布

我心向明月_X

最新推荐文章于 2024-05-17 14:32:46 发布

阅读量113

点赞数

分类专栏： vue 文章标签： vue.js

原文链接：https://blog.csdn.net/qq_16804847/article/details/119991638?spm=1001.2014.3001.5501

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

关键字

Async和await

说明：

ES6以后推出的新的代码规范目的简化axios ajax 请求代码

关键字用法:

1. async 用来标识函数!!!
2. await 用来标识请求的!!!

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios简化操作语句</title>
	</head>
	<body>
		<h1>简化语法操作</h1>
		<script src="../js/axios.js"></script>
		<script>
			//1.定义请求前缀
			axios.defaults.baseURL = "http://localhost:8080/vue"
			//2.定义函数
			async function findAll(){
				//解构赋值操作
				let {data: result} = await axios.get("/findAll")
				console.log(result)
			}
			//3.调用方法
			findAll()
		</script>
			
		
</html>

this是Vue中的不用弄混了。

async _await 是axios为了简化then()的一种全新语法

组件化（全局）

说明: 传统的页面开发,会将大量的HTML/CSS/JS进行引入,但是引入之后结构混乱不便于管理. 开发维护时成本较高.
组件化思想:
在VUE中可以将一个组件,看作是一个页面. 在其中可以引入独立的样式/JS/HTML 进行单独的管理.
组件可以进行复用.

核心知识点：组件化的思想体现了“分治思想”

为了保证组件化，之间相互不干扰，则应该在组件内部。单独定义html/js/css

组件化入门案例

规则

1.如果需要使用组件，则在vue渲染区使用

2.在vue中使用标签时默认都是小写字母，如果需要引入驼峰规则，用-线代替

3.使用组件通过标签引用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>全局组件定义</title>
	</head>
	<body>
		
		<div id="app">
			<!-- 如果需要使用组件,则在vue渲染区中中使用 -->
			<!-- 规则:
					1.在vue中使用标签时默认都是小写字母.如果需要
					引入驼峰规则.则使用-线代替.
					2.使用组件通过标签引用
			 -->
			<add-num-com></add-num-com>
			<add-num-com></add-num-com>
			<add-num-com></add-num-com>
		</div>
		
		
		
		<!-- 定义模板标签语法 必须有根标签-->
		<template id="numTem">
			<div>
				<h1>我是一个组件</h1>
				获取数值: {{num}}
			</div>
		</template>
		
		
		
		<!-- 1.导入JS -->
		<script src="../js/vue.js"></script>
		<!-- 2.定义全局组件 -->
		<script>
			/* 
				组件的定义
				参数:
					1.组件名称
					2.组件实体内容
			 */
			Vue.component("addNumCom",{
				//属性
				data(){
					return {
						//自定义属性
						num: 100
					}
				},
				//页面标记
				template: "#numTem"
			})
			
			/* 2.实例化vue对象 找到区域交给vue渲染 */
			const app = new Vue({
				el: "#app"
			})
		</script>
	</body>
</html>

局部组件

如果在js中key-value一样，可以只写一个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件定义</title>
	</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 src="../js/vue.js"></script>
		<script>
			
			let msgCom = {
				template: "#msgTem"
			}
			
			//定义局部组件 只对当前vue对象有效
			const app = new Vue({
				el: "#app",
				components: {
					//key: value
					//msgCom: msgCom,
					//如果在JS中key-value一样的.可以只写一个
					msgCom
				}
			})
			
			const app2 = new Vue({
				el: "#app2",
			})
			
			
		</script>
	</body>
</html>

关于组件化的知识点

为什么使用组件?
答:
1.原来用户编辑页面时,需要引入/维护大量的JS/CSS等.如果数量很多,则导致代码结构混乱.所以需要引入组件化思想.
2.前端框架为了更好的解耦,采用了"分治"思想的构建代码.前端向后端代码结构看齐.(微服务框架)
3.组件采用树形结构, 可以将功能小型化.单独维护.
4.组件是一个独立的个体,内部包含HTML/CSS/JS
5.使用组件看做就是一个页面

如何理解template属性?
答:
1.template标签是组件中定义html标记的模板.
2.template标签必须有根标签div
3.template标签最好定义在body标签内部,写法方便.

关于组件使用有什么注意事项?
答:
1. 组件的使用必须在VUE对象渲染的区域中使用.
2. 组件有全局的/有局部的.注意作用域.
3. 在html标签中使用组件时,注意大小写问题.如果是驼峰规则,则使用 "-"连接.
4. 组件必须先定义再使用.

https://blog.csdn.net/qq_16804847/article/details/119991638?spm=1001.2014.3001.5501

我心向明月_X

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios简化

关键字Async和await说明：ES6以后推出的新的代码规范目的简化axios ajax 请求代码关键字用法:1. async 用来标识函数!!!2. await 用来标识请求的!!!<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Axios简化操作语句</title> </head> <body&gt.
复制链接

扫一扫