08/02

最新推荐文章于 2024-08-14 19:24:14 发布

jiawensmile365

最新推荐文章于 2024-08-14 19:24:14 发布

阅读量69

点赞数

文章标签： vue ajax

本文链接：https://blog.csdn.net/qq_42312639/article/details/119316576

版权

VUE

axios练习，局部组件，全局组件，重定向

文章目录

VUE
知识回顾
- Axios
- - Ajax
  - 请求的类型
VUE 练习
VUE组件化的思想
VUE路由机制

知识回顾

Axios

Ajax

javascript 原生的AJAX操作处理复杂，不便于使用
jQuery是JS高级函数类库，封装了很多的API，简化程序调用的过程，一些选择器的使用和函数运算的功能（回调地狱：Ajax嵌套，嵌套层级比较多，每次都要返回）
Promise对象将AJAx嵌套结构转化为链式加载的结构 ajax.get().then(xxxxx)
Axios 主要封装了promise对象，将调用变得更加的简化，整合到vue.js中，大部分条件下都整合axios， axios发起ajax请求

请求的类型

http的常用的请求8种
4种需要单独记忆

GET
查询操作特点：参数结构 key = value URL？key=value&key2 = value2
POST
新增 POST请求特点：会将参数封装到请求头， key = value key2=value2 可以直接用对象的方式接受
用户的数据相对的更加安全
Axios的post 参数是一个JSON串{key1:value1， key2:value2 } 将json串转换为对象 @RequestBody
DELETE
删除操作
特点：与get请求类型一致
PUT
更新操作
特点：与POST请求类型一致
RestFul风格在上述的四大请求类型中都可以使用（单独的体系）
RestFul语法结构
参数的位置固定

参数的使用分割

VUE 练习

VUE组件化的思想

说明：传统的页面开发，会将大量的HTML/CSS/JS进行引入，但是引入之后结构混乱，不便于管理，开发维护时，成本较高

组件化思想：
在VUE中，可以将一个组件看作是一个页面。在其中可以引入独立的样式/JS/HTML进行单独的管理。
组件可以进行复用。
关键词：组件——页面（html/css/js）

代码复用
实现策略：利用组件化思想
组件化步骤：
1.定义组件：
全剧组件：任意的div都可以引入该组件
局部组件：只有特定的DIV可以引入该组件
2.编辑组件的key（注意驼峰规则的写法）
编辑组件体特殊语法：定义属性时 data(){return{key:value}}
html标签：使用template进行标记
3.通过key对组件进行引用

⚠️：
定义组件的模版html 切记标识在app之外
要求模版字符串必须有根标签div

全局组件：

<html>
	<head>
		<meta charset="utf-8">
		<title>组件化</title>
	</head>
	<body>
		<h1>组件化结构</h1>
		<div id="app">
			<div>
				<hello-Com></hello-Com>
				<hello-Com></hello-Com>
				<hello-Com></hello-Com>
			</div>
		</div>
		<template id = "helloTem">
			<div>
				<h3>静夜思</h3>
					床前明月光，疑是地上霜。
					举头望明月，低头思故乡。
					引入属性: {{msg}}
			</div>
		</template>
		<!-- 1.引入VUE.js -->
		<script src="./vue.js"></script>
		
		<script >
			Vue.component("helloCom",{
			//定义属性 必须添加return
			data(){
				return{
					msg:"我是一个组件"
				}
			},
				template:"#helloTem"
			})
			const app = new Vue({
				el: "#app",
					data: {
						
					},
					methods: {
						
					}
			})
		</script>
	</body>
</html>

