تعلم vue js ببساطة - حل التحدي الأول

في الدرس السابق قمنا بإضافة تحدي بسيط التحدي الأول كان الهدف منه تطبيق أهم ما تعلمناه خلال الدروس الستة الأولى.

التطبيق هو عبارة عن نص نريد أن نبدله بين اللغة الإنكليزية والعربي مع تغيير التنسيق
وووو 00_00_00-00_00_30

سوف نقسم الحل إلى ثلاث أقسام:

القسم الأول

نجهز المعطيات الخاصة بال html من خلال إضافة وسم h1 خاص باللغة العربية ووسم h1 أخر خاص باللغة الإنكليزية:

    <div>
        <h1>hello world</h1>
        <h1>مرحباً بالعالم</h1>
    </div>

ثم نعرف متغير مهمته التبديل بين اللغتين لنسميه lang وهو ياخذ قيمة نصية إما "ar" أو "en" ونضع بعدها شروط كما مر معنا في درس العوامل الشرطية بحيث نجعل النص العربي يظهر مع قيمة "ar" ويظهر النص الإنكليزي عند القيمة "en"

<div id="app">
    <div>
        <h1 v-if="lang == 'en'">hello world</h1>
        <h1 v-else-if= " lang== 'ar'">مرحباً بالعالم</h1>
    </div>    
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            lang : 'en'
              }         
       })
</script>

القسم الثاني

نريد ان نضيف الزر الخاص بالتبديل بين اللغتين ومهمته حين الضغط عليه هي تبديل قيمة المتغير lang من "ar" إلى "en" وبالعكس كما اخذنا في درس الاحداث وأيضا نغير اسم الزر وفقا لقيمة lang على الشكل التالي:

.
.
<button @click="changed">{{lang == 'en' ? 'العربية' : "English"}}</button>
.
.
methods:{
            changed(){
                if (this.lang == 'en') {
                    this.lang = 'ar'
                }
                else {
                    this.lang = 'en'
                }
            }

القسم الثالث

هي اضافة التنسيق من خلال اضافة كلاسين والتبديل بينهم ليكون الكلاس الأول اسمه ara والثاني eng

<style>
    .ara{
        text-align: right;
        direction: rtl;
    }
    .eng{
        text-align: left;
        direction: ltr;
    }
</style>

ونقوم بالتبديل بينهما من خلال خاصية v-bind وسوف نطبقها على الـ class كما مر معنا في درس الـ v-bind:class

<div :class="{'ara': lang == 'ar' , 'eng': lang == 'en'}">
        <h1 v-if="lang == 'en'">hello world</h1>
        <h1 v-else-if= " lang== 'ar'">مرحباً بالعالم</h1>
    </div>

ليصبح لدينا الكود كامل بهذا الشكل:

الكود كامل
<div id="app">
    <div :class="{'ara': lang == 'ar' , 'eng': lang == 'en'}">
        <h1 v-if="lang == 'en'">hello world</h1>
        <h1 v-else-if= " lang== 'ar'">مرحباً بالعالم</h1>
    </div>
    
    <button @click="changed">{{lang == 'en' ? 'العربية' : "English"}}</button>
    
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            lang : 'en'
            
        },
        methods:{
            changed(){
                if (this.lang == 'en') {
                    this.lang = 'ar'
                }
                else {
                    this.lang = 'en'
                }
            }
            
        }
    })
</script>
<style>
    .ara{
        text-align: right;
        direction: rtl;
    }
    .eng{
        text-align: left;
        direction: ltr;

    }
    
</style>

لتفاصيل أكثر يمكنم متابعة الدرس على اليوتيوب:

يمكنكم متابعة جميع الدروس من خلال الفهرس
فهرس سلسلة تعلم vue js ببساطة

5 Likes

شرح في غاية البساطة :muscle:
تسلم يا معلم :star_struck:

2 Likes

تسلم نصر :heart::hugs:

2 Likes

ماشاء الله عليك ي صهيب، أحييك على مجهودك والمستوى الذي وصلت له وعلى مشاركتنا هذه الدروس الرهيبة :ok_hand:

3 Likes

يسعدني سماع ذلك شكراً لك أستاذ محمد ولا تغيب عنا كثراً :wink:

2 Likes

هو انا اقدر :joy:، لكن ظروف أحياناً تحكم بس إن شاء الله لن نغيب مرة أخرى

3 Likes

ربنا يحفظك ويحميك من كل شر

3 Likes