کار کردن با بخش نامه ها (directives) و دستورهای شرطی (conditional rendering)
یک if-else ساده
یکی از مهم‌ترین ابزارهای مورد استفاده برای هر برنامه‌نویس، بدون در نظر گرفتن قابلیت‌های فریمورک، دستورات شرطی است. قابلیت نمایش یا مخفی کردن قسمتی از برنامه وابسته به یک شرط یا مقداری است که برنامه‌نویس آن را تعریف می‌کند.
در ادامه سعی می‌کنیم تا با تغییر دادن کدی که در قسمت قبل ارائه شد به فهم بهتر موضوع کمک کنیم. کدی که تا اینجا نوشتیم، به صورت زیر است:
<html>
<head>
<title>a simple Vue.js project</title>
</head>
<body>
<h1>Hello Vue.js!</h1>
<div id="myApp">
<p>My local property: {{ myLocalProperty }}</p>
<p>{{ newText }}</p>
<button @click="buttonClicked">Click me</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#myApp',
data: {
myLocalProperty: 'Im a local property value',
newText: ''
},
methods: {
buttonClicked() {
this.myLocalProperty = 'The button has been clicked';
this.newText = 'The new value is: ' + Math.floor( Math.random() * 100);
}
}
});
</script>
</body>
</html>
تا قبل از این قسمت، سعی کردیم که مدیریت متغیرهای محلی در برنامه انجام دهیم و سپس با اضافه کردن یک دکمه ساده، تغییراتی در آن ایجاد کردیم تا مبحث event ها را یاد بگیریم.
در ادامه با تغییر دادن متد تعریف شده روی دکمه، با دستورهای شرطی بیشتر آشنا خواهیم شد.
قبلاً متغیری به اسم newText تعریف کردیم که ترکیبی از یک رشته و یک عدد بود. ابتدا قسمت رشته‌ای ":The new value is " این متغیر را حذف کرده و آن را به یک متغیر عددی تبدیل می‌کنیم. سپس اسم آن را به randomNumber تغییر می‌دهیم. برای نمایش مقدار آن نیز کافی است که از دو تگ <p> جدید درون HTML (همان‌طور که در کد زیر نشان داده شده) استفاده کنیم.
<div id="myApp">
<p>My local property: {{ myLocalProperty }}</p>
<hr>
<button @click="buttonClicked">Click me</button>
<br>
<p v-if="randomNumber >= 50">randomNumber is >= 50!</p>
<p v-else >Sorry, randomNumber is only <b>{{ randomNumber }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<script>
const app = new Vue({
el: '#myApp',
data: {
myLocalProperty: 'Im a local property value',
randomNumber: ''
},
methods: {
buttonClicked() {
this.randomNumber = Math.floor( Math.random() * 100);
}
}
});
</script>
در HTML بالا دو تگ جدید اضافه کرده‌ایم که درون آن‌ها از دستور شرطی استفاده شده است. در تگ اول ازv-if="randomNumber >= 50"
و در تگ دوم از v-else
استفاده کردیم. V-if، یک "Directive" از فریمورک Vue.Js است. "Directive"در واقع به این معنی است که v-if یک مقدار اختصاصی برای Vue.Js است که می‌توان آن را درون تگ های Vue استفاده کرد به طوری که HTML آن را بفهمد.
در قسمت اول از شرط نوشته شده (v-if="randomNumber >= 50")، محتویات درون تگ فقط در صورتی نمایش داده می‌شوند که شرط برقرار باشد. به عبارتی، عدد تصادفی به دست آمده (randomNumber) زمانی که بزرگ‌تر از عدد 50 باشد، عبارت زیر درون مرورگر نشان داده می‌شود:!randomNumber > 50
درصورتی که این شرط برقرار نباشد قسمت دوم آن (v-else) اجرا شده و محتویات درون تگ دوم را نمایش می‌دهد.
دقت کنید که در شرط بیان شده فقط از یک v-else استفاده کرده‌ایم، اما گاهی اوقات نیاز است که از شروط زیادی استفاده کنیم که در این صورت ساختار زیر را می‌توان به کار برد:
<p v-if = " "></p>
<p v-else-if = " "></p>
.
.
.
<p v-else ></p>
اکنون index.html را در مرورگر باز کرده و با چند بار کلیک کردن روی دکمه موردنظر، خواهیم دید که محتویات نمایش داده شده در مرورگر، به صورت واکنش پذیر تغییر می‌کند.
تفاوت v-if و v-show:
برای درک تفاوت v-if با v-show باید ابزارdevtools مرورگر را باز کرده و سپس روی دکمه Click me کلیک می‌کنیم. در حالی که روی آن کلیک می‌کنیم، متوجه یک نکته بسیار مهم خواهیم شد.v-if در واقع یک ابزار برای تغییر دادن display تگ مربوطه نیست، بلکه هر زمان که مقدار شرط ما تغییر کند، تگ را اجرا کرده و یا از بین می برد. اگر بخواهیم تفاوت این دو را بهتر درک کنیم، ابتدا v-if استفاده شده در کد خود را به v-show تغییر می‌دهیم تا ببینیم چه اتفاقی می‌افتد!
متوجه خواهیم شد آن تگی که دارای v-else است دیگر نشان داده نمی‌شود. دلیل این اتفاق این است که v-show تنها یک طرفه کار می‌کند و به صورت شروط PDP ارائه نمی‌شود. به عبارتی فقط خودش به تنهایی اجرا خواهد شد و درصورتی که شرط آن برقرار نباشد display مربوط به آن اِلِمان را از حالت “block” به “none” تغییر می‌دهد.
استفاده از v-show چه فایده ای دارد؟
هنگام استفاده از v-if و در نتیجه تغییر مقدار آن، Vue باید دوباره کل DOM را بررسی کرده و تغییرات جدید را اجرا کند و در خروجی نمایش دهد. به عبارت دیگر، در هنگام تغییر مقدار متغیری که در v-if قرار داد، یک تگ حذف شده و تگ جدیدی جایگزین آن می‌شود. این در حالی است که هنگام استفاده از v-show هیچ تگی حذف یا اضافه نمی‌شود فقط کد css آن تغییر می‌کند.
پیشنهاد می‌کنیم که اگر می خواهید قسمت کوچک یا متوسطی از برنامه را چند بار تغییر دهید مثلاً یک نوار منو، v-if گزینه بهتری است. اما اگر قرار است برای مثال در صفحه ها tab جا به جا شوید یا قسمت‌های زیادی از صفحه خود را تغییر دهید، v-show از نظر عملکردی، می‌تواند بهتر باشد.
