قوة Livewire + Alpine.js:
مشاركة البيانات مع Alpine
<div x-data="{ count: @entangle('count') }">
<span x-text="count"></span>
<button @click="count++">+</button>
</div>Entangle مع التأجيل
<div x-data="{ name: @entangle('name').defer }">
<input x-model="name">
</div>الوصول لـ Livewire من Alpine
<button @click="$wire.save()">حفظ</button>
<button @click="$wire.set('name', 'John')">تعيين</button>الاستماع لأحداث Livewire
<div x-on:post-saved.window="alert('تم الحفظ!')">شارك هذه المقالة:
مقالات ذات صلة
دليل شامل لمصادقة API باستخدام Laravel Sanctum
أنشئ مصادقة API آمنة باستخدام Laravel Sanctum لتطبيقات SPA والموبايل.
تحديد معدل الطلبات في Laravel: احمِ تطبيقك
نفّذ تحديد معدل الطلبات لحماية تطبيق Laravel من إساءة الاستخدام.
مكونات Blade في Laravel: بناء واجهات قابلة لإعادة الاستخدام
أنشئ مكونات قوية قابلة لإعادة الاستخدام باستخدام Laravel Blade.
التعليقات (0)
يرجى تسجيل الدخول لترك تعليق. تسجيل الدخول
لا توجد تعليقات بعد. كن أول من يعلق!
.comment-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.9rem; } .comment-avatar-sm { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color, #6366f1), var(--secondary-color, #7c3aed)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 0.7rem; }
hljs.highlightAll(); .prose pre { background: #282c34; border-radius: 8px; padding: 1rem; overflow-x: auto; margin: 1.5rem 0; direction: ltr; text-align: left; } .prose pre code { background: transparent; padding: 0; font-size: 0.9rem; line-height: 1.6; color: #abb2bf; font-family: 'Fira Code', 'Monaco', 'Consolas', monospace; direction: ltr; text-align: left; } .prose code:not(pre code) { background: #f1f5f9; padding: 0.2rem 0.4rem; border-radius: 4px; font-size: 0.875em; color: #e11d48; direction: ltr; unicode-bidi: isolate; } .prose h2 { margin-top: 2rem; margin-bottom: 1rem; scroll-margin-top: 100px; } .prose h3 { scroll-margin-top: 100px; } .prose p { margin-bottom: 1rem; line-height: 1.8; } .toc-wrapper { border-left: 3px solid var(--primary-color, #6366f1); } [dir="rtl"] .toc-wrapper { border-left: none; border-right: 3px solid var(--primary-color, #6366f1); } .toc-link:hover { color: var(--primary-color, #6366f1) !important; }