دورة VUEJS للمبتدئين الدرس الخامس


فهاد الدرس الخامس من دورة vue js للمبتدئين غادي نشوفوا كيفاش نقادو آلة حاسبة ولي غادي تكون تطبيق لداكشي لي شفنا فالأجزاء السابقة من الدورة ديالنا.


1- إضافة مشروع جديد

فغادي تزيد dossier جديد سميه vue-calc منبعد فيه غادي تزيد جوج ديال الملفات index.html و main.js.

ف main.js غادي تزيد ل instance ديال vue منبعد ف data غادي نزيد ئلاثة ديال les propriétés number1 number2 result
الجوج الأولين غادي يمثلو الأرقام لي غادي نحسبوا والثاني غادي
تكون فيه النتيجة.

الكود لي زدنا ف main.js هو :


                                //main.js

new Vue({
    //part 1
    el : '#app',
    data : {
        number1 : 0,
        number2 : 0,
        result : 0,
    }
});
                            

2- إضافة عملية الجمع

دائما ف main.js غادي نزيد l'objet methods لي غادي يكونوا فيه les fonctions ديالي.

أول وحدة كنزيد هي addition لي غادي تمكن من الجمع فكنحول الرقم الاول ل integer والثاني ل integer  من بعد كنعطي ل result النتيجة فمنبعد غادي نشوفوا كيفاش نعرضوا النتيجة.

الكود لي زدنا هو :

                                //main.js

new Vue({
    //part 1
    el : '#app',
    data : {
        number1 : 0,
        number2 : 0,
        result : 0,
    },
    methods : {
        addition(){
            return this.result = parseInt(this.number1) + parseInt(this.number2);
        }
    } 
});
                            

3- إضافة عملية الطرح

منبعد  كنزيد soustraction لي غادي تمكن من طرح عددين فكنحول الرقم الاول ل integer والثاني ل integer  من بعد كنعطي ل result النتيجة.

الكود لي زدنا هو :

                                //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);
        },
    } 
});
                            

4- إضافة عملية الضرب

منبعد  كنزيد multiplication لي غادي تمكن من ضرب عددين فكنحول الرقم الاول ل integer والثاني ل integer  من بعد كنعطي ل result النتيجة.

الكود لي زدنا هو :

                                    //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);
        },
    } 
});
                                

5- إضافة عملية القسمة

منبعد  كنزيد division لي غادي تمكن من قسمة عددين فالفرق هنا كنتحقق بلي الرقم الأول أو الثاني يلا كان كايساوي صفر فالنتيجة كنعطيها صفر مكانوش فكنحول الرقم الاول ل integer والثاني ل integer  من بعد كنعطي ل result النتيجة.

الكود لي زدنا هو :

                                    //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));
            }
        },
    } 
});