جلسه سوم: قواعد نحوی و نگارشی در Vue.js

در جلسات گذشته ابتدا توضیح مختصر و مفیدی درباره معرفی فریم ورک Vue.js ارائه دادیم. سپس به توضیح مفاهیم اساسی و بنیادی شیءگرایی در این فریم ورک قدرتمند اشاره کردیم. در نهایت ساختار هوک‌ها و چرخه اجرای برنامه را به تفصیل مورد بررسی دقیق قرار دادیم. در این جلسه قصد داریم سینکتکس (Syntax) یا به عبارت دیگر قواعد نحوی و نگارشی این فریم‌ورک را به دقت مورد بررسی قرار دهیم.

مقدمه‌ای بر قواعد نوشتاری Vue.js

قواعد نوشتاری Vue.js از زبان برنامه نویسی HTML تبعیت می‌کند که به شما اجازه می‌دهد اطلاعات را به صورت اعلانی به DOM تحت نظر داده‌ها و نمونه‌ها ارسال کنید. تمام قالب‌های Vue.js دارای HTML مورد تایید هستند که توسط بسیاری از مرورگرها پشتیبانی می‌شود.

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

درج متن

پرکاربردترین نوع ارسال داده‌ها به فرم‌ها درج متن می‌باشد.در قواعد نوشتاری Vue.js ، درج متن با استفاده از دو کروشه (سینتکس سیبیل) مورد استفاده قرار می‌گیرد. همانگونه که ملاحظه خواهید کرد، در مثال ذیل، تگ سیبیل یا همان دو کروشه به جای مقدار ویژگی messageText داخل شیء آن، جایگزین می‌شود. این مقدار هر وقت که داده‌ی شیء messageText تغییر کند، آپدیت می‌شود.

<span>Message: {{ messageText}}</span>

همچنین می‌توان برای جلوگیری از آپدیت شدن یک داده، دستور v-once را به تگ span اضافه کرد.فقط توجه داشته باشید که این اطلاعات به صورت جامع روی تمام عباراتی که درون این دو تگ قرار دارد اعمال می‌شود. به کد زیر توجه کنید:

<span v-once>This will never change: {{ messageText }}</span>

خروجی HTML

سینکتس سیبیل (دو کروشه) خروجی متن بدون وجود کدهای html را که به اصطلاح برنامه‌نویسی plain text نامیده می‌شود، در اختیار شما قرار می‌دهید. بنابراین برای داده‌ای با خروجی کامل html، می‌توان از دستور v-html استفاده کرد. به کد زیر توجه کنید:

<div v-html="rawHtml"></div>

مطالبی که به عنوان html داخل تگ قرار می‌گیرند، به صورت html پردازش می‌شوند. درنظر داشته باشید، نمی‌توانید از دستور v-html برای ساختن قالبهای جزئی (partial template) استفاده کنید، زیرا Vue یک موتور قالب‌دهی متناسب با رشته‌ها نیست. اما، این مورد را می‌توان توسط کامپوننت‌ها که به عنوان یک UI حل کرد.

توجه: درنظر داشته باشید که استفاده از کدهای html درون پروژه‌ها، وب سایت شما را در معرض حملات XSS قرار می‌دهد. فقط زمانی از دستورهای v-html استفاده کنید که مطالب ثابت هستند و تحت هیچ شرایطی توسط کاربر به صورت دینامیک تولید نمی‌شوند!

صفات

با توجه به اینکه سینتکس سیبیل قابل استفاده در صفات html نیست دستور v-bind به صورت ذیل استفاده می‌شود:

<div v-bind:id="dynamicId"></div>

این دستور همچنین با صفات boolean، کار می‌کند. به عنوان مثال در دستور زیر اگر شرایط موردنظر برقرار باشد، دکمه غیرفعال خواهد بود.

<button v-bind:disabled="someDynamicCondition">متن دکمه</button>

عبارتهای جاوا اسکریپت

در دستورهای بالا همانطور که مشاهده کردید عبارتهای بسیار ساده را مورد استفاده قرار دادیم. اما قواعد نوشتاری Vue.js از عبارتهای جاوا اسکریپت در تمام روش‌های ارسال اطلاعات، با قدرت تمام پشتیبانی می‌کند. به کدهای زیر توجه کنید:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id=" 'list-' + id "></div>

این عبارتها تحت عنوان عبارتهای جاوا اسکریپت درون یک دامنه (scope) داده مورد سنجش قرار می‌گیرند. یکی از محدودیت‌هایی که وجود دارد این است: تنها و تنها هر ارسال و دریافت داده می‌تواند شامل یک عبارت جاوا اسکریپت باشد. بنابراین مثال‌های ذیل عمل نخواهند کرد:

