Vue作品（TodoList）展示和实现教程

最新推荐文章于 2024-01-07 15:55:30 发布

原创

最新推荐文章于 2024-01-07 15:55:30 发布 · 658 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文详细介绍了一个使用Vue.js构建的应用实例，包括登录页面的设计、主页面的TodoList功能实现、个人中心的修改密码功能，以及时间显示组件的开发。通过具体代码示例，读者可以学习到如何构建响应式用户界面、利用Vue的特性来处理用户交互和数据更新。

1.Vue作品页面展示

（1）登陆页面

（2）主页面

（3）个人中心（修改密码功能）

（4）时间显示

Vue作品实现教程

1.登录页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录页面</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
			integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style>
			.login_frame {
     
     
				width: 600px;
				height: 400px;
				margin: 200px auto;
				background-color: beige;
			}
			
			.login_main {
     
     
				width: 400px;
				height: 300px;
				margin: 140px 170px;
			}
		</style>
	</head>
	<body>
		<div class="login_frame row">
			<form class="login_main col-md-6" action="http://localhost:80/login/log">
				<label>用户名:<input type="text" class="form-control" required name="username" id="username"
						style="width: 133%"></label>
				<label>密码:<input type="text" class="form-control" required name="password" id="password"
						style="width: 133%"></label><br>
				<input type="reset" id="cz_btn" class=" btn btn-primary" value="重置" style="margin-left: 15px">
				<input type="submit" id="dl_btn" class=" btn btn-success" value="登录" style="margin-left: 45px">
				<a href=