آلة حاسبة بإ ستعمال Vuejs

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;
}
                                                        
                                                    

دروس ذات صلة

VS

آلة حاسبة بإ ستعمال Vuejs

فهاد الدرس الأول من سلسلة vuejs غادي نشوفو كيفاش نقادو آلة حاسبة بإستعمال vuejs فالناس لي مكتعرفش شن...


VS

كيفاش نصاوب Note App ب Vuejs

فهاد الدرس الثاني من سلسلة vuejs غادي نشوفو كيفاش نقادو Note App بإستعمال vuejs فحنا فهاد الدرس ال...


VS

Application de gestion de dépenses باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو une simple application كتدير la gestion de d...


VS

Ecommerce App باستعمال Vuejs

فهاد الدرس الجديد من سلسلة vuejs غادي نشوفو كيفاش نقادو Ecommerce App المستخدم كيزيد des produits فل...


VS

login système ب laravel & vue js الجزء الأول

فهاد الدرس الجديد غادي نشوفوا كيفاش نقادو login système ب laravel & vue js فل projet بسيط غادي يكون...


VS

LOGIN SYSTÈME ب LARAVEL & VUE JS الجزء الثاني

فهاد الجزء الثاني من LOGIN SYSTÈME ب LARAVEL & VUE JS غادي نشوفوا كيفاش نزيدو les components vue js...


VS

login système + Vote systéme ب laravel & vue js الجزء الثالت

فهاد الجزء الثالت من login système + vote systéme ب laravel & vue js كيف قلنا فل ل video...


VS

LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS الجزء الرابع

فهاد الجزء الرابع من LOGIN SYSTÈME + VOTE SYSTÉME ب LARAVEL & VUE JS غادي نعرضوا les posts ديال...


VS

CRUD application ب php & vuejs الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادوا CRUD application ب php و vue js ولي سبق ودرناها...


VS

CRUD application ب php & vuejs الجزء الثاني

فهاد الجزء الثاني من CRUD application ب php و vue js غادي نكملوا ل projet ديالنا وندوزو للجزء الخاص...