三.day8axios简化,组件化，VUE路由

最新推荐文章于 2024-07-25 15:19:10 发布

loveyouloveyour

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量102

点赞数

文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/loveyouloveyour/article/details/120003532

版权

axios简化

async-await关键字

ES6以后推出的新的代码规范,目的简化现有axios ajax请求的代码结构.提高用户的开发效率.

关键字用法：

1.async 用来标识函数

2.await 用来表示请求

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

<!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:8090/vue"
			
			//2.定义函数!!!!
			async function findAll(){
			 //解构赋值操作
			 let {data: result} = await axios.get("/findAll")
				console.log(result)
			}
			
			//3.调用函数
			findAll()
				 
		 </script>
	</body>
</html>

组件化

知识回顾：

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

关键字：组件-页面(html/css/js)

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

全局组件：

<!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>

局部组件：

<!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.为什么使用组件?
答:
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. 组件必须先定义再使用.

VUE路由介绍#/：

路由说明：用户发起一个请求,在互联网中经过多个站点的跳转.最终获取服务器端的数据. 把互联网中网络的链路称之为路由. (网络用语)
VUE中的路由: 根据用户的请求URL地址,展现特定的组件(页面)信息. (控制用户程序跳转过程)

实现步骤：

1.引入JS类库
2.指定路由跳转链接
3.指定路由填充位
4.封装路由对象
5.vue对象绑定路由

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		
		<div id="app">
			<h1>实现路由案例</h1>
			
			<!-- 2.定义路由标签
				1.a标签说明
				标签说明: a标签 超链接标签
						 href属性: 请求跳转的地址
				<a href="http://www.baidu.com">百度</a>
				
				2.路由标签说明
					router-link 解析为a标签
					to 解析之后变成 href属性
			 -->
			 <router-link to="/home">主页</router-link>
			 
			 <!-- 3.指定路由填充位(占位符)
				需要给组件一个展现的位置,需要提前定义.
			 -->
			 <router-view></router-view>
			 
			
		</div>
		
		
		<!-- 定义template标签 -->
		<template id="homeTem">
			<div>
				<h1>这里是系统首页</h1>
			</div>
		</template>
		
		
		<!-- 1.引入JS 路由需要依赖vue 注意顺序-->
		<script src="../js/vue.js"></script>
		<script src="../js/vue-router.js"></script>
		
		<script>
			<!-- 4.封装路由对象  -->
			let HomeCom = {
				template: "#homeTem"
			}
			
			let router = new VueRouter({
				//routes 定义请求与组件的映射关系
				routes: [
					{path: "/home", component: HomeCom}
				]
			})
			
			/* 5.实现路由对象绑定 */
			const app = new Vue({
				el: "#app",
				//router: router
				router
			})
		</script>
	</body>
</html>

路由的嵌套：

关键字：children

/* 
				1.如果需要在App根标签中跳转,则写到routes根目录下
				2.如果需要进行父子嵌套,则应该使用children属性
				3.如果使用children属性,则在自身的router-view展现数据
			 */
			let router  = new VueRouter({
				routes: [
					{path: "/tiger",component: tigerCom},
					{path: "/lion",component: lionCom, 
						children: [
							{path: "/lion/one",component: oneCom},
							{path: "/lion/two",component: twoCom},
						],
					}
					]
			})

重定向/转发(web经典面试题)

说明：用户请求服务器时，由服务器将请求转给另一台服务器的过程，叫做转发

重定向

说明：用户请求服务器时,服务器由于特殊原因告知用户应该访问服务器B,之后用户再次发起请求访问服务器B. 这个过程称之为重定向

vue中重定向：

VE中使用redirect实现重定向效果

在这里插入图片描述

loveyouloveyour

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三.day8axios简化,组件化，VUE路由

axios简化async-await关键字ES6以后推出的新的代码规范,目的简化现有axios ajax请求的代码结构.提高用户的开发效率.关键字用法：1.async 用来标识函数2.await 用来表示请求是axios为了简化then()的一种全新的语法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>Axios简化操作</titl
复制链接

扫一扫