دورة vue js للمبتدئين الدرس الثالت عشر

منذ 5 سنوات imadbelasri Vuejs
VS

فهاد الدرس الثالت عشر من دورة vue js للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا كيفاش نربطو القيم لي غادي ندخلو فالحقول مع ل objet data منبعد غادي نشوفوا كيفاش نزيدو المبالغ لي دخلنا فل arrays لي زدنا قبل سواء gains أو depenses.


1- ربط قيم الحقول مع data objet

فسبق شفنا كيفاش نربطو القيم ديال شي فورم مع data objet فغادي نخدمو ب v-model.
ف data objet لي عندنا على شكل fonction غادي نزيد objet سميتو  data فيه libelle و price لي هما الحقول لي عندنا.
فالحقول كنزيد لكل حقل v-model وكنعطيه ل propriété لي غادي يرتبط بها بالنسبة ل libelle :
data.libelle حيت libelle عندي فل objet data.
 بالنسبة ل price :
data.price حيت price عندي فل objet data.

الكود لي زدنا ف App.vue هو :

                                                    
                                                        //App.vue

<template>
     <div>
        <div class="container">
            <h1 class="text-danger text-center">{{name}}</h1>
            <div class="row">
                <div class="col-md-6 mx-auto">
                    <div class="card mt-3">
                        <div class="card-body bg-light">
                            <div class="form-inline">
                                <div class="form-group">
                                    <input type="text" placeholder="Libellé" v-model="data.libelle" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <input type="text" placeholder="Montant" v-model="data.price" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success btn-sm mr-2"><i class="fa fa-plus"></i></button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-danger btn-sm"><i class="fas fa-minus-square"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-6">
                    <Gains></Gains>
                </div>
                <div class="col-md-6">
                    <Depenses></Depenses>
                </div>
            </div>
        </div>
     </div>
</template>


<script>    
    import Gains from './components/Gains';
    import Depenses from './components/Depenses';
    import Vue from 'vue'; 

    export default{
        name : 'App',
        data(){
            return{
                data : {libelle:'',price:''},
                name : 'Gestion de dépenses'
            }
        },
        components : {
            Gains,
            Depenses
        },
    }
</script>



<style scoped>
    
</style>
                                                    
                                                

2- إضافة les fonctions ف Depenses.vue

داخل لملف Depenses.vue غادي نزيد داخل ل methods ل fonction لي غادي تمكن فاش نضغط على ل bouton يزيد المبلغ لي دخلت ف les depenses.

فالمبلغ غادي يتزاد فل array لي هي depenses منبعد غادي يتعرض ب v-for.

فغادي تخوي depenses من داكشي لي زدنا فيها وغادي نزيدو fonction سميتها addDepense ولي كتاخد data لي هي ل objet لي عندنا ف App.vue.

فدبا مغادي يعطيك والو حيت مازال مرسلنا data objet من App.vue ل Depenses.vue.

الكود لي زدنا ف Depenses.vue هو :

                                                        
                                                            //Depenses.vue

<template>
    <div>
        <h3 class="text-info">Dépenses</h3>
        <hr>
        <ul class="list-group">
            <li class="list-group-item" v-for="(dep,index) in depenses" v-bind:key="index">
                {{dep.libelle}} {{dep.price}} 
                <span><i class="fa fa-times" @click="clicked(index)"></i></span>
            </li>
        </ul>
    </div>
</template>


<script>
    export default{
        name : 'Depenses',
        data(){
            return {
                depenses : []
            }
        },
        methods:{
            addDepense(){
                this.depenses.push(this.data);
            }   
        },
    }
</script>

<style scoped>
   i:hover{
       cursor: pointer;
   }
</style>
                                                        
                                                    

3- إضافة les fonctions ف Gains.vue

داخل لملف Gains.vue غادي نزيد داخل ل methods ل fonction لي غادي تمكن فاش نضغط على ل bouton + يزيد المبلغ لي دخلت ف les gains.

فالمبلغ غادي يتزاد فل array لي هي gains منبعد غادي يتعرض ب v-for.

فغادي تخوي gains من داكشي لي زدنا فيها وغادي نزيدو fonction سميتها addGains ولي كتاخد data لي هي ل objet لي عندنا ف App.vue.

فدبا مغادي يعطيك والو حيت مازال مرسلنا data objet من App.vue ل Gains.vue.

الكود لي زدنا ف Gains.vue هو :

                                                        
                                                            //Gains.vue

<template>
    <div>
        <h3 class="text-info">Gains</h3>
        <hr>
        <ul class="list-group">
            <li class="list-group-item" v-for="gain in gains" v-bind:key="gain.index">
                {{gain.libelle}} {{gain.price}} 
                <span><i class="fa fa-times"></i></span>
            </li>
        </ul>
    </div>
</template>


<script>
    export default{
        name : 'Gains',
        data(){
            return {
                gains : []
            }
        },
        methods : {
            addGains(){
                this.gains.push(this.data);
            }
        },
    }
</script>

<style scoped>
   i:hover{
       cursor: pointer;
   }
</style>
                                                        
                                                    

4- إرسال ل objet data من App.vue ل components

فقبل ما نرسل ل objet data من App.vue ل components غادي نزيد ل bouton + و - فل click يعني ملي غادي نضغط عليهم غادي تنفذ deux fonctions.

- addDepense لي غادي تنفذ نفس ال fonction لي زدنا قبل ف Depenses.vue.

