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 అప్లికేషన్‌లో నిర్దిష్ట ప్రవర్తనలను నిర్వహించడానికి మీ స్వంత కస్టమ్‌ను కూడా సృష్టించవచ్చు .