دورة vue js للمبتدئين الدرس الثاني عشر
1- فتح الصفحة الرئيسية
//main.js
import Vue from 'vue';
import App from './App';
new Vue({
render : h => h(App)
}).$mount("#app");
2- إضافة لفورم ل 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
<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.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
//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">