局部组件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
	</head>
	<body>
		<h1>局部组件</h1>
		<div id="app">
			<div>
				<hello-Com></hello-Com>
				<hello-Com></hello-Com>
				<hello-Com></hello-Com>
			</div>
		</div>
		<template id = "helloTem">
			<div>
				<h3>静夜思</h3>
					床前明月光，疑是地上霜。
					举头望明月，低头思故乡。
					引入属性: {{msg}}
			</div>
		</template>
		<!-- 1.引入VUE.js -->
		<script src="./vue.js"></script>
		
		<script >
			// 只能在某个VUE对象之内使用组件标签
			//声明组件
			let helloCom = {
				//属性定义
				data(){
					return{
						msg: "我是一个局部组件"
					}
				},
				template:"#helloTem"
			}
			const app = new Vue({
				el: "#app",
					data: {
						
					},
					methods: {
						
					},
					components:{
						//组件key： 组件体
						helloCom: helloCom
					
					}
			})
		</script>
	</body>
</html>

VUE路由机制

路由介绍

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

路由步骤

导入路由.js
指定路由的跳转链接
定义路由的填充位
封装组件信息，指定路由对象
在VUE对象中声明路由

案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>路由入门案例</title>
	</head>
	<body>
		<div id="app">
			<!-- 效果同a标签 router-link被编译后会转化为a标签
				关键字  to   被编译之后转化为href属性
			 -->
			<router-link to="/user">用户</router-link>
			<router-link to="/dog">🐶</router-link>
			<!-- 指定路由的填充位 未来展现组件信息 
			填充的位置被解析之后就是一个div
			-->
			<router-view></router-view>
		</div>
		<template id="userTem">
			<div>
				<h3>我是用户：{{msg}}</h3>
			</div>
		</template>
		<template id="dogTem">
			<div>
				<h3>我是狗子：{{msg}}</h3>
			</div>
		</template>
		<!-- 1.先导入VUE的JS文件 -->
		<script src="../js/vue.js"></script>
		<!-- 2.再导入路由的JS文件 -->
		<script src="../js/vue-router.js"></script>
		
		<!-- 3.创建VUE对象 -->
		<script>
			/**
			 * 准备组件，定义路由对象
			 */
			let userCom  ={
				data(){
					return{
						msg:"i'm a user"
					}
				},
				template:"#userTem"
			}
			let dogCom  ={
				data(){
					return{
						msg:"i'm a dog"
					}
				},
				template:"#dogTem"
				
			}
			//定义路由对象
			// routes:路由的多个映射通过该属性进行定义
			let vueRouter =  new VueRouter({
				
				routes:[
					{path:"/user",component:userCom},
					{path:"/dog",component:dogCom}
				]
			})
			const APP = new Vue({
				//1.指定区域
				el: "#app",
				//2.定义属性
					data: {
						
					},
					router: vueRouter
					
			})
			
			
		</script>
		
	</body>
</html>

路由关键字

redirect 路由的重定向
请求和转发都是服务器行为，不会做额外的操作，用户无法干预
重定向和转发的区别：
重定向：用户访问服务器，但是目标服务器无法处理该请求，目标服务器返回一个能够处理请求的网址，由用户再次发起请求，访问服务器获取数据
用户请求多次，响应多次，URL地址信息发生变化，不可以传递数据（第一个请求携带的数据无法自动传递到第二个请求中）请求的对象不是同一个
转发：用户访问服务器，但是目标服务器无法处理该请求，由服务器内部将请求交给其他服务器处理
用户请求1次，响应1次，用户请求的URL地址不发生变化，请求可以携带数据

在VUE中只有重定向没有转发

jiawensmile365

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
08/02

VUEaxios练习，局部组件，全局组件，重定向文章目录VUE知识回顾AxiosAjax请求的类型VUE 练习VUE组件化的思想VUE路由机制路由介绍路由步骤案例路由关键字知识回顾AxiosAjaxjavascript 原生的AJAX操作处理复杂，不便于使用jQuery是JS高级函数类库，封装了很多的API，简化程序调用的过程，一些选择器的使用和函数运算的功能（回调地狱：Ajax嵌套，嵌套层级比较多，每次都要返回）Promise对象将AJAx嵌套结构转化为链式加载的结构 aj
复制链接

扫一扫