آموزش Vue.js: دایرکتیوها در Vue — بخش ششم

در بخش قبلی این سری مقالات دیدیم که با استفاده از قالب‌ها و میان‌یابی‎های Vue.js می‌توان داده‌هایی را در صفحه جاسازی کرد. در این بخش تکنیک دیگری به نام دایرکتیوها در Vue را بررسی می‌کنیم که از سوی Vue.js در قالب‌ها به همین منظور عرضه شده است. برای مطالعه بخش قبلی روی لینک زیر کلیک کنید:

• آموزش Vue.js: آشنایی با کامپوننت‌های Vue — بخش پنجم

دایرکتیوها اساساً همانند خصوصیت‌های HTML هستند که درون قالب‌ها اضافه می‌شوند. همه آن‌ها با v-‎ آغاز می‌شوند تا مشخص شود که خصوصیت‌های ویژه Vue هستند. در ادامه به بررسی تفصیلی هر کدام از دایرکتیوهای Vue می‌پردازیم.

v-text

به جای استفاده از میان‌یابی می‌توانید از دایرکتیو v-text استفاده کنید. این دایرکتیو همان کار را انجام می‌دهد:

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

v-once

در بخش قبل دیدیم که {{ name }} چگونه به مشخصه name داده‌های کامپوننت متصل می‌شود.

فیلم آموزش ویو جی اس – فریم ورک Vue.js در جاوا اسکریپت JavaScript در فرادرس

کلیک کنید

هر زمان که name در داده‌های کامپوننت تغییر یابد، Vue مقدار نمایش یافته در مرورگر را به‌روزرسانی خواهد کرد. به جای آن می‌توان از دایرکتیو v-once استفاده کرد که اساساً شبیه یک خصوصیت HTML است:

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

v-html

زمانی که از میان‌یابی برای پرینت یک مشخصه داده استفاده می‌کنید، HTML نادیده گرفته می‌شود. این وضعیت زمانی که از Vue برای حفاظت خودکار از حمله‌های XSS استفاده می‌کنیم مناسب است. اما برخی موارد وجود دارند که می‌خواهیم خروجی HTML داشته باشیم تا مرورگر آن را تفسیر کند. در این موارد می‌توان از دایرکتیو v-html استفاده کرد:

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

v-bind

میان‌یابی تنها روی محتوای تگ اجرا می‌شود. نمی‌توان از آن روی خصوصیت‌ها استفاده کرد. خصوصیت‌ها باید از v-bind استفاده کنند:

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

<a v-bind:href="url">{{ linkText }}</a> چنان رایج است که یک ساختار اختصاری نیز برای آن وجود دارد:

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

اتصال دوطرفه با استفاده از v-model

v-model به ما امکان می‌دهد که برای مثال به یک عنصر ورودی فرم اتصال یافته و کاری کنیم که مشخصه داده Vue زمانی که کاربر محتوای فیلدی را تغییر می‌دهد، به‌روزرسانی شود:

1<input v-model="message" placeholder="Enter a message">
2<p>Message is: {{ message }}</p>

1<select v-model="selected">
2  <option disabled value="">Choose a fruit</option>
3  <option>Apple</option>
4  <option>Banana</option>
5  <option>Strawberry</option>
6</select>
7<span>Fruit chosen: {{ selected }}</span>

استفاده از عبارت‌ها

از هر نوع عبارت جاوا اسکریپت می‌توان درون دایرکتیو ها استفاده کرد:

1<span v-text="'Hi, ' + name + '!'"></span>

1<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

هر متغیری که در یک دایرکتیو استفاده شده باشد به مشخصه داده مرتبط ارجاع می‌دهد.

گزاره‌های شرطی

درون یک دایرکتیو می‌توان از عملگر سه‌تایی برای اجرای نوعی بررسی شرطی استفاده کرد، چون آن نیز یک عبارت محسوب می‌شود:

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

برخی دایرکتیو های اختصاصی مانند v-if، v-else و v-else-if وجود دارند که امکان اجرای گزاره‌های شرطی پیچیده‌تر را می‌دهند:

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

shouldShowThis یک مقدار بولی است که در داده‌های کامپوننت قرار دارد.

حلقه‌ها

v-for امکان رندر کردن یک لیست از آیتم‌ها را می‌دهد. از آن می‌توان همراه با v-bind برای تعیین مشخصه‌های هر آیتم در لیست استفاده کرد. شما می‌توانید روی یک آرایه ساده از مقادیر حلقه تکرار تعریف کنید:

1<template>
2  <ul>
3    <li v-for="item in items">{{ item }}</li>
4  </ul>
5</template>
6
7<script>
8export default {
9  data() {
10    return {
11      items: ['car', 'bike', 'dog']
12    }
13  }
14}
15</script>

