ટેમ્પલેટ સિન્ટેક્સ ​

Vue એ HTML-આધારિત ટેમ્પલેટ સિન્ટેક્સનો ઉપયોગ કરે છે જે તમને રેન્ડર કરેલા DOM ને અંતર્ગત ઘટક ઇન્સ્ટન્સના ડેટા સાથે ડિક્લેરેટિવ રીતે જોડવાની મંજૂરી આપે છે. બધા Vue ટેમ્પલેટ્સ સિન્ટેક્ટિકલી માન્ય HTML છે જેને સ્પેક-સુસંગત બ્રાઉઝર્સ અને HTML પાર્સર્સ દ્વારા પાર્સ કરી શકાય છે.

અંદરથી, Vue ટેમ્પલેટ્સને અત્યંત-ઓપ્ટિમાઇઝ જાવાસ્ક્રિપ્ટ કોડમાં કમ્પાઇલ કરે છે. રિએક્ટિવિટી સિસ્ટમ સાથે મળીને, જ્યારે એપની સ્ટેટ બદલાય ત્યારે Vue બુદ્ધિપૂર્વક ફરીથી રેન્ડર કરવા માટેના ઘટકોની ન્યૂનતમ સંખ્યા શોધી શકે છે અને ન્યૂનતમ DOM મેનિપ્યુલેશન્સ લાગુ કરી શકે છે.

જો તમે વર્ચ્યુઅલ DOM ખ્યાલોથી પરિચિત છો અને જાવાસ્ક્રિપ્ટની શક્તિ પસંદ કરો છો, તો તમે વૈકલ્પિક JSX સપોર્ટ સાથે ટેમ્પલેટ્સને બદલે સીધા રેન્ડર ફંક્શન્સ લખી શકો છો. જો કે, એ નોંધો કે તેઓ ટેમ્પલેટ્સ જેટલા કમ્પાઇલ-ટાઇમ ઓપ્ટિમાઇઝેશનનો આનંદ માણતા નથી.

ટેક્સ્ટ ઇન્ટરપોલેશન ​

ડેટા બાઈન્ડિંગનું સૌથી મૂળભૂત સ્વરૂપ "Mustache" સિન્ટેક્સ (ડબલ કર્લી બ્રેસીસ) નો ઉપયોગ કરીને ટેક્સ્ટ ઇન્ટરપોલેશન (text interpolation) છે:

<span>સંદેશ: {{ msg }}</span>

Mushtache ટેગને અનુરૂપ ઘટક ઇન્સ્ટન્સમાંથી msg પ્રોપર્ટીના મૂલ્ય સાથે બદલવામાં આવશે. જ્યારે પણ msg પ્રોપર્ટી બદલાશે ત્યારે તે અપડેટ પણ થશે.

રો (Raw) HTML ​

ડબલ મુસ્તાચેસ (double mustaches) ડેટાને પ્લેન ટેક્સ્ટ તરીકે અર્થઘટન કરે છે, HTML તરીકે નહીં. વાસ્તવિક HTML આઉટપુટ કરવા માટે, તમારે v-html ડિરેક્ટિવ નો ઉપયોગ કરવાની જરૂર પડશે:

<p>ટેક્સ્ટ ઇન્ટરપોલેશનનો ઉપયોગ કરીને: {{ rawHtml }}</p>
<p>v-html ડિરેક્ટિવનો ઉપયોગ કરીને: <span v-html="rawHtml"></span></p>

અહીં આપણે કંઈક નવું જોઈ રહ્યા છીએ. તમે જોઈ રહ્યાં છો તે v-html એટ્રિબ્યુટને ડિરેક્ટિવ (directive) કહેવામાં આવે છે. ડિરેક્ટિવ્સ v- થી શરુ થાય છે તે દર્શાવવા માટે કે તે Vue દ્વારા પ્રદાન કરવામાં આવેલ વિશિષ્ટ એટ્રિબ્યુટ્સ છે, અને જેમ તમે અનુમાન લગાવ્યું હશે, તે રેન્ડર કરેલા DOM માં વિશેષ રિએક્ટિવ વર્તન (behavior) લાગુ કરે છે. અહીં, અમે મૂળભૂત રીતે કહી રહ્યા છીએ કે "આ એલિમેન્ટનું આંતરિક HTML વર્તમાન એક્ટિવ ઇન્સ્ટન્સ પરની rawHtml પ્રોપર્ટી સાથે અદ્યતન રાખો."

span ની સામગ્રી rawHtml પ્રોપર્ટીના મૂલ્ય સાથે બદલવામાં આવશે, જેને પ્લેન HTML તરીકે અર્થઘટન કરવામાં આવે છે - ડેટા બાઈન્ડિંગ્સને અવગણવામાં આવે છે. નોંધ કરો કે તમે ટેમ્પલેટના ભાગોને કંપોઝ કરવા માટે v-html નો ઉપયોગ કરી શકતા નથી, કારણ કે Vue એ સ્ટ્રિંગ-આધારિત ટેમ્પલેટીંગ એન્જિન નથી. તેના બદલે, UI ના પુનઃઉપયોગ અને રચના માટે ઘટકો (components) ને મૂળભૂત એકમ તરીકે પસંદ કરવામાં આવે છે.

એટ્રીબ્યુટ બાઈન્ડિંગ્સ ​

HTML એટ્રિબ્યુટ્સની અંદર મુસ્તાચેસ (Mustaches) નો ઉપયોગ કરી શકાતો નથી. તેના બદલે, v-bind ડિરેક્ટિવ નો ઉપયોગ કરો:

<div v-bind:id="dynamicId"></div>

v-bind ડિરેક્ટિવ Vue ને એલિમેન્ટના id એટ્રિબ્યુટને કમ્પોનન્ટની dynamicId પ્રોપર્ટી સાથે સિંકમાં રાખવાની સૂચના આપે છે. જો બાઉન્ડ વેલ્યુ null અથવા undefined હોય, તો રેન્ડર કરેલા એલિમેન્ટમાંથી એટ્રિબ્યુટ દૂર કરવામાં આવશે.

શોર્ટહેન્ડ (Shorthand) ​

v-bind નો ઉપયોગ સામાન્ય હોવાથી, તેની પાસે એક સમર્પિત શોર્ટહેન્ડ સિન્ટેક્સ છે:

<div :id="dynamicId"></div>

: થી શરૂ થતા એટ્રિબ્યુટ્સ સામાન્ય HTML કરતા થોડા અલગ દેખાઈ શકે છે, પરંતુ તે વાસ્તવમાં એટ્રિબ્યુટ નામો માટે માન્ય અક્ષર છે અને તમામ Vue-સપોર્ટેડ બ્રાઉઝર્સ તેને યોગ્ય રીતે પાર્સ કરી શકે છે. વધુમાં, તે અંતિમ રેન્ડર કરેલા માર્કઅપમાં દેખાતા નથી. શોર્ટહેન્ડ સિન્ટેક્સ વૈકલ્પિક છે, પરંતુ જ્યારે તમે પછીથી તેના ઉપયોગ વિશે વધુ શીખશો ત્યારે તમે કદાચ તેની પ્રશંસા કરશો.

માર્ગદર્શિકાના બાકીના ભાગો માટે, અમે કોડ ઉદાહરણોમાં શોર્ટહેન્ડ સિન્ટેક્સનો ઉપયોગ કરીશું, કારણ કે Vue ડેવલપર્સ માટે તે સૌથી સામાન્ય વપરાશ છે.

સમાન-નામ શોર્ટહેન્ડ ​

• ફક્ત 3.4+ માં સપોર્ટેડ છે

જો એટ્રિબ્યુટનું નામ જાવાસ્ક્રિપ્ટ વેલ્યુના વેરિએબલ નામ જેવું જ હોય જેને બાઈન્ડ કરવામાં આવે છે, તો એટ્રિબ્યુટ વેલ્યુને બાદ કરવા માટે સિન્ટેક્સને વધુ ટૂંકું કરી શકાય છે:

<!-- :id="id" સમાન -->
<div :id></div>

<!-- આ પણ કામ કરે છે -->
<div v-bind:id></div>

આ જાવાસ્ક્રિપ્ટમાં ઓબ્જેક્ટ જાહેર કરતી વખતે પ્રોપર્ટી શોર્ટહેન્ડ સિન્ટેક્સ જેવું જ છે. નોંધ કરો કે આ એક એવી સુવિધા છે જે ફક્ત Vue 3.4 અને તેથી વધુમાં ઉપલબ્ધ છે.

બુલિયન એટ્રીબ્યુટ્સ ​

બુલિયન એટ્રિબ્યુટ્સ એવા એટ્રિબ્યુટ્સ છે જે એલિમેન્ટ પર તેમની હાજરી દ્વારા સાચું / ખોટું (true / false) મૂલ્યો દર્શાવી શકે છે. ઉદાહરણ તરીકે, disabled એ સૌથી વધુ ઉપયોગમાં લેવાતા બુલિયન એટ્રિબ્યુટ્સમાંનું એક છે.

v-bind આ કિસ્સામાં થોડી અલગ રીતે કામ કરે છે:

<button :disabled="isButtonDisabled">બટન</button>

જો isButtonDisabled પાસે truthy value હશે તો disabled એટ્રિબ્યુટનો સમાવેશ કરવામાં આવશે. જો વેલ્યુ ખાલી સ્ટ્રિંગ હોય તો પણ તેનો સમાવેશ કરવામાં આવશે, જે <button disabled=""> સાથે સુસંગતતા જાળવી રાખે છે. અન્ય falsy values માટે એટ્રિબ્યુટને બાદ કરવામાં આવશે.

એકસાથે બહુવિધ એટ્રીબ્યુટ્સ બાઈન્ડ કરવા ​

જો તમારી પાસે બહુવિધ એટ્રિબ્યુટ્સનું પ્રતિનિધિત્વ કરતું જાવાસ્ક્રિપ્ટ ઓબ્જેક્ટ છે જે આના જેવું લાગે છે:

const objectOfAttrs = {
  id: 'container',
  class: 'wrapper',
  style: 'background-color:green'
}

data() {
  return {
    objectOfAttrs: {
      id: 'container',
      class: 'wrapper'
    }
  }
}

તમે કોઈ આર્ગ્યુમેન્ટ વગર v-bind નો ઉપયોગ કરીને તેમને એક જ એલિમેન્ટમાં બાંધી શકો છો:

<div v-bind="objectOfAttrs"></div>

જાવાસ્ક્રિપ્ટ એક્સપ્રેશન્સનો ઉપયોગ કરવો ​

અત્યાર સુધી અમે અમારા ટેમ્પલેટ્સમાં ફક્ત સરળ પ્રોપર્ટી કીઝને બાઈન્ડ કરી રહ્યા હતા. પરંતુ Vue ખરેખર તમામ ડેટા બાઈન્ડિંગ્સમાં જાવાસ્ક્રિપ્ટ એક્સપ્રેશન્સ (JavaScript expressions) ની સંપૂર્ણ શક્તિને સપોર્ટ કરે છે:

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div :id="`list-${id}`"></div>

આ એક્સપ્રેશન્સ વર્તમાન ઘટક ઈન્સ્ટન્સના ડેટા સ્કોપમાં જાવાસ્ક્રિપ્ટ તરીકે મૂલ્યાંકન કરવામાં આવશે.

Vue ટેમ્પલેટ્સમાં, જાવાસ્ક્રિપ્ટ એક્સપ્રેશન્સનો ઉપયોગ નીચેની જગ્યાઓ પર થઈ શકે છે:

• ટેક્સ્ટ ઇન્ટરપોલેશનની અંદર (mustaches)
• કોઈપણ Vue ડિરેક્ટિવ્સના એટ્રિબ્યુટ મૂલ્યમાં (v- થી શરૂ થતા વિશેષ એટ્રિબ્યુટ્સ)

