vue.js 初探之用户管理

最新推荐文章于 2025-05-25 15:10:00 发布

string_user_get_set

最新推荐文章于 2025-05-25 15:10:00 发布

阅读量559

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js js

本文链接：https://blog.youkuaiyun.com/string_user_get_set/article/details/77017177

本文介绍了Vue.js的基础概念及如何快速搭建一个简单的Vue应用。通过一个用户信息管理的例子展示了Vue的数据绑定、事件处理和列表循环等核心特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是vue.js:

是一套构建用户界面的渐进式框架。vue的核心库之专注于视图层，并且很容易和第三方或者现有的项目集成。

官网api文档：https://vuefe.cn/v2/guide/

Hello Vue:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>vue起步</title>
		<script type="text/javascript" src="js/vue.js" ></script>
		
	</head>
	<body>
		<!--View-->
		<div id="aaa">
			<p>{{ message }}</p>
			<input type="text" v-model="message"/>   <!--双向绑定-->
                                                    
		</div>
		
		<script type="text/javascript">
		 	//配置项
		 	Vue.config.devtools = false; //禁止检查代码
			Vue.config.productionTip = false; 		 //阻止启动生成生产信息
		
		  	// 创建一个 Vue 实例或 "ViewModel"
        	// 它连接 View 与 Model
			var app = new Vue({   //
  				el: '#aaa',
  				data: {
    				message: 'Hello Vue!'   //Model
  				}
			});
		</script>
	</body>
</html>

注：

1.<script type="text/javascript" src="js/vue.js" ></script> 引入vue.js文件类似与引用jqery文件。

2.{{ message }}：数据绑定最基本的形式，就是使用 “mustache” 语法

3.v-model="message"：双向绑定

运行结果:

用户管理:

用户管理：bootstrap+vue.js实现用信息的管理

view：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>管理小程序</title>

		<script type="text/javascript" src="js/vue.js"></script>
		<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>

		<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.css" />
		<script type="text/javascript" src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<script>
			window.onload = function() {
				var vm = new Vue({
					el: ".container",
					data: {
						users: [{
							name: "zwc",
							age: 18,
							emial: "850031909@qq.com"
						}, {
							name: "张文超",
							age: 22,
							emial: "2578356724@qq.com"
						}],
						user: {},
						nowIndex: -1
					},
					methods: {
						addUserInfo: function() {
							this.users.push(this.user);
							this.user = {};
						},
						delUser() {
							if(this.nowIndex !== -1) {
								this.users.splice(this.nowIndex, 1);
							} else {
								this.users = [];
							}

						}
					}
				});
			}
		</script>
	</head>

	<body>
		<div class='container'>
			<h2 class="text-center">添加用户</h2>
			<form class="form-horizontal">
				<div class="form-group">
					<label for="name" class="control-label col-sm-2 col-sm-offset-1">姓 名:</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="name" v-model="user.name" placeholder="请输入姓名..." />
					</div>
				</div>
				<div class="form-group">
					<label for="age" class="control-label col-sm-2 col-sm-offset-1">年 龄:</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="age" v-model="user.age" placeholder="请输入年 龄..." />
					</div>
				</div>
				<div class="form-group">
					<label for="emial" class="control-label col-sm-2 col-sm-offset-1">邮 箱:</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" id="emial" v-model="user.emial" placeholder="请输入邮 箱..." />
					</div>
				</div>
				<div class="form-group text-center">
					<button type="button" vaule="添  加" class="btn btn-primary" v-on:click="addUserInfo">添  加</button>
					<button type="reset" vaule="重  置" class="btn btn-primary">重  置</button>
				</div>
			</form>
			<hr />

			<table class='table table-bordered table-hover'>
				<caption class="h3 text-center text-info">用户列表</caption>
				<thead>
					<th class='text-center'>序号</th>
					<th class='text-center'>姓名</th>
					<th class='text-center'>年龄</th>
					<th class='text-center'>邮箱</th>
					<th class='text-center'>操作</th>
				</thead>
				<tbody>
					<tr v-for="(user,index) in users" class="text-center">
						<td>{{index+1}}</td>
						<td>{{user.name}}</td>
						<td>{{user.age}}</td>
						<td>{{user.emial}}</td>
						<td>
							<a href="#" style="color: red;" data-toggle="modal" data-target="#del" v-on:click="nowIndex=index">删除</a>
						</td>
					</tr>
					<tr class="text-right">
						<td colspan="5">
							<button class="btn btn-danger btn-sm" data-toggle="modal" data-target="#del" v-on:click="nowIndex=-1">
			 					删除所有
			 				</button>
						</td>
					</tr>
				</tbody>
			</table>

			<!--删除提示信息模态框-->
			<div class="modal" id="del">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button class="close" data-dismiss="modal">
							<span>×</span>
						</button>
							<h4 class="modal-title" v-show="nowIndex!=-1">确认要删除用户：{{users[nowIndex]?users[nowIndex].name:''}}吗?</h4>
							<h4 class="modal-title" v-show="nowIndex==-1">确认要删除全部用户吗?</h4>
						</div>
						<div class="modal-body text-right">
							<button class="btn btn-primary" data-dismiss="modal">取消</button>
							<button class="btn btn-primary" data-dismiss="modal" v-on:click="delUser">确定</button>
						</div>
					</div>
				</div>
			</div>
		</div>

	</body>

</html>

注：

1.v-on:click：vue事件。

2.v-for：循环指令。

3.v-show：隐藏/显示指令(display：none;)

运行结果: