Vue基础及实现用户的查询列表和更新操作

最新推荐文章于 2024-09-12 12:37:49 发布
最新推荐文章于 2024-09-12 12:37:49 发布
阅读量831 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45067832/article/details/109141725
版权

1、Vue概述
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合

2、Vue的快速入门

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>快速入门</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}} <!--Vue插值表达式，把data中定义数据显示到此处-->
		<!--三元运算符-->
		{{false ? "OK":"NO"}}
		<!--数学运算-->
		{{number*3.14}}
		
		<!--插值表达式不支持
		{{var a = 1;}}
		{{if(a=10){}}}-->
		</div>
	</body>
	<script>
		//view model
		//创建Vue对象
		new Vue({
			el:"#app",//由Vue接管id为app区域
			data:{
				message:"Hello Vue!",//注意，此处不用加分号
				number:100
			}
		});
	</script>
</html>

3、Vue的语法
插值表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>插值表达式</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}}
			<!--<input type="button" v-on:click="fun1('Vue v-on')" value="vue的onclick"></input>-->
			<button v-on:click="fun1('Vue v-on')">vue的onclick</button>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				message:"Hello Vue"
			},
			methods:{
				fun1:function(msg){
					alert("Hello");
					this.message=msg;
				}
			}
		});
	</script>
</html>


v-on:keydown

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on:keydown</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			Vue:<input type="text" v-on:keydown="fun($event)">
			<hr />
			传统js:<input type="text" onkeydown="showKeyCode()" />
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			methods:{
				/*
				 * $event 它是vue中事件对象 和我们传统js的event对象是一致的
				 */
				fun:function(){
					var keyCode = event.keyCode;
					if(keyCode<48 || keyCode>57){
					event.preventDefault();
					}
				}
			}
			
		});
		
		//传统js键盘按下事件
		function showKeyCode(){
			//event对象和我们document对象以及window对象一样，可以不用定义直接使用
			var keyCode = event.keyCode;
			if(keyCode<48 || keyCode>57){
				//不让键盘的按键起作用
				event.preventDefault();
			}
//			alert(keyCode); 
//			if(event.keyCode == 13){
//				alert("你按的是回车");
//			}
		};
	</script>
</html>

v-on:onmouseover

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on:onmouseover</title>
		<style>
			#div{
				background-color: red;
				width: 300px;
				height: 200px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-on:mouseover="fun1" id="div">
				<textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
			</div>
			
			<!--传统的js-->
			<!--<div onmouseover="divmouseover()" id="div">
				<textarea onmouseover="textareamouseover()">这是一个文件域</textarea>
			</div>-->
		</div>
	</body>
	<script>
		/*
		 * @事件名称就是 v-on 事件名称的简写
		 */
		new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert("鼠标悬停在div上了");
				},
				fun2:function(event){
					alert("鼠标悬停在textarea上了"); 
					event.stopPropagation();
				}  
			}
		});
		
		//传统js方式
		function divmouseover(){
			alert("鼠标移动到div上");
		}
		function textareamouseover(){
			alert("鼠标移动到了textarea上");
			event.stopPropagation();
		}
	</script>
</html>

v-on:事件修饰符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-on:事件修饰符</title>
		<style>
			#div{
				background-color: red;
				width: 300px;
				height: 200px;
			}
		</style>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<form @submit.prevent action="http://www.baidu.com" method="post">
				<input  type="submit" value="提交"/>
			</form>
			<hr />
			<div @mouseover="fun1" id="div">
				<textarea @mouseover.stop="fun2($event)">这是一个文件域</textarea>
			</div>
			<!--传统js-->
			<!--<form action="http://www.baidu.com/" method="post" onsubmit="checkForm()">
				<input  type="submit" value="提交"/>
			</form>-->
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			methods:{
				fun1:function(){
					alert("鼠标悬停在div上了");
				},
				fun2:function(event){
					alert("鼠标悬停在textarea上了"); 
//					event.stopPropagation();
				}  
			}
		});
	
		//传统js方式
		function checkForm(){
			alert(1);
			//表单验证必须有一个明确的boolean类型返回值
			//在引用验证方法时必须加上return方法名称
			return false;
		}
	</script>
</html>

v-on:按键修饰符

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-on:按键修饰符</title>

		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			Vue:<input type="text" @keydown.enter="fun1">
			<hr />
			传统js:<input type="text" onkeydown="showKeyCode()">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			methods:{
			    fun1:function(){
			        alert("按下的是回车");
				}
			}
		});


	//传统js键盘按下事件
		function showKeyCode(){
//			//event对象和我们document对象以及window对象一样，可以不用定义直接使用
			var keyCode = event.keyCode;
//			if(keyCode<48 || keyCode>57){
//				//不让键盘的按键起作用
//				event.preventDefault();
//			}
//			alert(keyCode); 
			if(event.keyCode == 13){
				alert("你按的是回车");
			}
		}
	</script>

