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


دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد ل propriété وحدة اخرى لي هي watch. فكيف باين من إسمها ف watch كتراقب واحد ل propriété ف data objet وأول مكتغير القيمة ديالها كتعرض القيمة الجديدة.


1- إضافة ل WATCH PROPERTY ل MAIN.JS

فغادي نمشي ل main.js غادي نزيد جوج ديال les propriétés ف data objet لي هما dh و dollar فهنا غادي نحولوا من الدرهم للدولار والعكس صحيح.

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

                                //main.js

new Vue({
    el : '#app',
    data : {
        dollar : 0,
        dh : 0
    },
});
                            

2- إضافة ل WATCH PROPERTY ل MAIN.JS تتمة

غادي نزيد watch منبعد data داخل ل watch غادي نزيد 
2 ديال les fonctions عندي dh و dollar لي كياخدوا القيم لي دخلنا فالحقول وكيديروا التحويل.
فهنا خص اسم ل fonction داخل watch  يكون هو نفس اسم ل propriété لي مرتبطة بها.

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

                                //main.js

new Vue({
    el : '#app',
    data : {
        dollar : 0,
        dh : 0
    },
    watch : {
        dh(val){
            this.dh = val;
            this.dollar = Math.round(this.dh / 9.90);
        },
        dollar(val){
            this.dollar = val;
            this.dh = Math.round(this.dollar * 9.90);
        }
    }
});
                            

3- تنفيذ ل les FONCTION لي زدت ف watch

باش ندير التحويل غادي نرجع ل index.html غادي نزيد فورم فيها جوج دالحقول كل واحد مرتبط ب propriété لي هما dh و dollar.
 فاش كنبدا نكتب داخل الحقل كنشوف القيم بعد التحويل كيتعرضوا فنفس الوقت كيف كنشوف الصورة :


فهدا هو الدور ديال watch كتمكن باش ن exécuter les fonctions بلا منحتاج شي événement.

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

 

                                new Vue({
    el : '#app',
    data : {
        dollar : 0,
        dh : 0
    },
    watch : {
        dh(val){
            this.dh = val;
            this.dollar = Math.round(this.dh / 9.90);
        },
        dollar(val){
            this.dollar = val;
            this.dh = Math.round(this.dollar * 9.90);
        }
    }
});