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

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

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

دروس ذات صلة

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 للمبتدئين الدرس الثالت عشر

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


VS

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

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


VS

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

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


VS

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

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