همچنین این کار روی آرایه‌ای از اشیا امکان‌پذیر است:

1<template>
2  <div>
3    <!-- using interpolation -->
4    <ul>
5      <li v-for="todo in todos">{{ todo.title }}</li>
6    </ul>
7    <!-- using v-text -->
8    <ul>
9      <li v-for="todo in todos" v-text="todo.title"></li>
10    </ul>
11  </div>
12</template>
13
14<script>
15export default {
16  data() {
17    return {
18      todos: [
19        { id: 1, title: 'Do something' },
20        { id: 2, title: 'Do something else' }
21      ]
22    }
23  }
24}
25</script>

v-for نیز می‌تواند با استفاده از کد زیر اندیس را در اختیار شما قرار دهد:

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

رویدادها

v-on امکان شنیدن رویدادهای DOM را فراهم می‌سازد و زمانی که رویدادی رخ دهد، متدی را تحریک می‌کند. در کد زیر ما به یک رویداد کلیک گوش می‌دهیم:

1<template>
2  <a v-on:click="handleClick">Click me!</a>
3</template>
4
5<script>
6export default {
7  methods: {
8    handleClick: function() {
9      alert('test')
10    }
11  }
12}
13</script>

پارامترها را می‌توان به هر رویدادی ارسال کرد:

1<template>
2  <a v-on:click="handleClick('test')">Click me!</a>
3</template>
4
5<script>
6export default {
7  methods: {
8    handleClick: function(value) {
9      alert(value)
10    }
11  }
12}
13</script>

بخش‌های کوچکی از جاوا اسکریپت مانند یک عبارت منفرد را می‌توان مستقیماً درون قالب قرار داد:

1<template>
2  <a v-on:click="counter = counter + 1">{{counter}}</a>
3</template>
4
5<script>
6export default {
7  data: function() {
8    return {
9      counter: 0
10    }
11  }
12}
13</script>

click صرفاً یکی از انواع ممکن برای رویداد است. یک رویداد رایج دیگر submit است که می‌توان با استفاده v-on:submit به آن اتصال یافت.

v-on چنان رایج است که یک ساختار اختصاصی به صورت @ برای آن تعریف شده است:

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

نمایش یا پنهان‌سازی

می‌توان کدی نوشت که تنها در صورت true شدن یک مشخصه برای یک وهله از Vue یک عنصر در DOM نمایش پیدا کند. این کار از طریق v-show انجام می‌شود:

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

این عنصر همچنان در DOM قرار دارد، اما در صورت عدم برقراری شرط مورد نظر به صورت display: none تعیین می‌شود.

مادیفایر دایرکتیو رویداد

Vue مادیفایرهای اختیاری برای رویداد دارد که می‌توانیم در رابطه با v-on از آن‌ها استفاده کنیم. بدین ترتیب می‌توانیم کاری کنیم که رویداد به صوت خودکار و بدون کدنویسی صریح در دستگیره رویداد یک کار خاص را انجام دهد.

فیلم آموزش پروژه محور ویو جی اس و لاراول – طراحی وب اپلیکیشن پیش رونده PWA با Vue.js و Laravel در فرادرس

کلیک کنید

یک مثال خوب prevent. است که به صورت خودکار ()preventDefault را بر روی رویداد فرامی‌خواند. در این حال فرم از بارگذاری خودکار صفحه که رفتار پیش‌فرض است خودداری می‌کند:

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

مادیفایر های دیگر شامل ‎.stop‎ و ‎.capture و ‎.self و ‎.once و ‎.passive هستند که در مستندات Vue (+) در مورد آن‌ها به تفصیل توضیح داده شده است.

دایرکتیو های سفارشی

دایرکتیوهای پیش‌فرض Vue امکان انجام کارهای زیادی را فراهم می‌سازند، اما می‌توان در صورت نیاز دایرکتیوهای جدید دیگری را نیز اضافه کرد. برای کسب اطلاعات بیشتر در این خصوص به این صفحه (+) از مستندات مراجعه کنید. برای مطالعه بخش بعدی این سری مقالات روی لینک زیر کلیک کنید:

• آموزش Vue.js: متدها در Vue — بخش هفتم

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

• مجموعه آموزش‌‌های JavaScript (جاوا اسکریپت)
• آموزش JavaScript ES6 (جاوا اسکریپت)
• مجموعه آموزش‌های برنامه‌‌نویسی
• پنج ابزار برای توسعه سریع اپلیکیشن های Vue.js — راهنمای کاربردی
• آموزش Vue.js: آشنایی با مفاهیم مقدماتی Vue — بخش اول

==