Spring-jt-Day08-VUE监听过滤生命周期数组组件化Axios

已于 2022-08-05 11:31:52 修改
阅读量90 收藏
点赞数
分类专栏： spring 文章标签： vue ajax
于 2021-05-10 18:22:20 首次发布
原文链接：https://blog.csdn.net/qq_16804847/article/details/116586477
版权

版权声明：本文为CSDN博主「闪耀太阳」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_16804847/article/details/116586477

1.监听器

1.1 需求说明

当属性的数据发生变化时,则通过监听器实现对数据的监控. 从而实现数据的操作.

什么时候使用:
一般用于业务处理(异步操作 Ajax)

1.2 配置监听器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>校验用户名是否可用</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				需求:
					要求用户输入username的用户名,之后与服务器进行校验
					如果已经存在给用户提示. 如果不存在 则提示用户可用.
			 -->
			 用户名: <input type="text" v-model.lazy="username"/>{{msg}}
			 
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					//校验的结果
					msg: ''
				},
				methods: {
					checkName(val){
						//===严格意义的数据校验 新版本提倡这么写 校验数值 还校验类型
						if(val === 'admin'){
							this.msg = "数据已存在"
						}
						else if(val === 'tom'){
							this.msg = "数据已存在"
						}
						else{
							this.msg = "数据可以使用"
						}
					}
				},
				watch: {
					//定义属性的监听器
					username(val){
						this.checkName(val)
					}
				}
			})
		</script>
	</body>
</html>

2.过滤器

2.1 关于过滤器说明

一般使用过滤器格式化数据. 价格/时间等

2.2 需求说明

当用户输入完成数据之后,要求使用过滤器将数据反转.

2.3 过滤器入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤器的使用</title>
	</head>
	<body>
		<div id="app">
			 <!-- 使用 | 线 调用过滤器-->
			 用户输入内容: <input type="text" v-model="username" /><br>
			 {{username | rename}}<br>
			 <!-- 过滤器级联-->
			 {{username | rename | addChar}}
		</div>
		<script src="../js/vue.js"></script>
		<script>
			
			//1.单独定义过滤器 
			// 参数1: 过滤器名称  参数2: 过滤器执行的方法
			// 注意事项: 过滤器需要返回值.
			Vue.filter('rename',function(val){
				
				return val.split('').reverse().join('')	
			})
			
			//2.追加哈哈哈字符 
			//箭头函数写法 可以省略function关键字, 如果只有一个参数则()省略 
			//使用=>进行关联
			Vue.filter('addChar',val => {
				
				return val + '哈哈哈'
			})
			
			
			
			
			const app = new Vue({
				el: "#app",
				data: {
					username: '',
					
				},
				methods: {
					
				}
			})
		</script>
	</body>
</html>

3.VUE生命周期

3.1 VUE生命周期函数说明

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对 property 和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

3.2 VUE对象周期函数流程图

在这里插入图片描述

3.3 VUE对象生命周期Demo

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>生命周期</title>
	</head>
	<body>
		<div id="app">
			
			<!-- 
				1.VUE对象的生命周期函数,可以单独的调用
				2.生命周期的函数名称是固定的,不能随意修改.
			 -->
			用户名: <input type="text" v-model="name"/>
			<button @click="destroyed">销毁</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					name: ''
				},
				methods: {
					destroyed(){
						//手动销毁VUE对象 vue中的对象API使用$调用
						this.$destroy()
					}
				},
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("初始化之后调用-beforeCreate")
				},
				//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置
				created(){
					console.log("实力化对象完成,并且完成了配置之后调用created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("数据在备挂载前调用beforeMount")
				},
				//实例被挂载后调用 页面真正的加载完成之后调用
				mounted(){
					console.log("页面加载完成mounted")
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("数据更新时调用beforeUpdate")
				},
				//由于数据更改之后调用
				updated(){
					console.log("数据修改之后调用updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用。
				beforeDestroy(){
					console.log("VUE对象销毁之前调用beforeDestroy")
				},
				//实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。
				destroyed(){
					console.log("实例销毁后调用destroyed")
				}
				
			})
		</script>
	</body>
</html>

4 VUE中数组操作

4.1 官网API位置

说明: VUE针对数组的操作,开发了一套完整的API
在这里插入图片描述

4.2 数组用法案例说明

1).push() 在数组末尾追加数据.
2).pop() 删除数组最后一个元素
3).shift() 删除数组第一个元素
4.unshift() 在数据开头追加数据.
5.splice() 在指定的位置替换数据.
6.sort() 对数据进行排序 按照编码进行排序 由小到大
7.reverse() 数组反转.

