في الدرس السابق
تعرفنا على قدرات الأستاذ vue الخارقة في ازدواجية ربط البيانات [two-way data binding] ومدى سهولتها…
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
يلا نبدأ
ده الشكل اللي هيتم تنفيذه:
بالنسبة للتصميم فهو ليس تصميمي الخاص، يمكنكم نسخ الـlayout التالي:
انسخ الإطار التالي
<!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>Document</title>
<!--Fontawesome CDN-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<!-- Scripts needed from Content Delivery Network [CDN] -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!-- vuejs -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script></head>
<body>
<div id="my-app">
<!-- code here -->
</div>
<script src="app.js"></script>
</body>
</html>
وبإضافة الـCSS:
إضافة CSS styles
@import url('https://fonts.googleapis.com/css?family=Numans');
html,body{
background-image: url('http://getwallpapers.com/wallpaper/full/a/5/d/544750.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100%;
font-family: 'Numans', sans-serif;
}
.container{
height: 100%;
align-content: center;
}
.card{
max-height: 570px;
margin-top: auto;
margin-bottom: auto;
width: 400px;
background-color: rgba(0,0,0,0.5) !important;
}
.social_icon span{
font-size: 60px;
margin-left: 10px;
color: #FFC312;
}
.social_icon span:hover{
color: white;
cursor: pointer;
}
.card-header h3{
color: white;
}
.social_icon{
position: absolute;
right: 20px;
top: -45px;
}
.input-group-prepend span{
width: 50px;
background-color: #FFC312;
color: black;
border:0 !important;
}
input:focus{
outline: 0 0 0 0 !important;
box-shadow: 0 0 0 0 !important;
}
.remember{
color: white;
}
.remember input
{
width: 20px;
height: 20px;
margin-left: 15px;
margin-right: 5px;
}
.login_btn{
color: black;
background-color: #FFC312;
width: 100px;
}
.login_btn:hover{
color: black;
background-color: white;
}
.links{
color: white;
}
.links a{
margin-left: 4px;
}
لنقم بإضافة تصميم كارت تسجيل الدخول داخل الصفحة:
تصميم الكارت
//index.html
<div id="my-app">
<!-- code here -->
<div class="container mt-5 pt-5">
<div class="d-flex justify-content-center h-100">
<div class="card">
<div class="card-header">
<h3>Sign In</h3>
<div class="d-flex justify-content-end social_icon">
<span><i class="fab fa-facebook-square"></i></span>
<span><i class="fab fa-google-plus-square"></i></span>
<span><i class="fab fa-twitter-square"></i></span>
</div>
</div>
<div class="card-body">
<form>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-user"></i></span>
</div>
<!-- حقل الاسم -->
<input type="text" class="form-control" placeholder="username">
</div>
<div class="input-group form-group">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-key"></i></span>
</div>
<!--حقل الباسوورد-->
<input type="password" class="form-control" placeholder="password">
</div>
<div class="row align-items-center remember">
<input type="checkbox">Remember Me
</div>
<div class="form-group">
<input type="submit" value="Login" class="btn float-right login_btn">
</div>
</form>
</div>
<div class="card-footer">
<div class="d-flex justify-content-center links">
Don't have an account?<a href="#">Sign Up</a>
</div>
<div class="d-flex justify-content-center">
<a href="#">Forgot your password?</a>
</div>
</div>
</div>
</div>
</div>
بالنسبة لحقل الاسم نود تعريف متغير name لربطه بالحقل
التعديل في ملف main.js
:
الآن بإمكاننا استخدام v-model لكل input لربطهما بالمتغيرات:
نضيف قبل card-footer
الكود التالي لعرض عدد الحروف للمتغير name:
// index.html
<!-- // ….. -->
<!-- validation experiment -->
<div class="d-flex flex-column justify-content-center pt-4">
<p class="links text-success align-self-center">
name characters: {{ name.length }}
</p>
</div>
<!-- <div class="card-footer"> -->
الشكل حتى الآن:
لنجرب معا اضافة validation بسيط وظيفته تنبيهنا للحد الأقصى من عدد حروف الاسم مثلا،
داخل ملف app.js
:
نستخدم الـevent modifier الذي نريده لاستدعاء دالة التحقق (characterChecker) => ممكن نستخدمkeyup
أو keydown
نعمل refresh ونجرب:
الأفكار كثيرة جدا، يمكنكم التلاعب بالمزيد!
انتظرونا في الدروس القادمة!