سلسلة دروس الفريموورك Vue.js [درس#9 Dynamic CSS classes]

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
, ,
#1

في الدرس السابق

تعرفنا على قدرات الأستاذ vue :sunglasses: الخارقة في عمل تصميم ومدى سهولتها…

الآن سنجرب قدرات Vue في عمل تنسيقات ديناميكية

قبل البداية:

  1. الدروس ستكون مكتوبة بالخطوات
  2. يوجد شرح فيديو بالأسفل مع كل درس
  3. يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة :rocket::airplane::flying_saucer:
فهرس الدروس
  1. درس#1 تثبيت الأدوات
  2. درس#2 Vue instance
  3. درس#3 data & methods
  4. درس#4 Data Binding
  5. درس#5 events & event modifiers
  6. درس#6 keyboard modifiers
  7. درس#7 two-way data binding
  8. درس#8 ورشة عمل تسجيل دخول
  9. سلسلة دروس الفريموورك Vue.js [درس#9 Dynamic CSS classes]

—يلا نبدأ :smiley:

سنستخدم في تنسيقات الصفحة لدينا Bulma CSS و [vue devtools] الخاص بمتصفح كروم

نبدأ بعمل ملف html، ونقم بنسخ الكود التالي:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello Bulma!</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
  <section class="section">
    <div class="container">
      <h1 class="title">
        Hello World
      </h1>
      <p class="subtitle">
          first website with <strong classs="has-text-primary">Bulma</strong>!
      </p>
    </div>
  </section>
  // color button
  <section class="section">
    <button class="button is-primary">Change color</button>
  </section>
// slider
<section class="section">
 <input class="slider is-fullwidth is-success" step="1" min="0" max="100" value="50" type="range">
        <output>change font size to 50</output>
      </section>
  <script src="app.js"></script>
  </body>
</html>

نقوم بانشاء الملف app.js

new Vue({
  el: "#app",
})

الآن كل شيء جاهز للبدء
ما نراه الان في الصفحة هو التالي:
image

ما نريده هو تغيير لون كلمة Bulma حين الضغط على Change color

نضيف الآن الحدث المسؤول عن click للزر

<button @click="" class="button is-info">
          Change color
 </button>

الأن نريد تغيير class الخاص بكلمة bulma
يمكننا إضافة متغير يعتمد على الclick بالشكل التالي في ملف app.js

new Vue({
  el: "#app",
  data () {
    return {
      triggered: false,
    }
  },
})

عند الضغط على الزر، ستتغير القيمة بعد التعديل التالي في الزر بين true و false:

<button @click="triggered = !triggered" class="button is-info">
  Change color
</button>

الآن نود ربط الclasses بهذا الشكل:

<strong :class=" triggered ? 'has-text-danger' : 'has-text-primary' ">
    Bulma
</strong>!

الآن قيمة الclass الذي نريده ستكون معتمدة على قيمة المتغير triggered سواء كانت true أو false
لو القيمة true سيأخذ النص تنسيق اللون الأحمر 'has-text-danger والعكس سيأخذ اللون الافتراضي

ياللروعة! الآن اللون يتغير للأحمر والعكس بعد الضغط كل مرة :smiley: :
image

ماذا لو أردنا التحكم بحجم الخط بشكل تفاعلي؟

لدينا section آخر به slider input ويظهر معنا بالصفحة تحت الزر:
image

لنضيف متغير جديد يعبر عن القيمة المدخلة:

data () {
    return {
      triggered: false,
      sizeValue: 50
    }
  },

الآن نربط المتغير بالinput باستخدام v-model مع حذف الvalue:

<input
   v-model="sizeValue"
   class="slider is-fullwidth is-success"
   step="1" min="0" max="100" type="range">
<output>change font size to {{ sizeValue }}</output>

داخل devtools بالمتصفح، يمكننا استكشاف عناصرvue باستخدام vue devtools

image
image1440×900 72.6 KB

image
image1440×900 36.4 KB

نلاحظ تغيير القيمة مع سحب الslider :smiley:

الآن يتبقى لنا التحكم في style الخاص بكلمة Bulma

<strong
   :class="triggered ? 'has-text-danger' : 'has-text-primary'" 
   :style="{ fontSize: sizeValue + 'px' }">
    Bulma
</strong>!

نلاحظ ضرورة كتابة px للتأكد من قراءة الstyle بشكل صحيح
الآن لنمرح :star_struck:
image

نتمنى لكم برمجة سعيدة :star_struck:

1 Like
#2

السلام عليكم ورحمة الله

سؤال بخصوص :style binding

حاليا لو أني صنعت عنصر ووضعت له تنسيق بإستخدام computed property

المثال:

:style="{ width: randomWidth , marginLeft: marginLeft }"
//…
computed:{
marginLeft(){
return ${this.getRandomInt(1, 3)}em;
},
randomWidth(){
return ${this.getRandomInt(2, 20)}vw;
}
}

الآن السؤال، كيف لي أن أغير قيمة الrandomWidth علما أني سأستدخدم v-on:mouseover="functionNameToChangeWidth"

أنا استخدمت this.randomWidth = ‘auto’، ولكنها لم تنجح
وغيرت اسم الClass أيضا لم يتغير الWidth

شكرا

1 Like
#3

و عليكم السلام
نتأكد الأول من ان عندنا reference للدالة getRandomInt في methods

#4

ايوه موجوده، أنا أخذت جزء من الكود فقط

1 Like
#5

الدوال المحسوبة في computed بتطلع قيمة ثابتة

هل الهدف هو تغيير الcss بشكل عشوائي بمجرد عمل hover بالماوس؟

#6

ايوه بالظبط، علما أني بدأت بقيمه computed،
هل لو هيا قيمه ثابته، كده هحتاج أغير كونها، computed

:style="{ width: randomWidth , marginLeft: marginLeft }"
//…
computed:{
marginLeft(){
return ${this.getRandomInt(1, 3)}em;
},
randomWidth(){
return ${this.getRandomInt(2, 20)}vw;
}
}
1 Like
#7

تمام، الcomputed بتعمل caching وبتراقب لو انا عملت تغيير في قيم معينة
في حالة refresh القيم بتتغير فعلا،

image
image1440×900 46.3 KB

ممكن نجرب بـ watch

1 Like
#8

لم تنجح بإستخدام الWatch، تقريبا ال watch function ، أما ما يحسب ب computed يعامل معاملة ال property،

أنا حاولت أغيرها عن طريق ال this.randomWidth ، ولكن يعطيني هذا الerror

Computed property “randomWidth” was assigned to but it has no setter.

1 Like
#9

أنا أظن أني بحاجه لعمل setter function، ولكن لا أعرف كيف، سأنتظر حتى أتعلمها إن شاء الله

1 Like
#10 
new Vue({
  el: "#app",
  data () {
    return {
      res: 20
    }
  },
  methods: {
    getRandomInt(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    },
    randomWidth(){
      return this.res = this.getRandomInt(22, 40)
    }
  },
})

<strong @mouseover="randomWidth" :style="{ fontSize: res+ 'px' }">
      Bulma
   </strong>!
#11

مش هنحتاج functions
انا حدثت الإجابة فوق :point_up_2: :point_up_2: :point_up_2: :point_up_2:

#12

لسه في جزء ناقص، إن شاء الله هوضحها أكتر المره الجايه، بس حاليا مضطره أترك الجهاز،
جزاك الله خيرا

1 Like
#13

في انتظارك باذن الله

#14

السلام عليكم ورحمة الله

الحمد لله وصلت للحل، وكان بسبب الجزء إلي حضرتك كتبته، فكرت أني أخلي الcomputed يعتمد على property بداخل ال data، خليتني أنشأ property و أغير قيمة الproperty فقط، وكده كده الcomputed هتتغير تلقائيا لما تلاقي القيمة ال بتعتمد عليها اتغيرت،

جزاك الله خيرا، وإن شاء الله لما أخلص أول مشروع ليا هبى أشارككم المشروع، الله المستعان

1 Like
#15

و عليكم السلام،
عظيم ماشاء الله :ok_hand: :ok_hand:

اللي عملتيه ده هوا الـbest practice، دايما نستخدم properties والcomputed تغير فيها، (و على حسب الحاجة اللي عايزين نعملها)

بالتوفيق دايما

1 Like