4.3 数组基本案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>数组案例</title>
	</head>
	<body>
		<div id="app">
			<span v-for="item in array" v-text="item"></span><br>
			
			数据: <input type="text" v-model="data"/> 
			<button @click="push">追加</button>
			<button @click="pop">移除最后一个</button>
			<button @click="shift">删除第一个元素</button>
			<button @click="unshift">在开头追加元素</button>
			<button @click="splice">替换元素</button>
			<button @click="sort">排序</button>
			<button @click="reverse">反转</button>
		</div>
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					array: [5,7,4,1],
					data: ''
				},
				methods: {
					push(){
						this.array.push(this.data)
					},
					pop(){
						//移除最后一个数据
						this.array.pop()
					},
					shift(){
						this.array.shift()
					},
					unshift(){
						this.array.unshift(this.data)
					},
					splice(){
						//关于参数说明 参数1:操作数据起始位置 index
						//			  参数2:操作数据的个数
						//			  参数3:要替换的值
						//删除元素     删除第一个元素的后2位
						//this.array.splice(1,2,'')
						//替换元素     替换前2个元素(将元素当做整体进行替换)
						//替换后的元素可以有多个
						this.array.splice(0,2,this.data)
					},
					sort(){
						this.array.sort()
					},
					reverse(){
						this.array.reverse()
					},
					
				}
				
			})
		</script>
	</body>
</html>

5 VUE中组件化思想

5.1 组件化介绍

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树.
使用组件可以将一些重复的内容进行封装.各个组件单独维护.体现了分治的思想

在这里插入图片描述

5.2 组件化入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<!-- 3.调用组件 -->
			<hello></hello>
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			//1.定义全局组件  参数1: 定义组件名称 暂时不要使用驼峰规则
			//				 参数2: 定义组件对象
			Vue.component('hello',{
				//1.组件数据.
				data(){
					return {
						msg: 'hello 组件'
					}
				},
				//2.组件结构 html数据
				template: '<h1>{{msg}}</h1>'
			})
			
			/* 注意事项: 组件的使用必须有Vue对象的渲染 */
			const app = new Vue({
				el: "#app"
			})
			
		</script>
	</body>
</html>

5.3 组件驼峰规则命名

在这里插入图片描述

5.4 组件模板标签的使用

1). `号的作用
在这里插入图片描述
2).组件template的写法
在这里插入图片描述
在这里插入图片描述

5.5 局部组件定义

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<hello1></hello1>
			<hello1></hello1>
		</div>
		
		<template id="hello1Tem">
			<div>
				<h3>{{msg}}</h3>
			</div>
		</template>
		
		<script src="../js/vue.js"></script>
		<script>
			
			//1.定义组件对象
			const hello1 = {
				data(){
					return {
						msg: 'hello1局部组件'
					}
				},
				template: '#hello1Tem'
			}
			
			/* 局部组件的写法 */
			const app1 = new Vue({
				el: "#app",
				//vue对象中的组件  组件名称/组件对象
				components: {
					//hello1  : hello1
					//js简化写法 如果key与value值相同,则可以简化.
					hello1
				}
			})
			
		</script>
	</body>
</html>

6 Axios

6.1 Axios介绍

Axios 是一个基于 promise(内部封装了ajax) 的 HTTP 库，可以用在浏览器和 node.js 中。
作用: 在内部 简化异步调用
在这里插入图片描述

6.2 入门案例

6.2.1 编辑页面HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		
		<h1>Axios Ajax调用</h1>
		
		<!-- 1.导入js类库 -->
		<script src="../js/axios.js"></script>
		<script>
			
			//1.发起Get请求
			// 原始参数  1: url地址  参数2:提交参数  参数3:回调函数
			// 知识点: 传统的ajax的操作有"回调地狱问题" '闭包' 
			// 回调地狱问题: 由于业务复杂,导致多重的ajax进行嵌套. 如果中间出现任何问题.则导致整个ajax调用失败.
			
			//参数 1: url地址  2.提交的参数
			//跨域请求: 浏览器不能正常执行!!!!
			let url = "http://localhost:8090/hello"
			axios.get(url)
				 .then(function(result){
					 //获取返回值 promise对象
					 console.log(result)
					 //如果需要获取服务器的返回值则使用.data属性
					 console.log(result.data)
				 })
		</script>
	</body>
</html>

6.2.2 编辑后台AxiosController

在这里插入图片描述

6.3 作业

1.掌握Vue组件/过滤器/监听器/数组操作
2.了解什么是跨域!!!
3.将Axios的get/delete/put/post 了解.

LXC5952
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值