ફક્ત એક્સપ્રેશન્સ ​

દરેક બાઈન્ડિંગમાં ફક્ત એક જ એક્સપ્રેશન હોઈ શકે છે. એક્સપ્રેશન એ કોડનો ટુકડો છે જેની વેલ્યુનું મૂલ્યાંકન કરી શકાય છે. એક સરળ ચેક એ છે કે શું તેનો ઉપયોગ return પછી થઈ શકે છે.

તેથી, નીચેના કામ કરશે નહીં:

<!-- આ એક સ્ટેટમેન્ટ છે, એક્સપ્રેશન નથી: -->
{{ var a = 1 }}

<!-- ફ્લો કંટ્રોલ પણ કામ કરશે નહીં, ટર્નરી (ternary) એક્સપ્રેશન્સનો ઉપયોગ કરો -->
{{ if (ok) { return message } }}

ફંક્શન્સ કોલ કરવા ​

બાઈન્ડિંગ એક્સપ્રેશનની અંદર કમ્પોનન્ટ-એક્સપોઝ્ડ મેથડને કોલ કરવી શક્ય છે:

<time :title="toTitleDate(date)" :datetime="date">
  {{ formatDate(date) }}
</time>

ગ્લોબલ્સ એક્સેસ પર મર્યાદા ​

ટેમ્પલેટ એક્સપ્રેશન્સ સેન્ડબોક્સ (sandboxed) હોય છે અને તેમને ફક્ત ગ્લોબલ્સની મર્યાદિત સૂચિ ની જ એક્સેસ હોય છે. આ સૂચિ સામાન્ય રીતે વપરાતા બિલ્ટ-ઇન ગ્લોબલ્સ જેમ કે Math અને Date ને એક્સપોઝ કરે છે.

જે ગ્લોબલ્સ સ્પષ્ટપણે સૂચિમાં સમાવેલ નથી, ઉદાહરણ તરીકે window પર વપરાશકર્તા દ્વારા જોડાયેલ પ્રોપર્ટીઝ, ટેમ્પલેટ એક્સપ્રેશન્સમાં એક્સેસ કરી શકાશે નહીં. જો કે, તમેapp.config.globalProperties માં ઉમેરીને તમામ Vue એક્સપ્રેશન્સ માટે વધારાના ગ્લોબલ્સને સ્પષ્ટપણે વ્યાખ્યાયિત કરી શકો છો.

ડિરેક્ટિવ્સ (Directives) ​

ડિરેક્ટિવ્સ એ v- પ્રિફિક્સ સાથેના વિશિષ્ટ એટ્રિબ્યુટ્સ છે. Vue સંખ્યાબંધ બિલ્ટ-ઇન ડિરેક્ટિવ્સ પ્રદાન કરે છે, જેમાં v-html અને v-bind નો સમાવેશ થાય છે જેનો આપણે ઉપર પરિચય કરાવ્યો છે.

ડિરેક્ટિવ એટ્રિબ્યુટ વેલ્યુ ઓછી સિંગલ જાવાસ્ક્રિપ્ટ એક્સપ્રેશન્સ હોવાની અપેક્ષા રાખવામાં આવે છે (v-for, v-on અને v-slot ના અપવાદ સાથે, જેની ચર્ચા પછીથી તેમના સંબંધિત વિભાગોમાં કરવામાં આવશે). ડિરેક્ટિવનું કામ જ્યારે તેના એક્સપ્રેશનનું મૂલ્ય બદલાય ત્યારે DOM માં અપડેટ્સને રિએક્ટિવ રીતે લાગુ કરવાનું છે. ઉદાહરણ તરીકે v-if લો:

<p v-if="seen">હવે તમે મને જોઈ શકો છો</p>

અહીં, v-if ડિરેક્ટિવ seen એક્સપ્રેશનના મૂલ્યની સત્યતા (truthiness) ના આધારે <p> એલિમેન્ટને દૂર કરશે અથવા દાખલ કરશે.

