نبدأ بسم الله
الدرس الاول من دروس تعلم Vue js ببساطة
اعداد ملف العمل 
- نقوم بانشاء ملف html ليكن اسمه
index.htmlيحتوي على div فارغ
<div>
</div>
- نقوم الان بتضمين مكتب vue js عن طريق cdn نضيف التالي للملف
index.html
<div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
- بعد ان ضمنا مكتب vue js نقوم بتعريف متغير يحتوي داخله على كائن جدد من vue ليصبح بهذا الشكل:
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
}
})
</script>
- el
تشير إلى عنصر الـ html الذي نريد ان نتحكم به من خلال vue
- data
هنا يتم تعريف البيانات التي نريد استخدامها في المشروع
نقوم بتعريف متغير داخل الـ data ليكن name ونسند له القيمة التي نريد ولكي نحصل عليه داخل ال html نكتبه داخل قوسين كبيرين {{name}} ليصح الكود بهذا الشكل :
<div id="app">
<h1>{{name}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
var app = new Vue({
el: "#app",
data: {
name: "hello world"
}
})
</script>
اقلاع التطبيق 
الان اذهب وقم بتشغيل الملف index.html في المتصفح تجد أن hello world ظهرت على الصفحة
مبروك هذا أول تطبيق لك بـ vue js بكل بساطة 
شرح مفصل :
