جلسه بیست و سوم آموزش فریم ورک vue.js : آموزش custom Directive در vue.js

آموزش custom Directive در vue.js

در جلسه قبل از آموزش vue.js به بحث فرم ها و نحوه استفاده از آنها پرداختیم ، حال در این جلسه به آموزش custom Directive در vue.js می پردازیم.

منظور از custom Directive چیست؟

علاوه بر دستورات پیش فرضی که vue.js در اختیارمون قرار می دهد، گاهی نیاز داریم که بخش هایی را به صورت سفارشی کد نویسی کنیم.

در واقع vue.js به ما امکان ایجاد دستور العمل های سفارشی را تحت عنوان custom Directive میدهد.

 

برخی از directive های موجود در vue.js:

Directive ها مثل : v-bind  ، v-if ، v-else ، v-model ، v-for و…

 

انواع Directive:

دو نوع Directive میتونیم تعریف کنیم:
1- میتونیم custom directive را داخل main.js تعریف کنیم که در این صورت به صورت global میتونیم از آن استفاده کنیم.
2- میتونیم به صورت لوکال و مختص به یک کامپوننت خاص از آن استفاده کنیم.

معمولا ممکن است برای برخی دسترسی های DOM در سطح پایین احتیاج داشته باشیم که یک دستورالعمل سفارشی مثل Custom Directive را ایجاد کنیم.

متدهای Directive:

ما در Directive به 5 تا متد دسترسی داریم.

الف : bind : فقط یکبار زمانیکه directive برای اولین بار به عنصر bind می شود، فراخوانی میشود
دارای 3 متغیر ورودی:
متغیر ورودی اول : المنتی که میخواهیم bindکنیم
متغیر ورودی دوم : binding که object ایست شامل یکسری اطلاعات شامل موارد زیر:
– Name : نام directive بدون v-
– Value: مقداری که به directive پاس داده می شود
– oldValue : مقدار قبلی که فقط در updated و componentUpdated در دسترس است
– Expression
– Arg
– modifiers
متغیر ورودی سوم : vnode هست که گره مجازی ای است که توسط کامپایلر vue.js تولید می شود؛ و چون درون هسته vue کنترل می شود بهش دست نمی زنیم.

ب : فانکشن Inserted : که زمانیکه متد داخل Dom قرار میگیرد و در گره والد قرار میگیرد فراخوانی می شود و مثل bind همان ورودی ها را دارد.

ج : متد Updated که زمانیکه کامپوننت آپدیت میشود فراخوانی می شود.
مقادیر ورودی علاوه بر 3 پارامتر ورودی بالا؛ یک oldVnode هم اضافه داره که حاوی نود مجازی قبلی است و باز بهش دست نمیزنیم.

د: فانکشن componentUpdated : این متد زمانیکه کامپوننت و فرزنداش باهم تغییر کنند، اجرا می شود و ورودی هاش شبیه updated هست.

ی: فانکشن unbind() : که زمانی فراخوانی میشه که Directive حذف شود و ورودی هاش مثل bind هست.

به عنوان مثال میخواهیم یک Directive ایجاد کنیم که بیاد به پاراگرافمون یک رنگ و padding و … بده
یا در مثال دیگری میخواهیم که روی یک input، focus کنیم

حال مثال اول یعنی ایجاد directive استایل دهی به روش زیر عمل میکنیم:

تعریف directive به صورت عمومی:

1- همانند کامپوننت ، ابتدا باید داخل mian.js یک directive به شکل زیر تعریف کنیم:

Vue.directive();

2- حالا باید یک نام و بعد object برای Directive در نظر بگیریم؛ و بعد داخل object یکسری تنظیمات را انجام بدهیم.

Main.js

Vue.directive('custom', {
bind(el, binding, vnode) {

    el.style.color = 'yellow';
    el.style.padding = '20px';
    el.style.fontSize = '1.5em';
    el.style.backgroundColor = 'gray';
  }
});

نکته : در استایل هایی که از طریق Directive میدهیم، – نداریم و به جای – ، حرف اول بزرگ میشه، مثلا font-size میشه fontSize

App.vue

<p v-custom>this paragraph has custom directive</p>

حال در صورتی که بخواهیم مقدار color را داینامیک کنیم:
1- در main.js

Vue.directive('custom', {
  bind(el, binding, vnode) {
    
        el.style.color = binding.value;
  }
});

2- در app.vue

