إليك ما تحتاج لمعرفته حول ربط البيانات في Vue

تنشئ البيانات الملزمة في تطبيقات الويب رابطًا بين مثيل التطبيق وواجهة المستخدم (واجهة المستخدم). يدير مثيل التطبيق البيانات والسلوك والمكونات ، بينما تمثل واجهة المستخدم الجانب المرئي الذي يتفاعل معه المستخدمون. تسمح لك البيانات الملزمة بإنشاء تطبيقات ويب ديناميكية.

هنا ، ستستكشف روابط مختلفة في Vue ، بما في ذلك الارتباطات أحادية الاتجاه وثنائية الاتجاه. ستتعلم أيضًا تنفيذ هذه الارتباطات باستخدام قوالب الشارب والتوجيهات مثل v-bind و v-model.

الاستيفاء في Vue

الاستيفاء هو أحد أكثر أنواع ربط البيانات شيوعًا في Vue. يتيح لك الاستيفاء عرض قيم البيانات في علامات لغة ترميز النص التشعبي (HTML) باستخدام قالب الشارب ، الذي يُشار إليه بشكل عام بأقواس مزدوجة متعرجة ({{ }}).

باستخدام نموذج mustache ، يمكنك دمج محتوى التطبيق الديناميكي مثل البيانات وخصائص الطريقة في HTML الخاص بك. يمكنك تحقيق ذلك من خلال تضمين أسماء خصائص البيانات أو الطريقة من كائن الخيارات في Vue داخل هذه الأقواس المتعرجة.

في ما يلي مثال لتطبيق Vue يستخدم قالب الشارب لتحقيق الاستيفاء في Vue:

<جسم>
<شعبةبطاقة تعريف="برنامج">
<h1>{{ عنوان }}h1>
<ص>{{text.toUpperCase ()}}ص>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 العنوان: "مرحبًا" ،
 النص: "هذا هو عالمك؟" ،
 };
 },
 });
 app.mount ("# تطبيق")؛
النصي>
جسم>

يستخدم مقطع التعليمات البرمجية أعلاه قالب mustache لعرض قيمة خاصية العنوان في كائن بيانات تطبيق Vue. يمكنك أيضًا عرض نتائج تعبير JavaScript مع الاستيفاء. على سبيل المثال ، ملف {{text.toUpperCase ()}} التعبير في ص تعرض العلامة الإصدار الكبير لقيمة النص ، كما هو موضح في الصورة أدناه:

عند تحميل تطبيق Vue ، يقوم Vue بتقييم التعبيرات في القوالب ويعرض القيم الناتجة في نص HTML. أي تغييرات في خصائص البيانات تعمل على تحديث القيم المقابلة في واجهة المستخدم.

على سبيل المثال:

<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 العنوان: "مرحبًا" ،
 النص: "هذا هو عالمك؟" ،
 };
 },
 });
 app.mount ("# تطبيق")؛
النصي>

يغير مقطع التعليمات البرمجية أعلاه خاصية العنوان إلى "مرحبًا". سينعكس هذا التغيير تلقائيًا في واجهة المستخدم نظرًا لأن تطبيق Vue يربط خاصية العنوان بعنصر واجهة المستخدم ، كما هو موضح أدناه:

لا ينتج الاستيفاء البيانات إلا عندما تكون الأقواس المتعرجة المزدوجة بين فتح وإغلاق علامات HTML.

طريقة واحدة ربط البيانات مع v-bind التوجيه

مثل الاستيفاء ، يربط ربط البيانات أحادي الاتجاه مثيل التطبيق بواجهة المستخدم. الفرق هو أنه يربط الخصائص مثل البيانات والطرق بسمات HTML.

يدعم ربط البيانات أحادي الاتجاه التدفق أحادي الاتجاه للبيانات ، مما يمنع المستخدمين من إجراء تغييرات تؤثر على خصائص البيانات في مثيل التطبيق. يكون هذا مفيدًا عندما تريد عرض البيانات لمستخدم التطبيق ولكن تمنع المستخدم من تعديلها.

يمكنك تحقيق ربط البيانات أحادي الاتجاه في Vue بامتداد v- ربط التوجيه أو طابعه المختصر (:):

 التوجيه v-bind 
<مدخليكتب="نص"v-bind: القيمة="نص">
 the: حرف الاختزال 
<مدخليكتب="نص":قيمة="نص">

تُظهر كتلة التعليمات البرمجية استخدام التوجيه v-bind واختصاره لربط قيمة علامة HTML المدخلة بخاصية بيانات نصية. فيما يلي مثال على تطبيق Vue يستخدم امتداد v- ربط التوجيه لتحقيق ربط البيانات أحادي الاتجاه:

<جسم>
<شعبةبطاقة تعريف="برنامج">
<مدخليكتب="نص"v-bind: القيمة="نص">
<ص>{{ نص }}ص>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 النص: "Vue رائع!"
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>

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

تنشئ كتلة التعليمات البرمجية هذه ارتباطًا أحادي الاتجاه ، حيث تتغير التغييرات إلى ملف نص ستعمل الخاصية على تحديث قيمة حقل الإدخال ، لكن التغييرات التي تم إجراؤها في حقل الإدخال لن تؤدي إلى تحديث نص الخاصية في مثيل تطبيق Vue.

لإظهار ذلك ، يمكننا البدء بالقيمة الأولية لـ نص ملكية، "Vue رائع! ":

بعد تغيير قيمة حقل الإدخال إلى "مرحبا بالعالم!"، لاحظ أن تطبيق Vue لم يتم تحديثه ، وأن النص الموجود في علامة الفقرة ظل كما هو:

ومع ذلك ، عندما نغير قيمة نص الملكية ل مرحبا بالعالم! في مثيل تطبيق Vue بدلاً من حقل الإدخال ، يتم تحديث حقل الإدخال ليعكس القيمة الجديدة:

تعد طريقة ربط البيانات هذه مفيدة في السيناريوهات التي تريد فيها عرض البيانات للمستخدم ولكن تمنع المستخدم من تعديلها مباشرة. بالاستفادة من v-bind في Vue.js ، يمكنك إنشاء ربط أحادي الاتجاه ، وربط بيانات تطبيقك بسهولة بعناصر واجهة المستخدم.

اتجاهين ربط البيانات مع توجيه v-model

يسمح ربط البيانات ثنائي الاتجاه بالتغييرات التي تطرأ على قيمة عنصر واجهة المستخدم لتنعكس تلقائيًا في نموذج البيانات الأساسي والعكس صحيح. معظم الواجهة الأمامية أطر عمل جافا سكريبت يحب تستخدم الزاوية الربط ثنائي الاتجاه لمشاركة البيانات والتعامل مع الأحداث في الوقت الفعلي.

يجعل Vue.js الربط ثنائي الاتجاه ممكنًا باستخدام ملف نموذج v التوجيه. ال نموذج v يقوم التوجيه بإنشاء ربط بيانات ثنائي الاتجاه بين عنصر إدخال في النموذج وخاصية بيانات. عندما تكتب في عنصر إدخال ، يتم تحديث القيمة تلقائيًا في خاصية البيانات ، وأي تغييرات على خاصية البيانات ستعمل أيضًا على تحديث عنصر الإدخال.

فيما يلي مثال على تطبيق Vue يستخدم ملف نموذج v التوجيه لتحقيق ربط البيانات ثنائي الاتجاه:

<رأس>
<عنوان>ربط البيانات ثنائي الاتجاه في Vueعنوان>
<النصيsrc=" https://unpkg.com/vue@3/dist/vue.global.js">النصي>
رأس>
<جسم>
<شعبةبطاقة تعريف="برنامج">
<مدخليكتب="نص"نموذج v="نص">
<ص>{{ نص }}ص>
شعبة>
<النصي>
 تطبيق const = Vue.createApp ({
 بيانات() {
 يعود {
 النص: "Vue رائع!"
 }
 }
 })
 app.mount ("# تطبيق")
النصي>
جسم>

تحتوي كتلة التعليمات البرمجية أعلاه على عنصر إدخال بامتداد نموذج v توجيه ملزم له نص خاصية البيانات. ال نص تم تعيين الخاصية في البداية على "Vue رائع!".

يقوم حقل الإدخال بتحديث خاصية النص عند الكتابة فيه ويعكس التغييرات التي تم إجراؤها على خاصية النص في ملف ص بطاقة شعار. يستخدم Vue.js توجيه نموذج v وعنصر الإدخال لتحقيق ربط البيانات ثنائي الاتجاه.

بينما يسمح v-bind بالاتصال أحادي الاتجاه من تطبيق Vue إلى واجهة المستخدم ، يوفر الطراز v اتصالًا ثنائي الاتجاه بين تطبيق Vue وواجهة المستخدم. نظرًا لقدرته على تمكين الاتصال ثنائي الاتجاه ، نموذج v غالبًا ما يتم استخدامه عند العمل مع عناصر النموذج في Vue.

وسّع خبرتك في بناء تطبيقات Vue

لقد تعرفت على ربط البيانات في Vue ، بما في ذلك الاستيفاء وتوجيهات v-bind و v-model. تعتبر عمليات ربط البيانات هذه ضرورية ، لأنها تعمل كأساس لتطبيقات Vue.

يحتوي Vue على العديد من التوجيهات الأخرى لحالات الاستخدام ، مثل عرض القائمة وربط الحدث والعرض الشرطي. يساعدك فهم توجيهات Vue في إنشاء واجهة أمامية ديناميكية وتفاعلية لتطبيقات الويب الخاصة بك.