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


فهاد الجزء الثمن من دورة vue js للمبتدئين غادي نكملوا الدورة ديالنا وغادي نشوفوا واحد الحاجة مهمة ف vue js لي هي les components.
ف les components كيمكنوني انني نقسم ل projet لأجزاء أو صفحات كل component عبارة عن صفحة فغادي نشوفوا هادشي فل projet لي غادي يكون من بعد فدبا غادي نشوفوا مقدمة على les components باش تاخذ فكرة.


1- إضافة component ف vue js

باش نزيد component كنمشي ل main.js فيها كنزيد ل component لي باش نزيدو كنخدم بل class Vue فكنعطي الإسم ديالو لي هنا حددناه ف person منبعد عندي template لي هي المحتوى html ديال ل component.

بالنسبة للمحتوى ديال ل objet data غادي نشوفوه منبعد.

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

                                //main.js

Vue.component(
    'person',{
        template : `
            <div class="container">
                <h3 class="text-success">Nom :</h3>
                <small>Age : </small>  
            </div>  
        `
    } 
);
new Vue({
    el : '#app',
    data : {
        name : 'amine',
        age : 28
    },
});
                            

2- عرض ل component فالصفحة الرئيسية

فباش نشوف ال component لي زدت كنمشي ل index.html وكنخدم بل component بحال اي tag html كنعرضوا بهاد الطريقة :
<person></person>

فدبا يلا درتي actualiser ل index.html غادي تحصل على هاد النتيجة :



الكود لي زدنا ف index.html هو :

                                //index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Vue js for beginners</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <person></person>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

3- إضافة data objet ل component ف vue js

فكيف شفنا فل instance ديال Vue لي عندها data objet فحتى ل component عندو data objet غير هو على شكل fonction.

فالمثال لي عندنا كنزيد data fonction هاد المرة لي كت retourner un objet لي حددنا فيه deux propriétés  name & age وباش نعرضهم كنزيدهم ف template.

فدبا يلا درتي actualiser ل index.html غادي تحصل على هاد النتيجة :





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

                                //main.js

Vue.component(
    'person',{
       data (){
            return {
                name : 'samadi',
                age : 30
            }
        },
        template : `
            <div class="container">
                <h3 class="text-success">Nom : {{name}}</h3>
                <small>Age : {{age}}</small>  
            </div>  
        `
    } 
);
new Vue({
    el : '#app',
    data : {
        name : 'amine',
        age : 28
    },
});
                            

4- إضافة des propriétés ل component vue js

فممكن انني نرسل des propriétés ل component لي زدنا ف index.html كنخدم ب directive v-bind لي كنعطيها deux propriétés name & age ولي هما لي عندي ف data objet ديال ل Vue instance  لي فيهم amine & 28.

الكود لي زدت ف index.html :

                                    //index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <title>Vue js for beginners</title>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <person  v-bind:name="name" v-bind:age="age"></person>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                                

5- إضافة des propriétés ل component vue js تتمة

فباش نستقبل هاد les propriétés فعندي واحد array سميتها props هي لي كنستقبل فيها اي حاجة جات ل component.

فكنزيد name ول age لي استقبلت فدبا يلا درتي actualiser ل index.html غادي تحصل على هاد النتيجة :





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

                                    //main.js 

Vue.component(
    'person',{
        props : ['name','age'],
        data (){
            return {
                name : 'samadi',
                age : 30
            }
        },
        template : `
            <div class="container">
                <h3 class="text-success">Nom : {{name}}</h3>
                <small>Age : {{age}}</small>  
            </div>  
        `
    } 
);
new Vue({
    el : '#app',
    data : {
        name : 'amine',
        age : 28
    },
});