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


فهاد الدرس الثالت عشر من دورة 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>