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 ऍप्लिकेशनमध्ये विशिष्ट वर्तन करण्यासाठी तुमची स्वतःची सानुकूल देखील तयार करू शकता.