// این به عنوان یک جمله می باشد و نه یک عبارت
{{ var a = 1 }}

// دستورهای شرطی و کنترلی کار نمی کنند.
{{ if (ok) { return message } }}

دستورها

در قواعد نوشتاری Vue.js ، دستورها صفات ویژه‌ای هستند که با پیشوند -v آغاز می‌شوند. همانگونه که در جریان هستید، انتظار می‌رود مقادیر صفات دستوری نیز به عنوان یک عبارت جاوا اسکریپت معرفی شوند. وظیفه‌ دستوری به حالتی است که اگر مقداری تغییر کرد، یک اتفاق و رویداد به DOM گزارش شود. اجازه بدهید مثال قبلی را مورد بررسی قرار دهیم:

<p v-if="seen">Now you see Roxo.ir </p>

در این مثال، v-if دستوری می باشد که تگ و المان <p> را حذف و یا قرار می‌دهد. و این موضوع بر اساس مقدار موجود در عبارت است، که این مقدار seen می باشد.

آرگومان‌ها

برخی از عبارتهای دستوری می‌توانند آرگومانی را بپذیرند. آرگومان‌ها با استفاده از علامت دو نقطه (:) بعد از نام دستور مورد استفاده قرار می‌گیرند. برای مثال دستور v-bind برای بروزرسانی واکنشی یک صفت html به صورت ذیل می‌باشد:

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

در این مثال، href به عنوان یک آرگومان شناخته می‌شود که به عبارت دستوری v-bind می‌گوید، صفت المان href دارای مقداری از عبارت url می باشد.

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

<a v-on:click="doSomething"></a>

در این مثال آرگومان به عنوان نام یک رویداد شناخته می‌شود.بعدا، در ارتباط با کنترل کردن رویدادها، با جزئیات کامل بحث خواهیم کرد.

Modifierها

Modifierها پسوندهای ویژه‌ای هستند که با دات (.) نمایش داده می‌شوند، که برای محدود کردن برخی از دستورها مورد استفاده قرار می‌گیرند. برای مثال، مودیفایر .prevent به عبارت دستوری v-on اطلاع می‌دهد تا رویداد event.preventDefault() را فراخوانی کند:

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

بعدها به استفاده‌ی مکرر Modifierها می‌پردازیم.

فیلترها

فریم‌ورک قدرتمند Vue.js به شما اجازه‌ می‌دهد تا فیلترهایی را برای متون و عبارتهای خود، تعریف و اعمال کنید. فیلترها در دو محل از عبارتها قابل استفاده هستند: ۱) در بین دو سینتکس سیبیل (دو کروشه). ۲) در عبارتهای v-bind. فیلترها باید به انتهای عبارتهای جاوا اسکریپت اضافه شوند که با استفاده از نماد | از سایر بخش‌ها جدا می‌شوند. به کدهای زیر توجه کنید:

// داخل سینتکس سیبیل
{{ message | capitalize }}

// داخل عبارت v-bind
<div v-bind:id="rawId | formatId"></div>

همچنین می‌توان توابع فیلتر را داخل شیء Vue‌ نوشت:

var vm = new Vue({
	// ...
	filters: {
		capitalize: function (value){
			if(!value) return ''
			value = value.toString()
			return value.charAt(0).toUpperCase() + Value.slice(1)
		}
	}
})

فیلترهای می‌توانند به صورت ترکیبی مورد استفاده قرار بگیرند:

{{ message | filter A | filter B }}

فیلترها توابع جاوا اسکریپت هستند، بنابراین آنها می‌توانند توابعی را بپذیرند:

{{ message | filter('arg1', arg2 }}

در این مثال رشته‌ی خالص arg1 به عنوان آرگومان دوم به فیلتر و مقدار ارسال می‌شود و مقدار عبارت arg2 به عنوان مقدار آرگومان سوم مورد بررسی قرار می‌گیرد.

مختصرنویسی

پیشوند -v به عنوان یک مشخصه‌ی اصلی برای صفات Vue.js بکار می‌رود. قواعد نوشتاری Vue.js برای تسریع در نوشتار عبارتهای دستوری و نحوی یک سری مختصرنویسی را برای کاربران ایجاد کرده است:

مختصرنویسی v-bind:

// سینتکس کامل
<a v-bind:href="url"></a>

// مختصرنویسی
<a :href="url"></a>

مختصرنویسی v-on:

// سینتکس کامل
<a v-on:click="doSometing"></a>

// مختصرنویسی
<a @click="doSometing"></a>

جامع ترین دوره آموزشی Vue.js 2.0 در ایران را می توانید از طریق اینجا مشاهده کنید.