Directives Vue.js இல்: பயன்பாடு மற்றும் எடுத்துக்காட்டுகள்

Directives Vue.js இல் DOM இல் உள்ள உறுப்புகளுக்கு சிறப்பு நடத்தைகளைப் பயன்படுத்த உங்களை அனுமதிக்கிறது. அவை தொடரியலுடன் முன்னொட்டப்பட்டு v-, DOM ஐக் கையாளவும், நிகழ்வுகளைக் கையாளவும், உறுப்புகளை நிபந்தனையுடன் வழங்கவும் மற்றும் பலவற்றிற்கும் பயன்படுத்தப்படுகின்றன. Vue.js ஆனது, மற்றும், directives போன்ற பல உள்ளமைவை வழங்குகிறது, இது பரந்த அளவிலான பொதுவான பயன்பாட்டு நிகழ்வுகளை உள்ளடக்கியது. v-if v-for v-bind v-on

directives Vue.js இல் பொதுவான சில இங்கே:

 

1. உத்தரவு: நிபந்தனையின் அடிப்படையில் ஒரு உறுப்பை நிபந்தனையுடன் வழங்க இந்த உத்தரவு பயன்படுத்தப்படுகிறது. v-if

உதாரணமாக:

<div v-if="isShow">This element is only displayed if isShow is true.</div>

 

2. நெறிமுறை: இந்த உத்தரவு ஒரு வரிசை அல்லது ஒரு பொருளின் மீது மீண்டும் செயல்பட மற்றும் தொடர்புடைய கூறுகளை உருவாக்க பயன்படுகிறது. v-for

உதாரணமாக:

<ul>  
  <li v-for="item in items">{{ item }}</li>  
</ul>

 

3. வழிகாட்டுதல்: இந்த உத்தரவு ஒரு வெளிப்பாட்டின் மதிப்பை ஒரு தனிமத்தின் பண்பு அல்லது பண்புடன் பிணைக்கப் பயன்படுகிறது. v-bind

உதாரணமாக:

<img v-bind:src="imageUrl">

 

4. உத்தரவு: இந்த உத்தரவு ஒரு உறுப்பு மீது நிகழ்வுகளைக் கேட்கவும் கையாளவும் பயன்படுகிறது. v-on

உதாரணமாக:

 <button v-on:click="handleClick">Click me!</button>

 

5. உத்தரவு: இந்த உத்தரவு ஒரு உள்ளீட்டு உறுப்புக்கும் தரவுப் பண்புக்கும் இடையே இரு வழி பிணைப்பை உருவாக்குகிறது. v-model

உதாரணமாக:

<input v-model="message">

 

இவை directives Vue.js இல் உள்ள சில அடிப்படைகள். directives உங்கள் Vue.js பயன்பாட்டில் குறிப்பிட்ட நடத்தைகளைச் செய்ய உங்கள் சொந்த தனிப்பயனாக்கலாம் .