توجيهات Vue.js

يستخدم Vue.js لغة نماذج تمثل مجموعة شاملة من HTML. يمكننا استخدام الاستيفاء والتوجيهات. تشرح هذه المقالة التوجيهات.


رأينا فيقوالب Vue.js والاستيفاءاتكيف يمكنك تضمين البيانات في قوالب Vue.

تشرح هذه المقالة التقنية الأخرى التي تقدمها Vue.js في القوالب:التوجيهات.

التوجيهات ، هي في الأساس مثل سمات HTML التي تتم إضافتها داخل القوالب. كلهم يبدأون بـv-، للإشارة إلى أن هذه سمة خاصة لـ Vue.

دعونا نرى كل توجيهات Vue بالتفصيل.

v-text

بدلاً من استخدام الاستيفاء ، يمكنك استخدامv-textالتوجيه. يؤدي نفس الوظيفة:

<span v-text="name"></span>

v-once

أنت تعرف كيف{{ name }}يرتبط بnameخاصية بيانات المكون.

في أي وقتnameالتغييرات في بيانات المكون الخاصة بك ، ستقوم Vue بتحديث القيمة الممثلة في المتصفح.

ما لم تستخدم ملفv-onceالتوجيه الذي يشبه في الأساس سمة HTML

<span v-once>{{ name }}</span>

v-html

عند استخدام الاستيفاء لطباعة خاصية بيانات ، يتم تخطي HTML. هذه طريقة رائعة يستخدمها Vue للحماية تلقائيًا منهاXSSالهجمات.

ومع ذلك ، هناك حالات تريد فيها إخراج HTML وجعل المتصفح يفسرها. يمكنك استعمال الv-htmlالتوجيه:

<span v-html="someHtml"></span>

v-bind

يعمل الاستيفاء فقط في محتوى العلامة. لا يمكنك استخدامه على السمات.

يجب أن تستخدم السماتv-bind:

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

v-bindشائع جدًا لدرجة أن هناك بناء جملة مختصرة له:

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

ربط ثنائي الاتجاه باستخدامv-model

v-modelيتيح لنا ربط عنصر إدخال نموذج على سبيل المثال ، وجعله يغير خاصية بيانات Vue عندما يغير المستخدم محتوى الحقل:

<input v-model="message" placeholder="Enter a message">
<p>Message is: {{ message }}</p>
<select v-model="selected">
  <option disabled value="">Choose a fruit</option>
  <option>Apple</option>
  <option>Banana</option>
  <option>Strawberry</option>
</select>
<span>Fruit chosen: {{ selected }}</span>

استخدام التعبيرات

يمكنك استخدام أي تعبير JavaScript داخل توجيه:

<span v-text="'Hi, ' + name + '!'"></span>
<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

يشير أي متغير مستخدم في توجيه إلى خاصية البيانات المقابلة.

الشرطية

داخل التوجيه ، يمكنك استخدام عامل التشغيل الثلاثي لإجراء فحص شرطي ، نظرًا لأن هذا تعبير:

<span v-text="name == Flavio ? 'Hi Flavio!' : 'Hi' + name + '!'"></span>

هناك توجيهات مخصصة تسمح لك بتنفيذ شروط شرطية أكثر تنظيماً:v-ifوv-elseوv-else-if.

<p v-if="shouldShowThis">Hey!</p>

shouldShowThisهي قيمة منطقية مضمنة في بيانات المكون.

الحلقات

v-forيسمح لك بتقديم قائمة بالعناصر. استخدمه معv-bindلتعيين خصائص كل عنصر في القائمة.

يمكنك التكرار على مجموعة بسيطة من القيم:

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script> export default { data() { return { items: [‘car’, ‘bike’, ‘dog’] } } } </script>

أو على مجموعة من العناصر:

<template>
  <div>
    <!-- using interpolation -->
    <ul>
      <li v-for="todo in todos">{{ todo.title }}</li>
    </ul>
    <!-- using v-text -->
    <ul>
      <li v-for="todo in todos" v-text="todo.title"></li>
    </ul>
  </div>
</template>

<script> export default { data() { return { todos: [ { id: 1, title: ‘Do something’ }, { id: 2, title: ‘Do something else’ } ] } } } </script>

v-forيمكن أن يمنحك الفهرس باستخدام:

<li v-for="(todo, index) in todos"></li>

الأحداث

v-onيسمح لك بالاستماع إلى أحداث DOM ، وتشغيل طريقة عند وقوع الحدث. هنا نستمع لحدث نقرة:

<template>
  <a v-on:click="handleClick">Click me!</a>
</template>

<script> export default { methods: { handleClick: function() { alert(‘test’) } } } </script>

يمكنك تمرير المعلمات إلى أي حدث:

<template>
  <a v-on:click="handleClick('test')">Click me!</a>
</template>

<script> export default { methods: { handleClick: function(value) { alert(value) } } } </script>

ويمكن وضع أجزاء صغيرة من JavaScript (تعبير واحد) مباشرة في القالب:

<template>
  <a v-on:click="counter = counter + 1">{{counter}}</a>
</template>

<script> export default { data: function() { return { counter: 0 } } } </script>

clickهو مجرد نوع واحد من الأحداث. حدث مشتركsubmit، والتي يمكنك ربطها باستخدامv-on:submit.

v-onشائع جدًا لدرجة أن هناك صيغة مختصرة لها ،@:

<a v-on:click="handleClick">Click me!</a>
<a @click="handleClick">Click me!</a>

مزيد من التفاصيل حولv-onفي الأحداث Vue

إظهار أو إخفاء

يمكنك اختيار إظهار عنصر فقط في DOM إذا تم تقييم خاصية معينة لمثيل Vue إلى true ، باستخدامv-show:

<p v-show="isTrue">Something</p>

لا يزال العنصر مدرجًا في DOM ، ولكنه مضبوط علىdisplay: noneإذا لم يتم استيفاء الشرط.

معدِّلات توجيه الحدث

يقدم Vue بعض معدّلات الأحداث الاختيارية التي يمكنك استخدامها مع ملفاتv-on، والتي تجعل الحدث يقوم بشيء ما تلقائيًا دون ترميزه بشكل صريح في معالج الحدث.

أحد الأمثلة الجيدة هو.prevent، الذي يتصل تلقائيًاpreventDefault()في الحدث.

في هذه الحالة ، لا يتسبب النموذج في إعادة تحميل الصفحة ، وهو السلوك الافتراضي:

<form v-on:submit.prevent="formSubmitted"></form>

تشمل المعدلات الأخرى.stopو.captureو.selfو.onceو.passiveو هموصفها بالتفصيل في الوثائق الرسمية.

التوجيهات المخصصة

تتيح لك توجيهات Vue الافتراضية بالفعل القيام بالكثير من العمل ، ولكن يمكنك دائمًا إضافة توجيهات مخصصة جديدة إذا كنت تريد ذلك.

اقرأhttps://vuejs.org/v2/guide/custom-directive.htmlإذا كنت مهتمًا بمعرفة المزيد.

تحميل مجانيكتيب Vue


المزيد من دروس vue: