في الدرس السابق
تعرفنا على قدرات الأستاذ vue الخارقة في عمل تصميم ومدى سهولتها…
الآن سنجرب قدرات Vue في عمل تنسيقات ديناميكية
قبل البداية:
- الدروس ستكون مكتوبة بالخطوات
- يوجد شرح فيديو بالأسفل مع كل درس
- يرجى ربط أحزمة المقاعد استعدادا لانطلاق الطائرة
فهرس الدروس
—يلا نبدأ
سنستخدم في تنسيقات الصفحة لدينا 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",
})
الآن كل شيء جاهز للبدء
ما نراه الان في الصفحة هو التالي:
ما نريده هو تغيير لون كلمة 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
والعكس سيأخذ اللون الافتراضي
ياللروعة! الآن اللون يتغير للأحمر والعكس بعد الضغط كل مرة :
ماذا لو أردنا التحكم بحجم الخط بشكل تفاعلي؟
لدينا section آخر به slider input ويظهر معنا بالصفحة تحت الزر:
لنضيف متغير جديد يعبر عن القيمة المدخلة:
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
نلاحظ تغيير القيمة مع سحب الslider
الآن يتبقى لنا التحكم في style الخاص بكلمة Bulma
<strong
:class="triggered ? 'has-text-danger' : 'has-text-primary'"
:style="{ fontSize: sizeValue + 'px' }">
Bulma
</strong>!
نلاحظ ضرورة كتابة px
للتأكد من قراءة الstyle بشكل صحيح
الآن لنمرح
نتمنى لكم برمجة سعيدة