</html>

v-text与v-html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>v-text与v-html</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<div v-text="message"></div>
			<div v-html="message"></div>
			<!--<div id="div1"></div>
			<div id="div2"></div>-->
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				message:"<h1>Hello Vue</h1>"
			}
		});
		
		//传统js的innerText和innerHtml
		window.onload = function(){
			document.getElementById("div1").innerHTML="<h1>Hello</h1>"
			document.getElementById("div2").innerText="<h1>Hello</h1>"
		}
	</script>
</html>

v-bind的使用

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-bind的使用</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<font size="5" v-bind:color="ys1">传智播客</font>
			<font size="5" :color="ys2">黑马程序员</font>
		</div>
	</body>
	<script>
		//view model
		/*插值表达式不能用于html标签的属性取值
		例如：<font size="5" color="{{ys1}}">传智播客</font>
		* */
		//要想给html标签的属性设置变量的值，需要使用v-bind
		//v-bind也可以简化写法   直接使用:
		new Vue({
			el:"#app",
			data:{
			    ys1:"red",
				ys2:"green"
			}
		})
	</script>

</html>

v-model

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-model</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<form action="" method="post">
				用户名：<input type="text" name="username" v-model="user.username"><br/>
				密码：<input type="text" name="password" v-model="user.password"><br/>
			</form>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
				user:{
				    username:"test",
					password:"1234"
				}
			}
		});
	</script>
</html>

v-for遍历数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历数组</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(item,index) in arr ">{{item}}={{index}} </li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    arr:[1,2,3,4,5]
			}
		});
	</script>
</html>

v-for遍历对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(key,value) in product ">{{value}}===={{key}} </li>
			</ul>
		</div>
	</body>
	<script>
		//view model
        new Vue({
            el:"#app",
            data:{
               product:{
                   id:1,
				   name:"笔记本电脑",
				   price:5000
			   }
            }
        })
	</script>
</html>


<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>v-for遍历对象</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			<table border="1">
				<tr>
					<td>序号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product,index) in products ">
					<td>{{index}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
        new Vue({
            el:"#app",
            data:{
                products:[
                	{ id:1,name:"笔记本电脑",price:5000 },
                    { id:2,name:"手机",price:3000 },
                    { id:3,name:"电视",price:4000 }
                ]
            }
        })
	</script>

</html>

v-if与v-show

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>v-if与v-show</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>
	<body>
		<div id="app">
			<span v-if="flag">传智播客</span>
			<span v-show="flag">itcast</span>
			<button @click="toggle">切换</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:"#app",
			data:{
			    flag:false
			},
			methods:{
			    toggle:function(){
			        this.flag = !this.flag;
				}
			}
		})
	</script>
</html>

