آموزش Directive‌ های Vue.js | استفاده از v-model، v-bind و v-show با مثال

Directiveها در Vue.js دستورالعمل‌هایی هستند که به‌صورت خاص به عناصر HTML اعمال می‌شوند تا رفتار و ویژگی‌های آن‌ها را کنترل کنند. سه مورد از پرکاربردترین Directiveها در Vue شامل v-model، v-bind و v-show هستند که به شما کمک می‌کنند تا داده‌ها را در ورودی‌ها مدیریت کرده، ویژگی‌های HTML را به‌صورت داینامیک تنظیم کنید و نمایش عناصر را کنترل نمایید. در این مقاله به معرفی و استفاده از این Directiveها در Vue.js می‌پردازیم.

Directive v-model

v-model برای ایجاد ارتباط دوطرفه داده‌ها (two-way data binding) بین عنصر HTML و داده‌های Vue استفاده می‌شود. این ویژگی به شما اجازه می‌دهد تا هر تغییری که در عنصر ورودی اتفاق می‌افتد به‌طور مستقیم در داده‌های Vue ذخیره شود و برعکس.

مثال ساده:

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

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        message : ' '
      } ;
    }
  } ) ;

در این مثال، هر تغییری که در ورودی متنی (input) ایجاد شود به‌صورت خودکار در داده message ذخیره می‌شود و Vue.js این تغییر را به DOM نیز منتقل می‌کند.

کاربردهای v-model در ورودی‌های مختلف:

• چک‌باکس (Checkbox): مدیریت حالت انتخاب یا عدم انتخاب.

• رادیو باتن‌ها (Radio Buttons): ذخیره مقدار انتخاب شده.

• لیست کشویی (Select Box): ذخیره گزینه انتخاب شده.

مثال استفاده از v-model در چک‌باکس و رادیو:

< div id = " app " >
  < input type = " checkbox " v-model = " isChecked " > Accept Terms
  < p > Accepted: { { isChecked } } < / p >

  < input type = " radio " v-model = " picked " value = " Option A " > Option A
  < input type = " radio " v-model = " picked " value = " Option B " > Option B
  < p > Picked: { { picked } } < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        isChecked : false ,
        picked : ' '
      } ;
    }
  } ) ;

در این مثال، isChecked مقدار چک‌باکس و picked مقدار دکمه‌های رادیویی را ذخیره می‌کنند.

Directive v-bind

v-bind برای اتصال داینامیک ویژگی‌ها و مقادیر به عناصر HTML استفاده می‌شود. با v-bind می‌توان هر ویژگی HTML (مانند href، src، class و style) را بر اساس مقادیر داینامیک تغییر داد.

استفاده از v-bind برای تنظیم ویژگی‌ها

مثال:

< div id = " app " >
  < a v-bind:href = " url " > Go to Vue.js < / a >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        url : ' https://vuejs.org '
      } ;
    }
  } ) ;

در این مثال، v-bind:href مقدار url را به‌صورت پویا به ویژگی href عنصر a متصل می‌کند.

استفاده از v-bind برای کلاس‌ها و استایل‌ها

با استفاده از v-bind می‌توانید کلاس‌ها و استایل‌ها را به‌صورت پویا تنظیم کنید. این قابلیت برای کنترل ظاهر عناصر و استایل‌دهی داینامیک به کار می‌رود.

مثال: تغییر کلاس‌ها با v-bind:

< div id = " app " >
  < button v-bind:class = " { active: isActive } " @click = " toggleActive " >
    Toggle Active
  < / button >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        isActive: false
      } ;
    } ,
    methods : {
      toggleActive ( ) {
        this.isActive = !this.isActive ;
      }
    }
  } ) ;

  .active {
    color : white ;
    background-color : green ;
  }

در این مثال، کلاس active تنها زمانی به دکمه اعمال می‌شود که isActive مقدار true داشته باشد و استایل‌های آن دکمه تغییر می‌کند.

Directive v-show

v-show یک Directive برای کنترل نمایش و مخفی‌سازی عناصر است. این ویژگی با تنظیم مقدار display در CSS، عنصر را از دید کاربر پنهان می‌کند بدون اینکه آن را به‌طور کامل از DOM حذف کند.

مثال ساده از v-show:

< div id = " app " >
  < button @click = " toggleVisibility " > Toggle Visibility < / button >
  < p v-show = " isVisible " > This text is visible < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        isVisible : true
      } ;
    } ,
    methods : {
      toggleVisibility ( ) {
        this.isVisible = !this.isVisible;
      }
    }
  } ) ;

در این مثال:

• دکمه هر بار که کلیک می‌شود، مقدار isVisible را تغییر می‌دهد.

• با استفاده از v-show، پاراگراف تنها زمانی نمایش داده می‌شود که isVisible مقدار true داشته باشد.

تفاوت v-show و v-if

v-show تنها مقدار display را در CSS تنظیم می‌کند، در حالی که v-if عنصر را کاملاً از DOM حذف و مجدداً اضافه می‌کند. به این ترتیب:

• v-show زمانی بهتر است که نمایش یا مخفی‌سازی متناوب مورد نیاز باشد.

• v-if زمانی بهتر است که نیازی به رندر مجدد عنصر نباشد.

استفاده ترکیبی از v-model، v-bind و v-show

می‌توانید از این Directiveها به‌صورت ترکیبی برای ایجاد رفتارهای پیچیده‌تر استفاده کنید.

مثال: ساخت فرم با استفاده از v-model، v-bind و v-show

< div id = " app " >
  < form @submit.prevent = " submitForm " >
    < label for = " username " > Username: < / label >
    < input type = " text " v-model = " username " id = " username " >

    < label for = " age " > Age: < / label >
    < input type = " number " v-model = " age " id = " age " >

    < button :disabled = " !isFormValid " > Submit < / button >
  < / form >

  < p v-show = " submitted " > Thank you, { { username } } ! Your age is { { age } }. < / p >
< / div >

  new Vue ( {
    el : ' #app ' ,
    data ( ) {
      return {
        username : ' ' ,
        age : null ,
        submitted : false
      } ;
    } ,
    computed : {
      isFormValid ( ) {
        return this.username.length > 2 && this.age > 0 ;
      }
    } ,
    methods : {
      submitForm ( ) {
        this.submitted = true ;
      }
    }
  } ) ;

در این مثال:

• از v-model برای اتصال داده‌ها به فیلدهای ورودی استفاده شده است.

• از v-bind:disabled برای غیرفعال کردن دکمه ارسال در صورتی که فیلدها معتبر نباشند استفاده شده است.

• با v-show نمایش پیام تایید پس از ارسال فرم کنترل می‌شود.

نتیجه‌گیری

Directiveها مانند v-model، v-bind و v-show ابزارهای قدرتمندی برای کنترل رفتار و ویژگی‌های عناصر HTML در Vue.js هستند. این قابلیت‌ها کمک می‌کنند تا فرم‌ها و عناصر داینامیک ایجاد کنید، داده‌ها را مدیریت کنید و به کاربر تجربه‌ای تعاملی و پویا ارائه دهید. با درک و استفاده صحیح از این Directiveها، می‌توانید برنامه‌های Vue خود را بهبود دهید و توسعه را آسان‌تر و سریع‌تر انجام دهید.