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


فهاد الدرس الأول من دورة vue js للمبتدئين غادي نشوفوا واحد المقدمة على vuejs من بعد غادي نشوفو كيفاش نزيدو vue js لل projet ديالنا وايضا غادي نشوفوا كيفاش نعرضوا أول رسالة ترحيب ب vue js.


1- إضافة projet جديد

فأول حاجة زيد projet جديد سمه لي بغيتي وزيدو فين بغيتي من بعد فيه زيد fichier سميه index.html و fichier سميه main.js.

ف structure ديال ل fichier index.html غادي تكون simple فل footer غادي نزيد ل fichier main.js لي غادي يكون فيه لكود vuejs وايضا عندي الرابط cdn لي كيمكني من استخدام vuejs.

الكود ديال 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>
</head>
<body>
   
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

2- إضافة ل element app

فباش نحدد الجزء من ل fichier ديالي لي غادي تحكم فيه vue js فكنعطيه id app ف vue js الجزء لي عندو ل id app تلقائيا كتعرف بأنه الجزء لي غادي تحكم فيه.

ف index.html كنزيد div كنعطيها id app فهنا حددنا الجزء لي غادي يكون تحت تحكم vue js.  

الكود ديال 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>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>
                            

3- استخدام vue js لأول مرة

ف vue js بكل بساطة هي javascript framework لي جات بإضافات جديدة مغايرة لداكشي لي كنعرفوا ف jquery وجات باش تسهل المأمورية على المبرمجين وهي كتميز على les framework الأخرين بالسرعة والخفة وصغر الحجم.

فغادي نمشي ل main.js فباش نخدم ب vue js اول حاجة كن créer l'objet من la classe Vue من بعد بل el لي كتعني element كنعطي ل id app لي هو الجزء لي قلنا غادي تحكم فيه vue js ولي هو div لي عطيناه ل id app فالملف index.html.
الكود لي زدنا ف main.js هو :

                                //main.js 

new Vue({
    el : '#app',
});
                            

4- استخدام ال objet data

فل objet data كيمكن باش نعرض المعلومات لي بغيت فهنا مثلا زدنا ل objet من بعد فيه زدنا propriété message لي عطيناها فالقيمة bonjour.
الكود ديال main.js بعد التعديل هو :

                                    //main.js

new Vue({
    el : '#app',
    data : {
        message : 'bonjour'
    }
});
                                

5- عرض الرسالة message

فباش ن afficher ل propriété message لي زدنا ف data كنمشي ل index.html وداخل div لي عطيناه ل id app كنعرض الميساج بهاد الطريقة :
{{message}}

فيلا فتحتي 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>
</head>
<body>
    <div id="app">
        <h3 class="text-center">{{message}}</h3>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>