vuejs生命周期

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="js/vuejs-2.5.16.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据：' + obj.message)
			console.log('挂载的对象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		// vm.message = "good...";
		vm.$destroy();
	</script>

</html>

Vue的生命周期：

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

案例
实现用户的查询列表和更新操作
前端：Vue
后端：ssm
Github地址：

https://github.com/cxy629/Vue
一个发际线正在升高的人
关注
vue实现搜索功能
10-16
主要为大家详细介绍了vue实现搜索功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
MySQL表更新操作
08-01 221
1、 使用insert语句向表插入一条新记录，语法是：insert into 表名 [(字段列表)] values（值列表）。 2、 使用set 语句更新操作与字符集，例如set char...
Vue2 基本增删改查界面
最新发布
山顶听风的博客
09-12 533
本文是前端一个基本的增删改查的例子，供自己梳理思路，不涉及复杂业务操作。
Vue开发实例（17）之实现用户列表
编程界明世隐的博客
05-25 5384
Vue开发实例（17）之实现用户列表 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航 ✪  Vue开发实例目录总索引 ◄ 上一篇【16】创建标签页 ► 下一篇【18】用户列表的增删改
Vue开发实例（十一）用户列表的实现与操作
Daniel
03-03 1180
用户列表的实现，表头自定义样式、增删改查、内滚动等操作，
Vue电商项目练习-4 用户列表实现
程西西
08-01 843
用户列表实现效果设计思路具体实现展示user组件user组件布局结构面包屑导航区卡片视图区搜索框获取用户数据渲染用户列表数据状态列按需显示操作列设计分页效果实现未完待续 实现效果 设计思路 面包屑导航区 breadcrumb 卡片区域 card table dialog switch 功能 获取数据 搜索 添加用户 编辑用户 删除用户 具体实现 展示user组件 在 components/user/ 创建 User.vue 组件 在 router/index.js 中 导入组件、定
使用vue基础语句实现学生的增删改操作
04-22
在本文中，我们将深入探讨如何使用Vue.js的基础语句来实现学生管理系统的增删改功能，并结合实时日志记录学生信息的变化。Vue.js是一个流行的前端JavaScript框架，它提供了声明式的数据绑定和组件化的能力，使得构建...
Vue.js实现列表清单的操作方法
10-19
如文中所述，使用Bootstrap框架来快速搭建响应式布局，配合Vue.js的数据绑定特性来实现任务列表的添加、显示、编辑和删除等操作。具体地，可以创建一个Vue实例，并在其`data`属性中定义列表数据和相关逻辑处理方法，...
使用 Vue 实现一个虚拟列表的方法
10-16
当滚动发生时，需要实时更新DOM，仅渲染和更新可视区域内的列表项。这通常涉及监听滚动事件，计算新可视区域，并动态创建或销毁DOM元素。为了避免频繁的DOM操作，可以使用Vue的`v-if`或`v-show`指令控制列表项的...
vue.js实现用户评论、登录、注册、及修改信息功能
10-19
对于用户评论功能，Vue.js 提供了便捷的方式来管理评论列表和添加新评论。你可以创建一个数组来存储评论数据，每当用户提交新评论时，将新评论对象添加到数组中。例如： ```javascript data() { return { ...
vue实现百度下拉列表交互操作示例
10-17
具体到本示例，代码中首先通过在`<script>`标签中引入Vue和vue-resource这两个库来为实现百度下拉列表交互操作做准备。Vue用于视图的构建和数据绑定，而vue-resource则用于发起网络请求。 然后，在`<style>`标签中...
vue实现修改图片后实时更新
10-15
今天小编就为大家分享一篇vue实现修改图片后实时更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 数组对象更新
shykevin的博客
04-01 1571
一、概述 在使用数组的时候，数组内部数据发生改变，但是与数组绑定的页面的数据却没有发生变化。 示例代码如下： <template> <div style="margin-left: 10px;"> <div v-for="(item,index) in nameList"> <span>姓名: {{ item.name }...
vue基础学习总结---用户列表案例
厚积薄发.
08-23 839
这篇文章介绍 vue学习总结案例：用户列表案例。本文详细记录了所有步骤，拿来学习是真不错！用到的知识点：vue-cli 创建 vue2 项目；element ui 组件库；axios 拦截器；proxy 跨域接口代理；vuer-router 路由；看完不会你打我。哈哈哈，开玩笑的，不多说，上刺刀！！
vue 列表、查询、添加、编辑
feifei_Tang的博客
12-18 6715
具体细节： 列表：分页、序号列 查询：下拉菜单（后台回显数据） 添加、编辑：Dialog对话框、表单、下拉菜单、表单数据验证 页面： vue： <template> <section class="monitoringpoint"> <section style="margin: 20px 0 0 20px;"> ...
vue导入导出、查询列表 、分页 后台数据交互
zhouhouyong_web的博客
11-18 443
vue+element导入导出、查询列表 、分页后台数据交互 html代码展示 <template> <div class="hello"> <el-header> <div class="container"> <el-link href="/" type="info" :underline="false" class="headle"> <el-image style="
vue更新列表其中一列数据的方法
qq_41758763的博客
10-30 2159
在列表中会对其中一列进行操作，之后需要更新这一列的数据，这个时候我们有两种方法去更新，一种是更新全部，这时候只需要想列表重新获取数据就可以了，但是这种方法需要重新加载整个页面，很不友好，另一种是只更新需要更新的这一列数据，怎么更新呢？ 1、增加一个点击事件 <van-popup get-container="body" v-model="actSheetOpt.show" :title="actSheetOpt.title"
用户操作与表的修改
09-23 264
用户操作：重点 # 为特定的数据库分配有该数据库 操作权限 的用户 mysql>: grant 权限们 on 数据库.表 to 用户名@'主机名' identified by '密码'; # 1）all：所有权限 # 2）oldboy.*：oldboy数据库下所有表 # 3）oldboy@'localhost'：本机可以通过oldboy用户登入 # 4）identified by...
二十七、Vue之Listt[index]添加数据，页面却没有更新的解决办法
panchang199266的博客
04-29 2247
一、问题   一般来说，Model层一旦改变，那么视图层也会随之改变，但是对于List集合有一种例外情况。当我们使用list[index] = 5 来向List中添加数据时，通过控制台我们可以看到数据已经添加成功，但是页面并没有随之刷新。 二、原因   这是因为我们只有使用List方法操作数据，才能让视图层随之改变。List方法包括：push pop shift unshift splice so...
Vue基础教程：品牌列表增删操作详解
资源摘要信息: "Vue基础-品牌列表案例" 是一个以Vue.js框架为基础，实现品牌列表展示、增加和删除功能的实践案例。Vue.js是一个用于构建用户界面的渐进式JavaScript框架，专注于视图层。它通过简洁的API提供高效的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值