三.day6Vue学习，生命周期，ajax学习

最新推荐文章于 2023-01-02 12:27:59 发布

loveyouloveyour

最新推荐文章于 2023-01-02 12:27:59 发布

阅读量174

点赞数

文章标签： ajax vue.js javascript

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

版权

VUE基本用法：

1.表单中那些表前可以使用双向数据绑定？双向数据绑定说明：用户可以录入的标签

答：1.文本框 2.单选框 3.多选框 4.下拉框 5.文本域

2.VUE的点击事件中有一个属性,可以取消标签的默认行为

@click.prevent

常用场景: 1. form标签阻止 action 提交

2. a标签阻止 href 属性跳转

例：<input type="submit" value="提交" @click.prevent="formBtn"/>

<body>
		<div id="app">
			<!--1.v-model.number 将输入的内容转化为数值类型  -->
			年龄: <input type="number" v-model.number="ageTest"/>
			<button @click="addNum">加法</button>
			<br>
			<!--2.去除多余的空格  -->
			用户名: <input type="text" v-model.trim="username" />
			用户输入的长度 {{username.length}}
			<br>
			
			<!-- 3.懒加载方式 用户离焦触发 -->
			信息: <input type="text" v-model.lazy="msg" /> {{msg}}
		</div>
		
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el: "#app",
				data: {
					ageTest: '',
					username: '',
					msg: ''
				},
				methods: {
					addNum(){
						this.ageTest = this.ageTest + 1
					}
				}
			})
		</script>
	</body>

VUE生命周期

1.如何理解生命周期

说明: VUE中有一整套完整的VUE对象创建/使用/销毁的流程. 如果用户需要在某个特定的点有特殊的需求,可以对VUE对象进行扩展!

2.生命周期流程图

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试vue生命周期函数</title>
	</head>
	<body>
		
		<!-- 知识梳理:
		 
			1.生命周期函数的方法名称 必须固定.
			2.生命周期函数是VUE对象特有的函数.应该放到根目录下.
			3.当页面渲染成功之后, 一共执行了4个生命周期方法.
				第一类: VUE对象的创建.
					beforeCreate:对象创建前调用
					created: VUE对象已经创建完成之后调用	
				第二类: VUE对象的挂载(渲染)
					beforeMount:  el : "#app",VUE对象在找到@APP标签之前先执行该函数.
					mounted: 当挂载完成(渲染完成),用户可以看到页面数据之后调用该函数
			
			4. 用户修改阶段:
				第三类:
					beforeUpdate: 当用户修改数据 点击"回车" 之后调用该函数
					过渡: 数据已经被修改
					updated: 数据已经被修改之后调用该函数
			5. 销毁阶段:
				 销毁函数,VUE对象默认不会调用. 可以通过函数由用户调用
				 beforeDestroy: 在销毁方法执行前
				 destroyed:     标志着VUE对象已经销毁.
				 
		-->
		<div id="app">
			<h3 v-text="msg"></h3>
			<button @click="destroy">销毁</button>
		</div>
		
		<!--引入js函数类库  -->
		<script src="../js/vue.js"></script>
		<script>
			const app = new Vue({
				el : "#app",
				data : {
					msg: "vue生命周期"
				},
				methods:{
					
				},
				
				//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
				beforeCreate(){
					console.log("beforeCreate")
				},
				//在实例创建完成后被立即调用
				created(){
					console.log("created")
				},
				//在挂载开始之前被调用：相关的 render 函数首次被调用。
				beforeMount(){
					console.log("beforeMount")
				},
				//实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
				mounted(){
					console.log("mounted")	
				},
				//数据更新时调用，发生在虚拟 DOM 打补丁之前
				beforeUpdate(){
					console.log("beforeUpdate")
				},
				//由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
				updated(){
					console.log("updated")
				},
				//实例销毁之前调用。在这一步，实例仍然完全可用
				beforeDestroy(){
					console.log("beforeDestroy")	
				},
				//实例销毁后调用。
				destroyed(){
					console.log("destroyed")
				},
				methods:{
					destroy(){
						this.$destroy()
					}
				}
			})
		</script>
	</body>
</html>

VUE前后端调用

在这里插入图片描述

Ajax特点：拒不刷新，异步访问

Ajax异步原理：

步骤：

1. 用户发起Ajax请求, Ajax内部机制,将请求交给Ajax引擎处理.
2. Ajax引擎接收到用户的请求之后,重写发起一个新的请求.访问后端服务器.
3. 当服务器端接收到了 Ajax请求之后,完成业务处理.之后将数据响应给Ajax引擎.
4. Ajax引擎通过事先约定好的回调函数, 将服务器数据交还给用户.
5.用户在请求的过程中,可以完成自己的任务.
注意事项: 多个Ajax的请求不关注顺序.

GET-带参数(restFul格式)

/* 
				GET方式2: 利用restFul查询数据
				需求:     查询sex=女 age>18
				
				原因: restFul结构越来越受欢迎,则拼接restFul结构 变得繁琐.
				模板字符串:  
					语法: 一对反引号  ``
					取值: ${key} 形式取值
					优势: 保留代码的格式
					
			 */
			let sex2 = "女"
			let age2 = 18
			//let url2 = "http://localhost:8090/axios/user/"+sex2+"/"+age2
			let url2 = `http://localhost:8090/axios/user/${sex2}/${age2}`
			axios.get(url2).then(promise => {
				console.log(promise.data)
			})

loveyouloveyour

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三.day6Vue学习，生命周期，ajax学习

VUE基本用法：1.表单中那些表前可以使用双向数据绑定？双向数据绑定说明：用户可以录入的标签答：1.文本框 2.单选框 3.多选框 4.下拉框 5.文本域2.VUE的点击事件中有一个属性,可以取消标签的默认行为@click.prevent常用场景: 1. form标签阻止 action 提交2. a标签阻止 href 属性跳转例：<input type="submit" value="提交" @click.prevent="formBt...
复制链接

扫一扫