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 એપ્લિકેશનમાં ચોક્કસ વર્તણૂકો કરવા માટે તમારો પોતાનો કસ્ટમ પણ બનાવી શકો છો.