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

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

در این جلسه سینتکس (Syntax) یا قواعد نحوی و نگارش فریم‌ورک vuejs را به دقت مورد بررسی قرار می دهیم.

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

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

قالب‌های 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 استفاده کنید که مطالب ثابت هستند و تحت هیچ شرایطی توسط کاربر به صورت دینامیک تولید نمی‌شوند!

صفات

با توجه به اینکه syntax {{ }} قابل استفاده در صفات 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 FaghatLaravel.com </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>

فیلترها

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

1) در بین دو سینتکس {{ }} 2) در عبارتهای 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>

 

مطالب مشابه