- addGains لي غادي تنفذ نفس ال fonction لي زدنا قبل ف addGains.vue.

فدبا بقا كيفاش فاش نضغط على les boutons نفذ les fonctions لي كاينين ف les components لخرين :

فغادي نخدم ب les bus لي كيمكنوني ندير هادشي ف data objet ل fonction كنزيد propriété bus لي هي instance من ل classe Vue.

وداخل methods كنزيد les fonctions addDepense و addGains ولي داخلهم كنخدم بل bus باش كنصيفط des evenements ل les comoponents لي عندي.

فباش نرسل les evenements لي زدت فل bus كنرسل ل propriété bus باستعمل v-bind لي كنزيدها لكل components.

وبنفس الطريقة كنرسل ل objet data أيضا.

الكود لي زدت ف App.vue هو:

                                                        
                                                            //App.vue

<template>
     <div>
        <div class="container">
            <h1 class="text-danger text-center">{{name}}</h1>
            <div class="row">
                <div class="col-md-6 mx-auto">
                    <div class="card mt-3">
                        <div class="card-body bg-light">
                            <div class="form-inline">
                                <div class="form-group">
                                    <input type="text" placeholder="Libellé" v-model="data.libelle" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <input type="text" placeholder="Montant" v-model="data.price" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-success btn-sm mr-2" @click="addGains"><i class="fa fa-plus"></i></button>
                                </div>
                                <div class="form-group">
                                    <button class="btn btn-danger btn-sm" @click="addDepense"><i class="fas fa-minus-square"></i></button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row mt-4">
                <div class="col-md-6">
                    <Gains v-bind:bus="bus"   v-bind:data="data"></Gains>
                </div>
                <div class="col-md-6">
                    <Depenses v-bind:bus="bus"  v-bind:data="data"></Depenses>
                </div>
            </div>
        </div>
     </div>
</template>


<script>    
    import Gains from './components/Gains';
    import Depenses from './components/Depenses';
    import Vue from 'vue'; 

    export default{
        name : 'App',
        data(){
            return{
                bus : new Vue(),
                data : {libelle:'',price:''},
                name : 'Gestion de dépenses'
            }
        },
        components : {
            Gains,
            Depenses
        },
        methods: {
            addDepense(){
                this.bus.$emit('addDepense');
            },
            addGains(){
                this.bus.$emit('addGains');
            },
        }
    }
</script>



<style scoped>
    
</style>
                                                        
                                                    

5- استقبال data objet ول bus

فباش نسترجع data objet ول bus فل Depenses.vue كنزيد واحد ل array سميتها props فيها كيكونوا les variables لي كيجيوني من les components آخرين.

فداخل ل props كنزيد ل bus وdata لي جاوني من App.vue وبالنسبة ل événement click لي خص ينفذ ل fonction addDepense فكنزيدو فواحد propriété آخرى ديال vue js لي هي mounted.

ولي كتعني فاش ل app كتشارجا كنستقبل ل événement لي جاني من مع bus وكنفذ ل fonction لي بغيت تنفذ.


الكود لي زدنا ف Depenses.vue هو :

                                                        
                                                            //Depenses.vue

<template>
    <div>
        <h3 class="text-info">Dépenses</h3>
        <hr>
        <ul class="list-group">
            <li class="list-group-item" v-for="(dep,index) in depenses" v-bind:key="index">
                {{dep.libelle}} {{dep.price}} 
                <span><i class="fa fa-times" @click="clicked(index)"></i></span>
            </li>
        </ul>
    </div>
</template>


<script>
    export default{
        props : ['bus','data'],
        name : 'Depenses',
        data(){
            return {
                depenses : []
            }
        },
        methods:{
            addDepense(){
                this.depenses.push(this.data);
            }   
        },
        mounted() {
            this.bus.$on('addDepense', this.addDepense);
        }, 
    }
</script>

<style scoped>
   i:hover{
       cursor: pointer;
   }
</style>
                                                        
                                                    

دروس ذات صلة

VS

دورة vue js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة vue js للمبتدئين غادي نشوفوا واحد المقدمة على vuejs من بعد غادي نشوفو كيفاش...


VS

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

فهاد الدرس السادس من دورة VUE JS للمبتدئين غادي نكملو الألة الحاسبة ديالنا فغادي نشوفوا كيفاش غادي ن...


VS

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

فهاد الدرس السابع من دورة vue js للمبتدئين غادي نكملو الدورة ديالنا غادي نشوفوا des directives آخرين...


VS

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

فهاد الجزء الثمن من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا واحد الحاجة مهمة ف...


VS

دورة vue js للمبتدئين الدرس التاسع

فهاد الدرس التاسع من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد لحاج...


VS

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

دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا واحد ل propriété وحدة اخرى لي هي watch....


VS

دورة vue js للمبتدئين الدرس الثاني عشر

فهاد الدرس الثاني عشر غادي نكملوا الدورة ديالنا ول projet ديالنا لي هو gestion de dépenses.فغادي نشو...


VS

دورة vue js للمبتدئين الدرس الرابع عشر

فهاد الدرس الرابع عشر من دورة vue js للمبتدئين غادي نشوفوا كيفاش نزيدو النتيجة ديال العمليات ديالنا...


VS

دورة vue js للمبتدئين الدرس الخامس عشر

فهاد الدرس الخامس عشر من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش نزيدو ل a...


VS

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

فهاد الدرس السادس عشر من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا غادي نشوفوا كيفاش كل مرة دخ...