<p v-custom ="'yellow'">this paragraph has custom directive</p>

در اینجا از binding.value استفاده کردیم.
نکته : حتما توجه کنید که مقدار باید داخل “‘ ‘” قرار بگیرد و داخل کوتیشن تنها کار نمیکند. چرا که میتوانیم برای تمام استایل ها binding.value تعریف کنیم و مقادیر را در vue ، از هم جدا کنیم.

v-custom ="'block','30px'"

ارسال ارگومان:
ما میتوانیم به v-custom ، آرگومان هم ارسال کنیم؛ یعنی مثلا میتونیم بگیم که v-custom برای color هست به شکل زیر:

App.vue

<p v-custom:textcolor ="'yellow'">this paragraph has custom directive</p>

Main.js

Vue.directive('custom', {
  bind(el, binding, vnode) {
   
      if (binding.arg === 'textcolor') {
        el.style.color = binding.value;
      }

  }
});

Modifier ها:

مثلا میخواهیم بگیم که تغییر رنگ را با تاخیر انجام بده:

App.vue

<p v-custom:textcolor.delayed="'yellow'">this paragraph has custom directive</p>


Vue.directive('custom', {
  bind(el, binding, vnode) {
    var delay = 0;

    if (binding.modifiers['delayed']) {
      delay = 3000;
    }

    setInterval(() => {
      if (binding.arg === 'textcolor') {
        el.style.color = binding.value;
      }
    }, delay);

  }
});

تعریف directive به صورت اختصاصی برای یک کامپوننت:

App.vue

<template>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <h1>Create Custom Directives</h1>
       <hr>
        <p v-test="{color:'blue',padding:'30px',fontSize:'2em'}">this paragraph has local directive</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {},
  directives: {
    test: {
      bind(el, binding, vnode) {
        el.style.padding = binding.value.padding;
        el.style.color = binding.value.color;
        el.style.fontSize = binding.value.fontSize;
        el.style.backgroundColor = "green";
      }
    }
  }
};
</script>

در بالا اومدیم به جای اینکه directive را داخل main.js تعریف کنیم، آن را داخل خود کامپوننتی که میخواهیم و به شکل بالا تعریف میکنیم.
دیگه این دیرکتیو فقط در همین کامپوننت در دسترس است.

نکته : همانطور که در بالا مشاهده میکنیم به صورت object هم مقادیر را میتوانیم دریافت کنیم.

        el.style.padding = binding.value.padding;

مثال دوم: میخواهیم روی input، focus ایجاد کنیم:
1- به صورت public داخل main.js داریم:

// Register a global custom directive called `v-focus`
Vue.directive('focus', {
  // When the bound element is inserted into the DOM...
  inserted: function (el) {
    // Focus the element
    el.focus()
  }
})

App.vue

<input v-focus>

2- به صورت اختصاصی داخل App.vue داریم:

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

مثال سوم :
حال در مثال دیگری میخواهیم directive ای ایجاد کنیم که موقعیت یک آیتم را به صورت ثابت و با فاصله 200px از بالا قرار دهد:

App.vue

<div id="baseexample">
  <p>Scroll down the page</p>
  <p v-pin="200">Stick me 200px from the top of the page</p>
</div>

Main.js

Vue.directive('pin', {
  bind: function (el, binding, vnode) {
    el.style.position = 'fixed'
    el.style.top = binding.value + 'px'
  }
})

new Vue({
  el: '#baseexample'
})

حالا میخواهیم آرگومانی ارسال کنیم که جهت را مشخص کند که ممکنه left یا top باشد:

App.vue

<div id="dynamicexample">
  <h3>Scroll down inside this section ↓</h3>
  <p v-pin:[direction]="200">I am pinned onto the page at 200px to the left.</p>
</div>

Main.js

Vue.directive('pin', {
bind: function (el, binding, vnode) {
el.style.position = 'fixed'
var s = (binding.arg == 'left' ? 'left' : 'top')
el.style[s] = binding.value + 'px'
}
})

new Vue({
el: '#dynamicexample',
data: function () {
return {
direction: 'left'
}
}
})

برچسب‌ها:

با کامنت گذاری ما را در ارائه آموزش بهتر یاری کنید

026-32601 داخلی 4

info@pinsite.ir

ثبت سفارش طراحی سایت

برای دریافت تخفیف، در هنگام تماس، نحوه آشنایی با شرکت را از طریق سایت pinsite.ir اعلام کنید