આર્ગ્યુમેન્ટ્સ (Arguments) ​

કેટલાક ડિરેક્ટિવ્સ "આર્ગ્યુમેન્ટ" લઈ શકે છે, જે ડિરેક્ટિવ નામ પછી કોલન દ્વારા સૂચવવામાં આવે છે. ઉદાહરણ તરીકે, v-bind ડિરેક્ટિવનો ઉપયોગ HTML એટ્રિબ્યુટને રિએક્ટિવ રીતે અપડેટ કરવા માટે થાય છે:

<a v-bind:href="url"> ... </a>

<!-- શોર્ટહેન્ડ -->
<a :href="url"> ... </a>

અહીં, href એ આર્ગ્યુમેન્ટ છે, જે v-bind ડિરેક્ટિવને એલિમેન્ટના href એટ્રિબ્યુટને url એક્સપ્રેશનના મૂલ્ય સાથે બાંધવા માટે કહે છે. શોર્ટહેન્ડમાં, આર્ગ્યુમેન્ટ પહેલાની બધી બાબતો (એટલે ​​કે, v-bind:) એક જ અક્ષર, : માં કન્ડેન્સ્ડ છે.

બીજું ઉદાહરણ v-on ડિરેક્ટિવ છે, જે DOM ઇવેન્ટ્સને સાંભળે (listen) છે:

<a v-on:click="doSomething"> ... </a>

<!-- શોર્ટહેન્ડ -->
<a @click="doSomething"> ... </a>

અહીં, આર્ગ્યુમેન્ટ સાંભળવા માટેનું ઇવેન્ટ નામ છે: click. v-on પાસે અનુરૂપ શોર્ટહેન્ડ છે, એટલે કે @ અક્ષર. આપણે ઇવેન્ટ હેન્ડલિંગ વિશે પણ વધુ વિગતવાર વાત કરીશું.

ડાયનેમિક આર્ગ્યુમેન્ટ્સ ​

સ્ક્વેર બ્રેકેટ્સ (square brackets) સાથે લપેટીને ડિરેક્ટિવ આર્ગ્યુમેન્ટમાં જાવાસ્ક્રિપ્ટ એક્સપ્રેશનનો ઉપયોગ કરવો પણ શક્ય છે:

<!--
નોંધ કરો કે આર્ગ્યુમેન્ટ એક્સપ્રેશનમાં કેટલાક અવરોધો છે,
જેમ કે નીચેના "Dynamic Argument Value Constraints" અને "Dynamic Argument Syntax Constraints" વિભાગોમાં સમજાવ્યું છે.
-->
<a v-bind:[attributeName]="url"> ... </a>

<!-- શોર્ટહેન્ડ -->
<a :[attributeName]="url"> ... </a>

અહીં, attributeName ને જાવાસ્ક્રિપ્ટ એક્સપ્રેશન તરીકે ડાયનેમિકલી મૂલ્યાંકન કરવામાં આવશે, અને તેના મૂલ્યાંકન કરેલ મૂલ્યનો ઉપયોગ આર્ગ્યુમેન્ટ માટેના અંતિમ મૂલ્ય તરીકે કરવામાં આવશે. ઉદાહરણ તરીકે, જો તમારા ઘટકના ઇન્સ્ટન્સમાં ડેટા પ્રોપર્ટી attributeName હોય અને તેનું મૂલ્ય "href" હોય, તો આ બાઈન્ડિંગ v-bind:href ની સમાન હશે.

તે જ રીતે, તમે ડાયનેમિક ઇવેન્ટ નેમ સાથે હેન્ડલર બાંધવા માટે ડાયનેમિક આર્ગ્યુમેન્ટ્સનો ઉપયોગ કરી શકો છો:

<a v-on:[eventName]="doSomething"> ... </a>

<!-- શોર્ટહેન્ડ -->
<a @[eventName]="doSomething"> ... </a>

