vue增强

最新推荐文章于 2024-07-16 15:41:31 发布

是yzyya

最新推荐文章于 2024-07-16 15:41:31 发布

阅读量152

点赞数

文章标签： html

本文链接：https://blog.csdn.net/yzy980611/article/details/119924276

版权

1.MVC思想说明

2.vue的基本用法

2.1表单双向数据绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单的双向数据绑定</title>
	</head>
	<body>
		<div id="app">
			<!-- 
			问题：表单中的那些标签可以使用双向数据绑定
			     双向数据绑定说明：用户可以录入的标签。
				 1.input 2.单选框 3.多选框  4.下拉框 5.文本域
			 -->
			 <form action="xxx">
				 <div>
					 用户名：<input type="text" v-model="username" />
				 </div>
				 <div>
					性别：<input type="radio" value="男" v-model="sex" name="sex"/>男
					 <input type="radio" value="女" v-model="sex" name="sex"/>女
				 </div>
				 <div>
					 爱好：
					 <input type="checkbox" name="hobby" v-model="hobby" value="敲代码" />敲代码
				     <input type="checkbox" name="hobby" v-model="hobby" value="打游戏" />打游戏
					 <input type="checkbox" name="hobby" v-model="hobby" value="打豆豆" />打豆豆
				 </div>
				 <div>
					 <!--
					  vue的点击事件中有过一个方法，
					  可以使用prevent取消标签的默认行为
					   -->
					 <input type="submit" value="提交" @click.prevent="formbtn"/>
				 </div>
			 </form>
		</div>
		<div>
			<script src="../js/vue.js"></script>
			<script>
						 const app =new Vue({
							 el:"#app",
							data:{
							username:'',
							sex:'女',
							hobby:[]
							 },
							 methods:{
								 formbtn(){
									 alert("点击按钮 提交数据")
								 }
							 }
							 })
							 
			</script>
		</div>
	</body>
</html>

2.2常用双向数据绑定属性

v-model.number:把内容转换为数值类型

v-model.trim ：去除文本框里的空格

v-model.lazy：懒加载

@click.prevent

2.3 vue生命周期说明（面试题！！！！）

2.3.1如何理解生命周期

说明：vue中有一整套完整的VUE对象创建/使用/销毁的流程。如果用户需要在某个特定的点，对vue对象进行扩展！！

知识梳理：

1.生命周期函数的方法名称必须固定。

2.声明周期函数是vue特有的函数，应该放到根目录下

3.当页面渲染成功后，一共执行了4个声明周期的方法

第一类：表示vue对象的创建。

beforeCreate:对象创建前调用

created: vue对象创建完成后调用

第二类：表示vue对象的挂载（渲染）

beforeMount： el :"#app",vue对象在找到@App之前执行

Mounted：当挂载完成(渲染完成)，用户可以看到页面数据之后，调用该函数

4.用户修改的阶段：

第三类：

beforeupdate：当用户修改数据点击回车之后，调用该函数

过度：数据已经被修改

updated：数据已经被修改之后调用该函数

5.用户销毁阶段（一般不会做）

销毁函数，vue对象默认不会调用，可以通过函数由用户调用

beforeDestroy：在销毁函数之前。

destroyed：标志着vue对象已经销毁。

3.vue 前后端调用

3.1 前后端调用流程

3.2 Ajax

Ajax即Asynchronous Javascript And XML（异步JavaScript和XML）在 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: THML或 XHTML, CSS, JAVA Script, DOM, XML, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

3.2.1Ajax 异步原理

请求同步说明：

用户向服务器发起请求，如果服务器正忙，这是程序处于等待的状态，这时页面处于加载的状态，同时用户不能操作。

为了让用户的体验更好，一般采用异步。

请求为什么可以异步？？

步骤：

1.用户发起Ajax请求时，Ajax内部机制，将请求交给Ajax引擎处理

2.Ajax引擎接受到请求，重新发送一个请求，访问后台服务器

3.当服务器接受到了Ajax请求之后，完成业务处理，之后将数据响应给Ajax引擎

4.Ajax引擎通过事先约定好的回调函数，将服务器数据，交还给用户。

5.用户在请求过程中，可以完成自己的业务

注意事项：多个Ajax请求不关注顺序

3.3 Axios入门案例

3.3.1编辑页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios入门案例</title>
	</head>
	<body>
		<!-- 使用步骤：
		 1.导入JS函数类库
		 2.发起Ajax请求，之后业务处理-->
		 
		 <!-- 
		 1.请求类型
		  1.get执行查询业务
		  2.post执行form表单提交(登录、新增)
		  3.put执行修改操作
		  4.delete  执行删除业务
		  
		  2.axios语法：
		  axios.get(url地址信息，"用户参数信息")
		  .then（function(args){
			console.log(args)
		  }）
		  
		  3.args为了统筹返回值的获取方式。
		  axios为了统筹返回值的获取方式，
		  将所有返回值数据利用promise对象返回
		  -->
		
		 <script src="../js/axios.js"></script>
		 <!-- 案例1：利用axios获取后台用户列表信息 -->
		 <script>
			axios.get("http://localhost:8090/findAll")
			.then(function(promise){
				console.log(promise)
				// console.log(promise.data)
			})
		 </script>
	</body>
</html>

3.3.2 开启跨域

是yzyya

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue增强

1.MVC思想说明2.vue的基本用法2.1表单双向数据绑定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>表单的双向数据绑定</title> </head> <body> <div id="app"> <!-- 问题：表单中的那些标签可以使用双向数据绑定 .
复制链接

扫一扫