اصول قالب در Vue

اصول آموزش vuejs

تاریخ : سه شنبه 02 مهر 1398

ایجاد نمونه (Creating a Vue Instance)

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

Vue قالبها را به توابع DOM مجازی کامپایل می کند. همراه با سیستم واکنش پذیری ، Vue قادر است هوشمندانه به حداقل تعداد کامپوننت ها جهت رندر مجدد و اعمال حداقل دستکاری DOM هنگام تغییر وضعیت برنامه ، پی برد.


متن (Text)

معمول ترین شکل اتصال داده ها استفاده از نحو Mustache (دابل براکت) می باشد :

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

متن Mustache با مقدار ویژگی msg در شی داده مربوطه جایگزین می شود. همچنین هرگاه مقدار ویژگی خاصیت داده شی تغییر کند متن آن نیز بروزرسانی می شود.

شما همچنین می توانید عمل جایگذاری را یک بار انجام دهید که با استفاده از دستورالعمل v-once داده ها بیش از یکبار بروزرسانی نمی شود ، اما در نظر داشته باشید که این امر می تواند بر روی اتصال داده در سایر گره ها (node) نیز تأثیرگذار باشد:

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


داده نوع (Raw HTML)

استفاده از نحو (mustaches) برای داده های متنی کاربرد دارد. جهت داده های HTML شما می توانید از دایرکتیو v-html استفاده نمایید :

<div id="app-1">
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
 var app1 = new Vue({
    el: '#app-1',
    data: {
    rawHtml: '<span style="color: red">This should be red.</span>'
    }
 })

Using mustaches: {{ rawHtml }}

Using v-html directive:

رندر داینامیکی HTML دلخواه در وب سایت شما می تواند بسیار خطرناک باشد زیرا به راحتی می تواند منجر به آسیب پذیری XSS شود. فقط از جایگذاری HTML بر روی محتوای قابل اعتماد استفاده شود و هرگز در محتوای ارائه شده توسط کاربر استفاده نکنید.


صفات (Attributes)

نحو(Mustaches) را نمی توان در صفات HTML استفاده کرد. در عوض می توانید از دستورالعمل v-bind استفاده نمایید:

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

در مورد صفات boolean ، جایی که شرط آنها منتهی بر true می شود ، v-bind کمی متفاوت عمل می کند. در این مثال:

<button v-bind:disabled="isButtonDisabled">Button</button>

اگر isButtonDisabled مقدار null، undefined یا false داشته باشد ، ویژگی disabled حتی در عنصر <button> نیز درج نخواهد شد.


استفاداه از عبارات جاوااسکریپت(Using JavaScript Expressions)

Vue.js از تمام عبارات جاوا اسکریپت در کلیه اتصالات داده پشتیبانی می کند:

 {{ number + 1 }}
 
 {{ ok ? 'YES' : 'NO' }}
 
 {{ message.split('').reverse().join('') }}
 
 <div v-bind:id="'list-' + id"></div>

 

یک محدودیت این است که هر اتصال فقط می تواند یک عبارت واحد داشته باشد ، بنابراین موارد زیر کار نمی کند:

  <!-- this is a statement, not an expression: -->
  {{ var a = 1 }}
  
  <!-- flow control won't work either, use ternary expressions -->
  {{ if (ok) { return message } }}
  
عبارات قالب فقط به لیست سفید از توابع مانند Math و Date دسترسی دارند و شما نباید سعی کنید در عبارات به توابع تعریف شده توسط کاربر دسترسی داشته باشید


استفاداه از دایرکتیو(Directives)

دایرکتیوها ویژگی های خاصی با پیشوند -v هستند و مقدار آن، یک عبارت جاوا اسکریپت واحد می باشد(به استثنای v-for ، که بعداً مورد بحث قرار خواهد گرفت). کار یک دایرکتیو این است که وقتی مقدار یک عبارت تغییر کرد ، تاثیر آن را روی DOM اعمال نماید. بیایید مثالی را که در مقدمه دیدیم مرور کنیم:

<p v-if="seen">Now you see me</p>
  

در اینجا ، دستورالعمل v-if عنصر <p> را براساس نتیجه عبارتی که دیده می شود ، حذف یا درج می کند.


آرگومان ها در دایرکتیو(Arguments)

برخی از دایرکتیوها می توانند یک آرگومان دریافت کنند ، که پس از نام دایرکتیو توسط کاراکتر : مشخص شده اند. به عنوان مثال ، دستورالعمل v-bind برای به روزرسانی واکنشی یک ویژگی HTML استفاده می شود:

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

در اینجا href آرگومانی است که به دایرکتیو v-bind می گوید ویژگی href عنصر را به مقدار عبارت url متصل کند.

مثال دیگر دایرکتیو v-on است که به رویدادهای DOM گوش می دهد:

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

در اینجا آرگومان، نام رویدادی جهت گوش دادن به است. ما در مورد جزئیات رویدادها نیز با جزئیات بیشتری صحبت خواهیم کرد.


