Step 1: tạo giao diện và thu thập dữ liệu người dùng bằng v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Đăng ký tài khoản</title>
<!-- Liên kết CSS của Bootstrap -->
<link href="vendor/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<!-- Liên kết CSS FontAwesome -->
<link href="vendor/font-awesome/css/font-awesome.min.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="app">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Đăng ký tài khoản</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<form name="frmDangKy" id="frmDangKy" method="post" action="#">
<div class="form-group">
<label for="">Họ tên</label>
<input type="text" name="txtHoTen" id="txtHoTen" class="form-control" v-model="hoten" />
</div>
<div class="form-group">
<label for="">Số điện thoại</label>
<input type="text" name="txtSoDienThoai" id="txtSoDienThoai" class="form-control" v-model="sodienthoai" />
</div>
<div class="form-group">
<button type="submit" name="btnDangKy" id="btnDangKy" class="btn btn-primary">
<i class="fa fa-user-plus" aria-hidden="true"></i> Đăng ký
</button>
</div>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="alert alert-primary" role="alert">
Thông tin của bạn vừa nhập là: <b>{{ hoten }}</b> - <b>{{ sodienthoai }}</b>
</div>
</div>
</div>
</div>
</div>
<!-- Liên kết thư viện JQUERY -->
<script src="vendor/jquery/jquery.min.js"></script>
<!-- Liên kết thư viện Bootstrap -->
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!-- Liên kết VUEJS -->
<script src="vendor/vuejs/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
hoten: '',
sodienthoai: ''
},
methods: {
}
});
</script>
</body>
</html>
|