كيفية العمل مع البيانات التفاعلية في Svelte
في Svelte ، يمكنك الاستماع إلى التغييرات في حالة المكون ، وتحديث المتغيرات الأخرى.
على سبيل المثال إذا كان لديك ملفcount
عامل:
<script>
let count = 0
</script>
وتقوم بتحديثه بالنقر فوق الزر:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
</script>
{count} <button on:click={incrementCount}>+1</button>
يمكنك الاستماع إلى التغييراتcount
باستخدام النحو الخاص$:
التي تحدد كتلة جديدة سيعيد Svelte تشغيلها عندما يتغير أي متغير مشار إليه فيه.
هذا مثال:
<script>
let count = 0
const incrementCount = () => {
count = count + 1
}
$: console.log(</span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
</script>
{count} <button on:click={incrementCount}>+1</button>
لقد استخدمت الكتلة:
$: console.log(`${count}`)
يمكنك كتابة أكثر من واحد منهم:
<script>
$: console.log(`the count is ${count}`)
$: console.log(`double the count is ${count * 2}`)
</script>
ويمكنك أيضًا إضافة كتلة لتجميع أكثر من عبارة واحدة:
<script>
$: {
console.log(`the count is ${count}`)
console.log(`double the count is ${count * 2}`)
}
</script>
لقد استخدمت استدعاء console.log () هناك ، ولكن يمكنك تحديث المتغيرات الأخرى أيضًا:
<script>
let count = 0
let double = 0
$: {
console.log(the count is </span><span style="color:#e6db74">${</span><span style="color:#a6e22e">count</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
double = count * 2
console.log(double the count is </span><span style="color:#e6db74">${</span><span style="color:#66d9ef">double</span><span style="color:#e6db74">}</span><span style="color:#e6db74">
)
}
</script>
تحميل مجانيكتيب Svelte
المزيد من البرامج التعليمية svelte:
- الشروع في العمل مع Svelte - برنامج تعليمي قصير
- كيفية العمل مع الدعائم في Svelte
- كيفية استيراد المكونات في Svelte
- كيفية تصدير الوظائف والمتغيرات من مكون Svelte
- قوالب Svelte: المنطق الشرطي
- كيفية عرض مكون Svelte عند الطلب
- فتحات رشيقة
- كيفية إضافة التعليقات في قوالب Svelte
- Svelte Bindings
- معالجة تحديثات الحالة في Svelte
- جمل رد الفعل في Svelte
- أحداث دورة الحياة الرشيقة
- قوالب Svelte: الحلقات
- حل الوعود في قوالب Svelte
- العمل مع الأحداث في Svelte
- إدارة الحالة عبر المكونات في Svelte
- كيفية الوصول إلى معلمة URL في Sapper خارج وحدة البرنامج النصي
- كيفية تطبيق CSS ديناميكيًا في Svelte
- كيفية إعادة التوجيه إلى عنوان URL في Sapper
- كيفية محاكاة حلقة for في قوالب Svelte