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


فهاد الدرس الثاني عشر غادي نكملوا الدورة ديالنا ول projet ديالنا لي هو gestion de dépenses.
فغادي نشوفوا كيفاش ن afficher الصفحة الرئيسية ومنبعد غادي نشوفوا كيفاش نزيدو المعلومات فكل component زدناه ونعرضهم كاملين.


1- فتح الصفحة الرئيسية

فباش نشوف ل projet ديالي غادي نزيد fichier جديد ف src سميه main.js منبعد فيه غادي يكون لكود لي كنسترجع فيه ل Vue لي هي la classe باش كنخدمو.

منبعد كنسترجع ل component App لي فل ل fichier App.vue منبعد كن créer l'instance من la classe Vue وكنخدم ب render لي كتعني afficher وكنعطيها شنو غادي ت afficher لي هو ل component App.

منبعد كنعطي la partie فين غادي يتعرض هادشي ولي هي app# ولي كاينة ف public/index.html.

فدبا باش ن afficher كنمشي ل cmd وداخل ل projet لي هو depenses كندير هاد ل commande :


من بعد ما تنفذ غادي تمشي ل http://localhost:8080  غادي تشوف النتيجة :

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

                                //main.js

import Vue from 'vue';
import App from './App';

new Vue({
    render : h => h(App) 
}).$mount("#app");
                            

2- إضافة لفورم ل App.vue

فغادي نزيد الفورم لي غادي تمكنا باش ندخلو المبالغ ف App.vue كنزيد لكود لي كيمكني باش نزيد ل فورم هنا خدمت ب bootstrap 4 لي يلا مكنتيش كتعرف شنو هو شوف دورة المبتدئين ف bootstrap 4.

منبعد مكنزيد لكود كنحصل على هاد النتيجة :



 
الكود ديال 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é" class="form-control mr-3">
                                </div>
                                <div class="form-group">
                                    <input type="text" placeholder="Montant" 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';
    export default{
        name : 'App',
        data(){
            return{
                name : 'Gestion de dépenses'
            }
        },
        components : {
            Gains,
            Depenses
        }
    }
</script>



<style scoped>
    
</style>
                            

3- إضافة المعلومات ل Depenses.vue

ف Depenses.vue غادي نزيدو واحد ل array لي غادي يكون فيها les depenses لي كندخلو فهنا غادي نزيدوهم statique فقط باش نشوفوا design ديالنا من بعد غادي نزيدوهوم فالفورم.

فل array غادي نزيدها ف data objet الكود لي زدنا ف Depenses.vue هو :

                                //Depenses.vue

<template>
    <div>
        <h3 class="text-info">Dépenses</h3>
        <hr>
    </div>
</template>


<script>
    export default{
        name : 'Depenses',
        data(){
            return {
                depenses : [{libelle : 'location',price : 2000},{libelle : 'crédit',price : 500},{libelle : 'frais de transport',price : 300},{libelle : 'location',price : 2000},{libelle : 'location',price : 2000},{libelle : 'location',price : 2000}]
            }
        }
    }
</script>

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

4- استرجاع القيم من array depenses

فباش نسترجع القيم من depenses غادي نخدم ب v-for كيف شفنا قبل من بعد غادي نعرض كل قيمة استرجعتها ف liste وكل قيمة حداها واحد ل icone لي كتمكن من حذفها هادشي غادي نشوفوه منبعد.

فيلا درتي تحديث للصفحة الرئيسية غادي تحصل على هاد النتيجة :



 الكود لي زدنا ف 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 : [{libelle : 'location',price : 2000},{libelle : 'crédit',price : 500},{libelle : 'frais de transport',price : 300},{libelle : 'location',price : 2000},{libelle : 'location',price : 2000},{libelle : 'location',price : 2000}]
            }
        }
    }
</script>

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

5- إضافة ملفات css

فيلا معرفتيش كيفاش تزيد bootstrap و fontawesome غادي تمشي ل index.html لي كاين ف public غادي تزيد هاد السطرين فل head :

                                    //liens css

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">