دورة VUE JS للمبتدئين الدرس السادس


فهاد الدرس السادس من دورة VUE JS للمبتدئين غادي نكملو الألة الحاسبة ديالنا فغادي نشوفوا كيفاش غادي نزيدو الفورم لي غادي يكونوا فيها les boutons لي غادي يمكنونا من القيام بجميع العمليات الحسابية.


1- تحديث الألة الحاسبة

دائما فل methods كنزيد  reset لي غادي تمكن من إعادة الآلة الحاسبة للوضع الأولي اي غادي ترجع الأعداد والنتيجة إلى الصفر.
الكود لي زدنا هو :

                                //main.js

new Vue({
    //part 1
    el : '#app',
    data : {
        number1 : 0,
        number2 : 0,
        result : 0,
    },
    methods : {
        //part 2
        addition(){
            return this.result = parseInt(this.number1) + parseInt(this.number2);
        },
        soustraction(){
            return this.result = parseInt(this.number1) - parseInt(this.number2);
        },
        multiplication(){
            return this.result = parseInt(this.number1) * parseInt(this.number2);
        },
        division(){
            if(this.number1 == 0 || this.number2 == 0){
                this.result = 0;
            }else{
                return this.result = Math.round(parseInt(this.number1) / parseInt(this.number2));
            }
        },
        reset(){
            this.number1 = 0;
            this.number2 = 0;
            this.result = 0;
        },
    } 
});
                            

2- إضافة الصفحة الرئيسية

فالملف index.html كنزيد الفورم ديالي لي فيها حقلين كل واحد كياخد رقم وعندي les boutons لي كيمكنوني من القيام بالعمليات الحسابية.
فأول حاجة كنربط الحقول بل les propriétés لي زدنا ف data objet لي هما number1 و number2 باستعمال v-model لي شفناها قبل من بعد كنعرض النتيجة فدبا يلا فتحت الملف index.html فالمتصفح غادي نحصل على هاد النتيجة :



الكود لي زدنا ف index.html هو :

                                <!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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Vue js for beginners</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row mt-4 bg-light p-4">
                <div class="col-md-6 mx-auto">
                    <h3 class="text-info text-center">Calculatrice</h3>
                    <div class="form-group">
                        <label for=""></label>
                        <input type="text" required placeholder="Entrer un nombre" v-model="number1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for=""></label>
                        <input type="text" required placeholder="Entrer un nombre" v-model="number2" class="form-control">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mx-auto">
                            <div class="form-group">
                                <button class="btn btn-success btn-xs">+</button>
                                <button class="btn btn-info btn-xs">-</button>
                                <button class="btn btn-primary btn-xs">x</button>
                                <button class="btn btn-danger btn-xs">/</button>
                                <button class="btn btn-warning btn-xs">CE</button>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-6">
                            <p id="result" class="float-right"><span class="badge badge-dark p-2">{{result}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

3- تفعيل العمليات الحسابية

فدبا يلا لاحظتي وخا تضغط على les boutons مكتحصلش على النتيجة حيت مازال ما زدنا ل les boutons les fonctions لي غادي ينفذو.

فغادي نخدم ب v-on:click  لي سبق وشفناها قبل باش غادي نزيد لكل bouton ل fonction ديالو ل addition ل + bouton و soustraction ل - bouton الخ...

فدبا يلا دخلتي اعداد وضغطتي على عملية حسابية غادي تحصل على النتيجة :




الكود لي زدنا ف index.html هو :

                                <!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">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Vue js for beginners</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row mt-4 bg-light p-4">
                <div class="col-md-6 mx-auto">
                    <h3 class="text-info text-center">Calculatrice</h3>
                    <div class="form-group">
                        <label for=""></label>
                        <input type="text" required placeholder="Entrer un nombre" v-model="number1" class="form-control">
                    </div>
                    <div class="form-group">
                        <label for=""></label>
                        <input type="text" required placeholder="Entrer un nombre" v-model="number2" class="form-control">
                    </div>
                    <div class="row">
                        <div class="col-md-6 mx-auto">
                            <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>
                    <div class="row">
                        <div class="col-md-6">
                            <p id="result" class="float-right"><span class="badge badge-dark p-2">{{result}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>