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

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

فهاد الدرس الأول من دورة 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>
                                                        
                                                    

دروس ذات صلة

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

فهاد الدرس الثاني عشر غادي نكملوا الدورة ديالنا ول projet ديالنا لي هو gestion de dépenses.فغادي نشو...


VS

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

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


VS

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

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


VS

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

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


VS

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

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