آموزش دایرکتیوها در vue.js

دایرکتیو چیست ؟

directive ها در واقع خصوصیت های از vue هستند که با حرف v شروع شده و به ما کمک می کنند با تگ های html تعامل داشته باشیم.

دایرکتیو v-once

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

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

دایرکتیو v-html

به مثال زیر توجه کنید :

  data(){
  return{
    html:"<strong>topdemy.ir</strong>>"
  }
}

<div id="app">
  <span v-html="html"></span>
</div>

در این مثال ابتدا در قسمت data کد های html خود را ایجاد کردیم و سپس با استفاده از دایرکتیو v-html از این داده در سند html خود استفاده کردیم.

دایرکتیو v-bind

برای این که بتوانیم مقداری را به یک attribute در تگ های html متصل کنیم از v-bind استفاده می کنیم.

به مثال زیر توجه کنید :

  data(){
  return {
    src : "آدرس تصویر ما"
  }
}

<div id="app">

<img v-bind:src="آدرس تصویر در data">

</div>

در مثال بالا آدرس تصویر را درون data قرار دادیم و با استفاده از v-bind ، به تگ div با ایدی app در سند html ، آدرس مورد نظر را به تگ img متصل کردیم.

به جای استفاده از (v-bind) می توان از : برای اتصال دیتا به تگ های سند html استفاده کرد.

به مثال زیر توجه کنید :

data(){
return{
href:"https://topdemy.ir"
}
}

  <div id="app">
<a   :href="href">topdemy.ir</a>
</div>

دایرکتیو v-model

دایرکتیو v-model برای تگ های input ، select و textarea به کاربرده می شود.

data(){
  name : ""
}

<div id="app">
  <input type="text" v-model="name">
  <p>{{name}}</p>
</div>

مانند مثال بالا هنگامی که قصد داریم ورودی کاربر را از طریق فرم دریافت کنیم می توانیم از طریق یک ارتباط دو طرفه مقدار ورودی کاربر را به یک data متصل کنیم ، تا در صورت تغییر مقدار input مقدار اولیه data نیز تغییر کند ، برای این کار از v-model استفاده می کنیم.

دایرکتیوهای v-if و v-else و v-else-if

با استفاده از دایرکتیو v-if می توانیم درستی شرطی را بررسی کنیم و در صورت درست بودن شرط تگی که v-if بر روی آن اعمال شده نمایش داده می شود.

به مثال زیر توجه کنید :

  data(){
  return {
    num : 10
  }
}

<div id="app">
  <p v-if="num>5">نمایش </p>
</div>

در مثال بالا در صورتی که عبارت در رون دایرکتیو v-if صحیح باشد تگ p نمایش داده می شود.

اگر شرط ما برقرار نبود می توانیم با استفاده از دایرکتیو v-else پاراگراف بعدی را نمایش دهیم.

به مثال زیر توجه کنید :

data(){
  return {
    num : 10
  }
}

<div id="app">
  <p v-if="num>11">if</p>
  <p v-else>else</p>
</div>

در این مثال چون شرط if برقرار نیست تگ p نمایش داده می شود.

همچنین می توانیم با استفاده از دایرکتیو v-else-if شرط جدیدی را برقرار کنیم.

به مثال زیر توجه کنید :

data(){
  return {
    num : 10
  }
}

<div id="app">
  <p v-if="num>11">if</p>
  <p v-else-if="num>4">else-if</p>
  <p v-else>else</p>
</div>

دایرکتیو v-show

این دایرکتیو همانند v-if شرط مورد نظر را مورد بررسی قرار می دهد و در صورت صحیح بودن تگ html ما را نمایش داده و در غیر این صورت آن را پنهان می کند ، بر خلاف دایرکتیو v-if که در صورت نادرست بودن شرط ، تگ مورد نظر را در سند html نمایش نمی دهد.

به مثال زیر توجه کنید :

data(){
  return {
    status : true
  }
}

<div id="app">
  <span v-show="status">show</span>
</div>

در مثال بالا ، در صورتی که مقدار status برابر با true باشد تگ span نمایش داده می شود.

دایرکتیو v-for

در صورتی که آبجکت یا آرایه ای از داده ها داشته باشیم می توانیم با استفاده از این دایرکتیو به تعداد آیتم های درون آن روی المنت مورد نظر گردش کنیم.

    <ul>
    <li v-for=" name in names ">{{ name }}</li>
    </ul>

 data: {
    names: ['ali', 'mohammd']
}

دایرکتیو v-on

این دایرکتیو مانند event-listener در جاوا اسکریپت می باشد ، آرگمان پاس داده به این دایرکتیو که بعد از دونقطه است نوع event را مشخص می کند.

در مثال زیر ایونت input ، به دایرکتیو v-on پاس داده می شود:

<div id="app">
  <input type="text" v-on:input="changeName">
</div>

new Vue({
    el: '#app',
  data: {
    name: ali mousavi'
  },
  methods: {
    changeName: function(event) {
        this.name = event.target.value;
    }
  }
});

به جای استفاده از v-on می توانیم از @ استفاده کنیم.

دایرکتیو v-text

برای قرار دادن متنی داخل تگ html از طریق vue می توان از v-text استفاده کرد.

در حالت عادی برای نمایش داده ها در سند html به صورت زیر عمل میکردیم:

  data(){
  return{
    text:"topdemy"
  }
}

  <div id="app">
  {{text}}
</div>

در این مثال از دایرکتیو v-text استفاده می کنیم :

  data(){
  return{
    text:"topdemy"
  }
}

<div id="app">
  <span v-text="text"></span>
</div>