آرگومان های داینامیک(Dynamic Arguments)

از نسخه 2.6.0 ، همچنین می توانید از یک عبارات جاوا اسکریپت به عنوان یک آرگومان دایرکتیو در درون [] استفاده نمایید:

<!--
  Note that there are some constraints to the argument expression, as explained
  in the "Dynamic Argument Expression Constraints" section below.
  -->
  <a v-bind:[attributeName]="url"> ... </a>
  
var vm = new Vue({
     el: '#app',
     data: {
         attributename : 'href',
         url : 'http://farhadnote.ir'
     }
 })

در اینجا attributeName به صورت پویا به عنوان یک عبارت جاوا اسکریپت ارزیابی می شود و از مقدار ارزیابی شده آن به عنوان مقدار نهایی برای آرگومان استفاده می شود. به عنوان مثال ، اگر نمونه Vue شما دارای ویژگی داده attributename باشد و مقدار آن برابر "href" است ، این معادل است با v-bind: href.

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

<a v-on:[eventName]="doSomething"> ... </a>
  
var vm = new Vue({
     el: '#app',
     data: {
         eventname : 'click'
     },
     methods: {
         doSomething : function(){
             alert('hello world');
         }
     }
 })

در این مثال، زمانیکه مقدار eventname برابر "click" باشد آنگاه v-on:[eventName] معادل v-on:click خواهد شد.


محدودیت های مقدار (Dynamic Argument Value Constraints)

انتظار می رود آرگومان های پویا ، یک رشته را به استثنای null ارزیابی کنند. از مقدار ویژه null می توان جهت حذف صریح اتصال استفاده کرد. هر مقدار غیر رشته ای دیگر باعث ایجاد اخطار می گردد.

محدودیت های عبارات (Dynamic Argument Expression Constraints)

عبارات آرگومان پویا محدودیت های نحوی دارند زیرا برخی از کاراکترها ها مانند فضاها و نقل قول ها در نام های ویژگی های HTML نامعتبر هستند. به عنوان مثال موارد زیر نامعتبر است:

<!-- This will trigger a compiler warning. -->
   <a v-bind:['foo' + bar]="value"> ... </a>
   

راه حل این است که یا از عبارات بدون فاصله یا نقل قول استفاده کنید ، یا عبارت پیچیده را با یک ویژگی computed جایگزین کنید.

هنگام استفاده از قالب ها در DOM (قالب هایی که مستقیماً در یک فایل HTML نوشته شده اند) ، باید از نامگذاری کلیدها با کاراکترهای بزرگ خودداری کنید ، زیرا مرورگرها اسم ویژگی ها را به حروف کوچک محدود می کنند:

<!--
 This will be converted to v-bind:[someattr] in in-DOM templates.
 Unless you have a "someattr" property in your instance, your code won't work.
 -->
 <a v-bind:[someAttr]="value"> ... </a>   
    


اصلاح کننده ها(Modifiers)

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

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

در آینده این ویژگیها را بررسی کرده و نمونه های دیگری از اصلاح کننده ها را برای مدل v-on و v-model مشاهده خواهید کرد.


مختصرنویسی(Shorthands)

پیشوند -v به عنوان یک نشانه بصری برای شناسایی ویژگی های خاص Vue در قالب های شما استفاده می شود. این زمانی مفید است که از Vue.js برای اعمال رفتار پویا در برخی از نشانه های(markup) موجود استفاده می کنید ، اما می تواند موجب طولانی شدن برای برخی از دایرکتیوهایی که اغلب استفاده می شود گردد. در عین حال نیاز به پیشوند v-، هنگام ساختن SPA ، جایی که Vue هر الگویی را مدیریت می کند اهمیت کمتری می یابد. بنابراین ، Vue برای دو مورد از دایرکتیوهای متداول ، v-bind و v-on اصلاحات ویژه ای را ارائه می دهد:


اختصار v-bind

<!-- full syntax -->
   <a v-bind:href="url"> ... </a>
   
   <!-- shorthand -->
   <a :href="url"> ... </a>
   
   <!-- shorthand with dynamic argument (2.6.0+) -->
   <a :[key]="url"> ... </a>
   


اختصار v-on

<!-- full syntax -->
<a v-on:click="doSomething"> ... </a>

<!-- shorthand -->
<a @click="doSomething"> ... </a>

<!-- shorthand with dynamic argument (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
   

آنها ممکن است کمی متفاوت از HTML نرمال به نظر برسند ، اما: و @ کاراکترهای برای نام ویژگی ها هستند و همه مرورگرهای دارای پشتیبانی Vue می توانند آن را به درستی تجزیه کنند. علاوه بر این ، آنها در مارک نهایی رندر شده ظاهر نمی شوند. نحو shorthand کاملاً اختیاری است.


منابع مورد مطالعه جهت جمع آوری این مطلب:
https://vuejs.org/v2/guide/syntax.html

نظرات