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 ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਖਾਸ ਵਿਵਹਾਰ ਕਰਨ ਲਈ ਆਪਣੀ ਖੁਦ ਦੀ ਕਸਟਮ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ ।