آلة حاسبة بإ ستعمال Vuejs
منذ 5 سنوات
imadbelasri
Vuejs
VS
فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شنو هي Vuejs فهي javascript framework لي كتمكن من بناء des interfaces réactive يعني المحتوى كيتغير بلا متحتاج تدير refresh للصفحة ديالك للمزيد من المعلومات شوف الموقع ديالهم من هنا فحنا فهاد الدرس البسيط غادي نقادو آلة حاسبة بسيطة المهم منها هو تعرف les bases ديال Vuejs.
نظرة سريعة بالفيديو
1- الملف index.html
أول حاجة غادي تزيد مشروع جديد فين ما بغيتي و سميه لي بغيتي من بعد زيد فيه 3 ملفات واحد index.html و style.css و script.js من بعد فتحو ف navigateur من بعد غادي تمشي للملف index.php غادي تزيد فيه الكود لي فيه الفورم لي كتمكن المستخدم باش يدخل الأعداد ففVuejs كنحدد ال partie لي غادي نتحكم فيها ب Vuejs بإعطاءها ال id app وهادشي لي عطينا ل div لي عندها ل class row منبعد عندي الفورم لي كنحدد ملي يديرلها المستخدم submit كنمنعها باش تدير refresh ب directive v-on:submit.prevent وملي كندير submit للفورم كتنفد ل fonction calcResult من بعد عندي input text لي كنخدم بل
v-model باش كنربطها ب deux variables سميتهم number1 و number2 ولي غادي يكونو فالملف script.js منبعد عندي les boutons ديال العمليات كل وحدة ملي كنكليكي عليها كتنفد fonction وعندي resultat لي كتعرض منبعد مكنسترجع ل variable result كلهم غادي يكونو فالملف script.js الكود ديال الملف هو :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Vuejs-Calc</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Accueil <span class="sr-only"></span></a></li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row" id="app">
<div class="col-md-6 col-md-offset-3">
<div class="panel panel-default">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h3 class="text-info text-center">Calculatrice</h3>
<form class="form" style="padding:10px;" v-on:submit.prevent="calcResult">
<div class="form-group">
<label for=""></label>
<input type="text" placeholder="Entrer un nombre" v-model="number1" class="form-control">
</div>
<div class="form-group">
<label for=""></label>
<input type="text" placeholder="Entrer un nombre" v-model="number2" class="form-control">
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="form-group">
<button class="btn btn-success btn-xs" v-on:click="addition">+</button>
<button class="btn btn-info btn-xs" v-on:click="soustraction">-</button>
<button class="btn btn-primary btn-xs" v-on:click="multiplication">x</button>
<button class="btn btn-danger btn-xs" v-on:click="division">/</button>
<button class="btn btn-warning btn-xs" v-on:click="reset">CE</button>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-md-4 col-md-offset-2">
<p id="result"><span class="pull-right">{{result}}</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://unpkg.com/vue"></script>
<script src="script.js"></script>
</body>
</html>
2- الملف script.js
فالملف script.js كنديرinstantiation ديال ل objet من la classe Vue منبعد داخل l'objet كنعطي ل el لي هو element مول ل id app من بعد ف data كنديكلاري les variables لي غادي نحتاج منبعد ف methods عندي les fonctions لي غادي نحتاج ولي ملي كنكليكي على كل bouton مرتبطة بها شي fonction كتنفد عملية ولي كتاخد les deux nombres وكتدير العملية على حساب شنو اختارينا وكتبقى ل fonction reset لي فقط كترجعنا ل état initial فstructure ديال لobjet vuejs هي هادي لكن مازال حوايجين اخرين متطرقنالهمش هنا وغادي نشوفوهم ف des projets مستقبلا الكود ديال الملف هو :
new Vue({
el: "#app",
data: {
number1: 0,
number2: 0,
result: 0
},
methods: {
addition: function() {
return this.result = Number(parseInt(this.number1) + parseInt(this.number2));
},
soustraction: function() {
return this.result = Number(this.number1 - this.number2);
},
multiplication: function() {
return this.result = Number(this.number1 * this.number2);
},
division: function() {
if (this.number1 == 0 || this.number2 == 0) {
return this.result = 0;
} else {
return this.result = Number(parseInt(this.number1) / parseInt(this.number2));
}
},
reset: function() {
this.result = 0;
this.number1 = 0;
this.number2 = 0;
}
}
});
3- الملف style.css
فيه غادي يكونوا les styles ديالنا لي غادي نضيفوا بهم تغييرات على design ديال la page ديالنا الكود ديال الملف هو:
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.panel {
background: beige;
}
#result {
height: 40px;
width: 150px;
background: #8D8D81;
color: #ffffff;
padding: 10px;
border-radius: 2px;
}
.btn {
padding-left: 10px;
padding-right: 10px;
}