આ ઉદાહરણમાં, જ્યારે eventName ની વેલ્યુ "focus" હોય, ત્યારે v-on:[eventName] એ v-on:focus ની બરાબર હશે.

ડાયનેમિક આર્ગ્યુમેન્ટ વેલ્યુ પર મર્યાદાઓ ​

ડાયનેમિક આર્ગ્યુમેન્ટ્સ સ્ટ્રિંગ (string) હોવા જોઈએ, null ના અપવાદ સાથે. બાઈન્ડિંગને સ્પષ્ટપણે દૂર કરવા માટે વિશેષ મૂલ્ય null નો ઉપયોગ કરી શકાય છે. અન્ય કોઈપણ બિન-સ્ટ્રિંગ મૂલ્ય ચેતવણી ટ્રિગર કરશે.

ડાયનેમિક આર્ગ્યુમેન્ટ સિન્ટેક્સ પર મર્યાદાઓ ​

ડાયનેમિક આર્ગ્યુમેન્ટ એક્સપ્રેશનમાં કેટલીક સિન્ટેક્સ મર્યાદાઓ હોય છે કારણ કે અમુક અક્ષરો, જેમ કે સ્પેસ અને ક્વોટ્સ, HTML એટ્રિબ્યુટ નામોની અંદર અમાન્ય છે. ઉદાહરણ તરીકે, નીચેનું અમાન્ય છે:

<!-- આ કમ્પાઇલર વોર્નિંગ ટ્રિગર કરશે. -->
<a :['foo' + bar]="value"> ... </a>

જો તમારે જટિલ ડાયનેમિક આર્ગ્યુમેન્ટ પાસ કરવાની જરૂર હોય, તો તે કમ્પ્યુટેડ પ્રોપર્ટી (computed property) નો ઉપયોગ કરવો કદાચ વધુ સારું છે, જે આપણે ટૂંક સમયમાં આવરી લઈશું.

In-DOM ટેમ્પલેટ્સ (સીધી HTML ફાઇલમાં લખાયેલ ટેમ્પલેટ્સ) નો ઉપયોગ કરતી વખતે, તમારે મોટા અક્ષરો (uppercase) સાથે કી નામ રાખવાનું ટાળવું જોઈએ, કારણ કે બ્રાઉઝર્સ એટ્રિબ્યુટના નામોને લોઅરકેસ (lowercase) માં ફેરવી દેશે:

<a :[someAttr]="value"> ... </a>

ઉપરનું In-DOM ટેમ્પલેટોમાં :[someattr] માં રૂપાંતરિત થશે. જો તમારા ઘટક પાસે someattr ને બદલે someAttr પ્રોપર્ટી હોય, તો તમારો કોડ કામ કરશે નહીં. સિંગલ-ફાઇલ કમ્પોનન્ટ્સની અંદરના ટેમ્પલેટ્સ આ મર્યાદાને પાત્ર નથી.

મોડિફાયર્સ (Modifiers) ​

મોડિફાયર્સ એ બિંદુ (dot) દ્વારા સૂચવવામાં આવેલ વિશિષ્ટ પોસ્ટફિક્સીસ (postfixes) છે, જે સૂચવે છે કે ડિરેક્ટિવને કોઈ વિશેષ રીતે બાંધવું જોઈએ. ઉદાહરણ તરીકે, .prevent મોડિફાયર v-on ડિરેક્ટિવને ટ્રિગર થયેલ ઇવેન્ટ પર event.preventDefault() કોલ કરવાનું કહે છે:

<form @submit.prevent="onSubmit">...</form>

જ્યારે આપણે તે સુવિધાઓનું અન્વેષણ કરીશું ત્યારે તમે પાછળથી મોડિફાયર્સના અન્ય ઉદાહરણો જોશો, v-on માટે અને v-model માટે.

અને છેવટે, અહીં સંપૂર્ણ ડિરેક્ટિવ સિન્ટેક્સ વિઝ્યુઅલાઈઝ કરવામાં આવ્યું છે: