الربط ثنائي الاتجاه للبيانات التي يجب تعلمها كل يوم في Vue.js

يتم تنفيذ قالب Vue.js على أساس DOM. هذا يعني أن جميع قوالب vue.js قابلة للتشكيل وصالح HTML ، ويتم تعزيزها من خلال بعض الميزات الخاصة. لذلك تختلف قوالب VUE بشكل أساسي عن القوالب المستندة إلى السلسلة ، ضعها في الاعتبار.

الاستيفاء

نص

أكثر أشكال ربط البيانات هو استيفاء النص ، باستخدام بناء جملة "الشارب" (أقواس مزدوجة):

<span> الرسالة: {{msg}} </span>

يتم استبدال علامة الشارب بقيمة سمة MSG لكائن البيانات المقابل. سيتم أيضًا تحديثه كلما تغيرت هذه الخاصية.

يمكنك أيضًا معالجة الاستيفاء الواحد فقط ، ولن تتسبب تغييرات البيانات المستقبلية في تحديثات الاستيفاء:

<span> لن يتغير هذا أبدًا: {{* msg}} </span>

HTML الأصلي

تقوم علامة الشارب المزدوجة بتوزيع البيانات في نص عادي بدلاً من HTML. من أجل إخراج سلاسل HTML الحقيقية ، تحتاج إلى استخدام ثلاث علامات شارب:

<viv> {{{raw_html}}} </iv>

يتم إدخال المحتويات كسلاسل HTML - سيتم تجاهل ربط البيانات. إذا كنت بحاجة إلى إعادة استخدام شظايا القالب ، فيجب استخدام الجزئية.

من الخطير للغاية تقديم HTML التعسفي ديناميكيًا على موقع ويب لأنه عرضة لـ [XSS Attack] (https://en.wikipedia.org/wiki/cross-site_scripting). تذكر استخدام الاستيفاء HTML فقط للمحتوى الموثوق به وليس للمحتوى المقدم من المستخدم.

ميزات HTML

يمكن أيضًا استخدام علامات الشارب في سمات HTML:

<div id = "item-{{id}}"> </div>

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

ربط التعبير

يسمى النص الموضوعة في علامة الشارب تعبيرًا ملزمًا. في Vue.js ، يتكون التعبير المربوطة من تعبير JavaScript بسيط واختياري واحد أو أكثر من المرشحات.

تعبيرات جافا سكريبت

حتى الآن ، لا بد من قوالبنا مفاتيح سمة بسيطة فقط. ومع ذلك ، في الواقع ، يدعم Vue.js تعبيرات JavaScript كاملة الميزة في ربط البيانات:

{{number + 1}}

{{ نعم ؟ "نعم": "لا"}}

{{message.split (''). revers (). Join ('')}}

يتم تقييم هذه التعبيرات في نطاق مثيل VUE الذي ينتمون إليه. أحد القيود هو أن كل الربط يمكن أن يحتوي فقط على تعبير واحد ، وبالتالي فإن العبارة التالية غير صالحة:

<!-هذا بيان وليس تعبيرًا:->

{{var a = 1}}

<!-التحكم في العملية غير ممكن أيضًا ، يمكنك استخدام التعبيرات الثلاثية بدلاً من ذلك->

{{if (ok) {return message}}}

فلتر

يسمح Vue.js بإضافة "مرشح" اختياري بعد التعبير ، مع الإشارة إلى "حرف خط الأنابيب":

{{message | الاستفادة}}

سنستخدم هنا قيمة رسالة التعبير "الأنابيب" إلى مرشح الاستفادة المدمج. هذا المرشح هو في الواقع مجرد وظيفة JavaScript التي تُرجع القيمة الرسملة. يوفر Vue.js العديد من المرشحات المدمجة ، وسوف نتحدث عن كيفية تطوير مرشحاتنا الخاصة لاحقًا.

لاحظ أن بناء جملة الأنابيب ليس بناء جملة JavaScript ، لذلك لا يمكن استخدام المرشحات داخل التعبيرات ولا يمكن إضافتها إلا إلى فكرة التعبير اللاحقة.

يمكن توصيل المرشحات في السلسلة:

{{message | Filtera | FilterB}}

يمكن للمرشح أيضًا قبول المعلمات:

{{message | filtera 'arg1' arg2}}

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

تعليمات

التوجيهات هي ميزات خاصة مع البادئة V-. تقتصر قيمة التوجيه على تعبير ملزم ، وبالتالي فإن قواعد التعبير والمرشح JavaScript المذكورة أعلاه تنطبق أيضًا هنا. تتمثل مسؤولية التعليمات في تطبيق بعض السلوكيات الخاصة على DOM عندما تتغير قيمة تعبيرها. دعونا ننظر إلى الأمام وذهابا على المثال في "نظرة عامة":

<p v-if = "Greeting"> Hello! </p>

هنا سيقوم توجيه V-If بحذف/إدراج العنصر <p> وفقًا لأصالة قيمة تحية التعبير.

المعلمة

يمكن فصل بعض التعليمات بواسطة "حجة" بعد اسمها وقولون في الوسط. على سبيل المثال ، يتم استخدام التوجيه V-bind لتحديث ميزات HTML بشكل استجابة:

<a v-bind: href = "url"> </a>

هنا HREF هي معلمة ، والتي تخبر التوجيه V-bind لربط سمة HREF للعنصر بقيمة عنوان URL التعبير. ربما تكون قد لاحظت أنه يمكنك استخدام interpolation {٪ raw ٪} href = "{{url}}" {٪ endraw ٪} للحصول على نفس النتيجة: هذا صحيح ، وفي الواقع ، سيتم تحويل الاستيفاء الداخلي للميزات إلى الربط v-bind.

مثال آخر هو توجيه V-ON ، والذي يستخدم للاستماع إلى أحداث DOM:

<a v-on: click = "dosomething">

هذه المعلمة هي اسم الحدث الذي يتم الاستماع إليه. سنشرح أيضًا ربط الحدث بالتفصيل.

المعدل

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

<a v-bind: href.literal = "/a/b/c"> </a>

بالطبع ، لا يبدو هذا منطقيًا ، لأننا نحتاج فقط إلى استخدام HREF = "/A/B/C" دون الحاجة إلى استخدام تعليمات واحدة. هذا المثال هو فقط لإظهار بناء الجملة. في وقت لاحق سنرى المزيد من الاستخدامات العملية للمعدلات.

اختصار

V-Prefix هو تلميح مرئي يحدد ميزة VUE محددة في قالب. يمكن أن تكون هذه البادئات تمييزًا جيدًا عندما تحتاج إلى إضافة سلوك ديناميكي إلى بعض رمز HTML الموجود. ولكن عندما تستخدم بعض الإرشادات الشائعة ، ستشعر أنه دائمًا ما يكون واقعيًا وامسدًا. وعند إنشاء تطبيق صفحة واحدة (SPA) ، ستقوم Vue.js بإدارة جميع القوالب ، و premix V ليست مهمة في هذا الوقت. لذلك يوفر Vue.js اختصارات خاصة للتوجيهين الأكثر شيوعًا V-bind و V-On:

اختصار V-bind

 <!-اكتمال بناء الجملة-> <a v-bind: href = "url"> </a> <!-Abbreviation-> <a: href = "url"> </a> <!-complete syntax-> <button v-bind: uppludable = "somedynamicondition : تعطيل = "SomedynamicCondition"> زر </button>

v-on اختصار

 <!-اكتمال بناء الجملة-> <a v-on: click = "dosomething"> </a> <!-Abbreviation-> <a @click = "dosomething"> </a>

تبدو مختلفة قليلاً عن HTML "القانونية" ، لكنها يتم تحليلها بشكل صحيح في جميع المتصفحات التي تدعم Vue.js ولا تظهر في العلامة النهائية المقدمة. التخزين النحوي هو اختياري تمامًا ، ولكن مع تعلم خطوة بخطوة ، سيكون من دواعي سروري الحصول عليها.

تم تجميع هذه المقالة في "Vue.js Front Component Learning Tutorial" ، والجميع مرحب بهم للتعلم والقراءة.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.