Vue.js

Appearance

On this page

બિલ્ટ-ઇન ડાયરેક્ટિવ્સ (Built-in Directives) ​

v-text ​

એલિમેન્ટનું ટેક્સ્ટ કન્ટેન્ટ અપડેટ કરે છે.

v-html ​

એલિમેન્ટના innerHTML ને અપડેટ કરે છે.

  • અપેક્ષા રાખે છે (Expects): string

  • વિગત (Details)

    v-html નું કન્ટેન્ટ સાદા HTML તરીકે દાખલ કરવામાં આવે છે - Vue ટેમ્પ્લેટ સિન્ટેક્સ પ્રોસેસ કરવામાં આવશે નહીં. જો તમે તમારી જાતને v-html નો ઉપયોગ કરીને ટેમ્પ્લેટ્સ કમ્પોઝ કરવાનો પ્રયાસ કરતા જુઓ છો, તો તેના બદલે ઘટકો (components) નો ઉપયોગ કરીને ઉકેલ વિશે ફરીથી વિચારવાનો પ્રયાસ કરો.

    સુરક્ષા નોંધ (Security Note)

    તમારી વેબસાઇટ પર મનસ્વી રીતે ડાયનેમિકલી HTML રેન્ડર કરવું ખૂબ જોખમી હોઈ શકે છે કારણ કે તે સરળતાથી XSS એટેક તરફ દોરી શકે છે. માત્ર વિશ્વસનીય કન્ટેન્ટ પર જ v-html નો ઉપયોગ કરો અને વપરાશકર્તા દ્વારા પ્રદાન કરાયેલ કન્ટેન્ટ પર ક્યારેય નહીં.

    સિંગલ-ફાઈલ કમ્પોનન્ટ્સ (Single-File Components) માં, scoped સ્ટાઈલ્સ v-html ની અંદરના કન્ટેન્ટને લાગુ થશે નહીં, કારણ કે તે HTML Vue ના ટેમ્પ્લેટ કમ્પાઈલર દ્વારા પ્રોસેસ કરવામાં આવતું નથી. જો તમે સ્કોપ્ડ CSS સાથે v-html કન્ટેન્ટને ટાર્ગેટ કરવા માંગતા હો, તો તેના બદલે તમે CSS મોડ્યુલ્સ (CSS modules) અથવા BEM જેવી મેન્યુઅલ સ્કોપિંગ વ્યૂહરચના સાથે વધારાના, ગ્લોબલ <style> એલિમેન્ટનો ઉપયોગ કરી શકો છો.

  • Example

    template
    <div v-html="html"></div>

  • આ પણ જુઓ ટેમ્પ્લેટ સિન્ટેક્સ - રો HTML (Raw HTML)

v-show ​

એક્સપ્રેશન વેલ્યુની ટ્રુથિ-નેસ (truthy-ness) ના આધારે એલિમેન્ટની વિઝિબિલિટી (visibility) ટોગલ કરે છે.

  • અપેક્ષા રાખે છે (Expects): any

  • વિગત (Details)

    v-show ઇનલાઇન સ્ટાઇલ દ્વારા display CSS પ્રોપર્ટી સેટ કરીને કામ કરે છે, અને જ્યારે એલિમેન્ટ દૃશ્યમાન હોય ત્યારે પ્રારંભિક display કિંમતને માન આપવાનો પ્રયાસ કરશે. જ્યારે તેની સ્થિતિ બદલાય છે ત્યારે તે ટ્રાન્ઝિશનને પણ ટ્રિગર કરે છે.

  • આ પણ જુઓ કન્ડિશનલ રેન્ડરિંગ - v-show

v-if ​

એક્સપ્રેશન વેલ્યુની ટ્રુથિ-નેસના આધારે શરતી રીતે એલિમેન્ટ અથવા ટેમ્પ્લેટ ફ્રેગમેન્ટ રેન્ડર કરે છે.

  • અપેક્ષા રાખે છે (Expects): any

  • વિગત (Details)

    જ્યારે v-if એલિમેન્ટ ટોગલ કરવામાં આવે છે, ત્યારે એલિમેન્ટ અને તેના સમાવિષ્ટ ડાયરેક્ટિવ્સ / ઘટકો નાશ પામે છે અને ફરીથી બનાવવામાં આવે છે. જો પ્રારંભિક સ્થિતિ ફોલ્સ (falsy) હોય, તો આંતરિક કન્ટેન્ટ બિલકુલ રેન્ડર થશે નહીં.

    માત્ર ટેક્સ્ટ અથવા બહુવિધ એલિમેન્ટ્સ ધરાવતા કન્ડિશનલ બ્લોકને દર્શાવવા માટે <template> પર વાપરી શકાય છે.

    જ્યારે તેની સ્થિતિ બદલાય છે ત્યારે આ ડાયરેક્ટિવ ટ્રાન્ઝિશનને ટ્રિગર કરે છે.

    જ્યારે સાથે ઉપયોગમાં લેવામાં આવે છે, ત્યારે v-if ની અગ્રતા (priority) v-for કરતા વધારે હોય છે. અમે એક એલિમેન્ટ પર આ બે ડાયરેક્ટિવ્સનો સાથે ઉપયોગ કરવાની ભલામણ કરતા નથી — વિગતો માટે લિસ્ટ રેન્ડરિંગ ગાઇડ જુઓ.

  • આ પણ જુઓ કન્ડિશનલ રેન્ડરિંગ - v-if

v-else ​

v-if અથવા v-if / v-else-if ચેઇન માટે "else બ્લોક" સૂચવે છે.

  • એક્સપ્રેશનની અપેક્ષા રાખતું નથી

  • વિગત (Details)

    • પ્રતિબંધ: અગાઉના સિબલિંગ (sibling) એલિમેન્ટમાં v-if અથવા v-else-if હોવું આવશ્યક છે.

    • માત્ર ટેક્સ્ટ અથવા બહુવિધ એલિમેન્ટ્સ ધરાવતા કન્ડિશનલ બ્લોકને દર્શાવવા માટે <template> પર વાપરી શકાય છે.

  • Example

    template
    <div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

  • આ પણ જુઓ કન્ડિશનલ રેન્ડરિંગ - v-else

v-else-if ​

v-if માટે "else if બ્લોક" સૂચવે છે. તેને ચેઇન કરી શકાય છે.

  • અપેક્ષા રાખે છે (Expects): any

  • વિગત (Details)

    • પ્રતિબંધ: અગાઉના સિબલિંગ એલિમેન્ટમાં v-if અથવા v-else-if હોવું આવશ્યક છે.

    • માત્ર ટેક્સ્ટ અથવા બહુવિધ એલિમેન્ટ્સ ધરાવતા કન્ડિશનલ બ્લોકને દર્શાવવા માટે <template> પર વાપરી શકાય છે.

  • Example

    template
    <div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

  • આ પણ જુઓ કન્ડિશનલ રેન્ડરિંગ - v-else-if

v-for ​

સ્રોત ડેટાના આધારે એલિમેન્ટ અથવા ટેમ્પ્લેટ બ્લોકને બહુવિધ વખત રેન્ડર કરે છે.

  • અપેક્ષા રાખે છે (Expects): Array | Object | number | string | Iterable

  • વિગત (Details)

    ડાયરેક્ટિવની કિંમતે વર્તમાન એલિમેન્ટ માટે ઉપનામ (alias) પ્રદાન કરવા માટે વિશેષ સિન્ટેક્સ alias in expression નો ઉપયોગ કરવો આવશ્યક છે:

    template
    <div v-for="item in items">
  {{ item.text }}
</div>

    વૈકલ્પિક રીતે, તમે ઇન્ડેક્સ (અથવા જો ઓબ્જેક્ટ પર વપરાયેલ હોય તો કી) માટે પણ ઉપનામ સ્પષ્ટ કરી શકો છો:

    template
    <div v-for="(item, index) in items"></div>
<div v-for="(value, key) in object"></div>
<div v-for="(value, name, index) in object"></div>

    v-for નું ડિફોલ્ટ બિહેવિયર એલિમેન્ટ્સને ખસેડ્યા વિના ઇન-પ્લેસ (in-place) પેચ કરવાનો પ્રયાસ કરશે. તેને એલિમેન્ટ્સને ફરીથી ગોઠવવા માટે દબાણ કરવા માટે, તમારે key વિશેષ એટ્રિબ્યુટ સાથે ઓર્ડરિંગ સંકેત પ્રદાન કરવો જોઈએ:

    template
    <div v-for="item in items" :key="item.id">
  {{ item.text }}
</div>

    v-for તે કિંમતો પર પણ કામ કરી શકે છે જે ઇટરેબલ પ્રોટોકોલ (Iterable Protocol) ને અમલી બનાવે છે, જેમાં નેટિવ Map અને Set પણ શામેલ છે.

  • આ પણ જુઓ

v-on ​

એલિમેન્ટમાં ઇવેન્ટ લિસનર જોડે છે.

  • ટૂંકું રૂપ (Shorthand): @

  • અપેક્ષા રાખે છે (Expects): Function | Inline Statement | Object (without argument)

  • આર્ગ્યુમેન્ટ (Argument): event (જો ઓબ્જેક્ટ સિન્ટેક્સનો ઉપયોગ કરતા હો તો વૈકલ્પિક)

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

    • .stop - event.stopPropagation() કોલ કરે છે.
    • .prevent - event.preventDefault() કોલ કરે છે.
    • .capture - કેપ્ચર મોડમાં ઇવેન્ટ લિસનર ઉમેરે છે.
    • .self - જો ઇવેન્ટ આ એલિમેન્ટમાંથી ડિસ્પેચ કરવામાં આવી હોય તો જ હેન્ડલર ટ્રિગર થાય છે.
    • .{keyAlias} - માત્ર ચોક્કસ કી પર હેન્ડલર ટ્રિગર કરે છે.
    • .once - હેન્ડલરને વધુમાં વધુ એકવાર ટ્રિગર કરે છે.
    • .left - માઉસની ડાબી બાજુની ક્લિક ઇવેન્ટ્સ માટે જ હેન્ડલર ટ્રિગર કરે છે.
    • .right - માઉસની જમણી બાજુની ક્લિક ઇવેન્ટ્સ માટે જ હેન્ડલર ટ્રિગર કરે છે.
    • .middle - માઉસના મધ્ય બટનની ઇવેન્ટ્સ માટે જ હેન્ડલર ટ્રિગર કરે છે.
    • .passive - { passive: true } સાથે DOM ઇવેન્ટ જોડે છે.

  • વિગત (Details)

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

    જ્યારે સામાન્ય એલિમેન્ટ પર ઉપયોગ કરવામાં આવે છે, ત્યારે તે માત્ર નેટિવ DOM ઇવેન્ટ્સ ને સાંભળે છે. જ્યારે કસ્ટમ એલિમેન્ટ ઘટક પર ઉપયોગ કરવામાં આવે છે, ત્યારે તે તે ચાઈલ્ડ ઘટક પર એમિટ થયેલી કસ્ટમ ઇવેન્ટ્સ ને સાંભળે છે.

    જ્યારે નેટિવ DOM ઇવેન્ટ્સ સાંભળવામાં આવે છે, ત્યારે મેથડ નેટિવ ઇવેન્ટ એકમાત્ર આર્ગ્યુમેન્ટ તરીકે મળે છે. જો ઇનલાઇન સ્ટેટમેન્ટનો ઉપયોગ કરતા હો, તો સ્ટેટમેન્ટને વિશેષ $event પ્રોપર્ટીની ઍક્સેસ હોય છે: v-on:click="handle('ok', $event)".

    v-on આર્ગ્યુમેન્ટ વિના ઇવેન્ટ / લિસનર જોડીના ઓબ્જેક્ટ સાથે બાઈન્ડિંગને પણ સપોર્ટ કરે છે. નોંધ લો કે જ્યારે ઓબ્જેક્ટ સિન્ટેક્સનો ઉપયોગ કરવામાં આવે છે, ત્યારે તે કોઈપણ મોડિફાયરને સપોર્ટ કરતું નથી.

  • Example

    template
    <!-- મેથડ હેન્ડલર -->
<button v-on:click="doThis"></button>

<!-- ડાયનેમિક ઇવેન્ટ -->
<button v-on:[event]="doThis"></button>

<!-- ઇનલાઇન સ્ટેટમેન્ટ -->
<button v-on:click="doThat('hello', $event)"></button>

<!-- ટૂંકું રૂપ -->
<button @click="doThis"></button>

<!-- ટૂંકું રૂપ ડાયનેમિક ઇવેન્ટ -->
<button @[event]="doThis"></button>

<!-- પ્રચાર રોકો (stop propagation) -->
<button @click.stop="doThis"></button>

<!-- ડિફોલ્ટ અટકાવો (prevent default) -->
<button @click.prevent="doThis"></button>

<!-- એક્સપ્રેશન વગર ડિફોલ્ટ અટકાવો -->
<form @submit.prevent></form>

<!-- મોડિફાયર ચેઇન કરો -->
<button @click.stop.prevent="doThis"></button>

<!-- keyAlias નો ઉપયોગ કરીને કી મોડિફાયર -->
<input @keyup.enter="onEnter" />

<!-- ક્લિક ઇવેન્ટ વધુમાં વધુ એકવાર ટ્રિગર થશે -->
<button v-on:click.once="doThis"></button>

<!-- ઓબ્જેક્ટ સિન્ટેક્સ -->
<button v-on="{ mousedown: doThis, mouseup: doThat }"></button>

    ચાઈલ્ડ ઘટક પર કસ્ટમ ઇવેન્ટ્સ સાંભળવી (જ્યારે ચાઈલ્ડ પર "my-event" એમિટ થાય ત્યારે હેન્ડલર કોલ થાય છે):

    template
    <MyComponent @my-event="handleThis" />

<!-- ઇનલાઇન સ્ટેટમેન્ટ -->
<MyComponent @my-event="handleThis(123, $event)" />

  • આ પણ જુઓ

v-bind ​

એક કે તેથી વધુ એટ્રિબ્યુટ્સ અથવા ઘટક પ્રોપને ગતિશીલ રીતે એક્સપ્રેશન સાથે બાંધો (bind).

  • ટૂંકું રૂપ (Shorthand):

    • : અથવા . (જ્યારે .prop મોડિફાયરનો ઉપયોગ કરતા હો ત્યારે)
    • વેલ્યૂ છોડી દેવી (જ્યારે એટ્રિબ્યુટ અને બાઉન્ડ વેલ્યૂનું નામ સમાન હોય, 3.4+ જરૂરી છે)

  • અપેક્ષા રાખે છે (Expects): any (આર્ગ્યુમેન્ટ સાથે) | Object (આર્ગ્યુમેન્ટ વગર)

  • આર્ગ્યુમેન્ટ (Argument): attrOrProp (વૈકલ્પિક)

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

    • .camel - kebab-case એટ્રિબ્યુટ પ્રેમને camelCase માં રૂપાંતરિત કરો.
    • .prop - બાઈન્ડિંગને DOM પ્રોપર્ટી તરીકે સેટ કરવા માટે દબાણ કરો (3.2+).
    • .attr - બાઈન્ડિંગને DOM એટ્રિબ્યુટ તરીકે સેટ કરવા માટે દબાણ કરો (3.2+).

  • ઉપયોગ (Usage)

    જ્યારે class અથવા style એટ્રિબ્યુટને બાંધવા માટે ઉપયોગમાં લેવાય છે, ત્યારે v-bind એરે અથવા ઓબ્જેક્ટ્સ જેવા વધારાના વેલ્યૂ પ્રકારોને સપોર્ટ કરે છે. વધુ વિગતો માટે નીચે લિંક કરેલ ગાઇડ વિભાગ જુઓ.

    જ્યારે એલિમેન્ટ પર બાઈન્ડિંગ સેટ કરવામાં આવે છે, ત્યારે Vue ડિફોલ્ટ રૂપે તપાસ કરે છે કે એલિમેન્ટ પાસે in ઓપરેટર ચેકનો ઉપયોગ કરીને પ્રોપર્ટી તરીકે લેબલ વ્યાખ્યાયિત છે કે નહીં. જો પ્રોપર્ટી વ્યાખ્યાયિત હોય, તો Vue કિંમતને એટ્રિબ્યુટને બદલે DOM પ્રોપર્ટી તરીકે સેટ કરશે. આ મોટાભાગના કિસ્સાઓમાં કામ કરવું જોઈએ, પરંતુ તમે સ્પષ્ટપણે .prop અથવા .attr મોડિફાયર્સનો ઉપયોગ કરીને આ બિહેવિયરને ઓવરરાઈડ કરી શકો છો. આ ક્યારેક જરૂરી હોય છે, ખાસ કરીને જ્યારે કસ્ટમ એલિમેન્ટ્સ સાથે કામ કરતા હો.

    જ્યારે ઘટક પ્રોપ બાઈન્ડિંગ માટે ઉપયોગમાં લેવાય છે, ત્યારે પ્રોપ ચાઈલ્ડ ઘટકમાં યોગ્ય રીતે જાહેર થયેલી હોવી જોઈએ.

    જ્યારે આર્ગ્યુમેન્ટ વિના ઉપયોગમાં લેવાય છે, ત્યારે એટ્રિબ્યુટ નામ-મૂલ્ય જોડી ધરાવતા ઓબ્જેક્ટને બાંધવા માટે ઉપયોગમાં લઈ શકાય છે.

  • Example

    template
    <!-- એટ્રિબ્યુટ બાંધો -->
<img v-bind:src="imageSrc" />

<!-- ડાયનેમિક એટ્રિબ્યુટ નામ -->
<button v-bind:[key]="value"></button>

<!-- ટૂંકું રૂપ -->
<img :src="imageSrc" />

<!-- સમાન નામવાળું ટૂંકું રૂપ (3.4+), :src="src" માં વિસ્તરે છે -->
<img :src />

<!-- ટૂંકું રૂપ ડાયનેમિક એટ્રિબ્યુટ નામ -->
<button :[key]="value"></button>

<!-- ઇનલાઇન સ્ટ્રિંગ કન્કેટિનેશન સાથે -->
<img :src="'/path/to/images/' + fileName" />

<!-- ક્લાસ બાઈન્ડિંગ -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]"></div>

<!-- સ્ટાઇલ બાઈન્ડિંગ -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

<!-- એટ્રિબ્યુટ્સના ઓબ્જેક્ટને બાંધવું -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- પ્રોપ બાઈન્ડિંગ. "prop" ચાઈલ્ડ ઘટકમાં જાહેર કરેલ હોવું આવશ્યક છે. -->
<MyComponent :prop="someThing" />

<!-- ચાઈલ્ડ ઘટક સાથે સામાન્ય પેરેન્ટ પ્રોપ્સ નીચે પાસ કરો -->
<MyComponent v-bind="$props" />

<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

    .prop મોડિફાયર પાસે સમર્પિત ટૂંકું રૂપ પણ છે, . :

    template
    <div :someProperty.prop="someObject"></div>

<!-- સમાન છે -->
<div .someProperty="someObject"></div>

    .camel મોડિફાયર ઇન-DOM ટેમ્પ્લેટ્સનો ઉપયોગ કરતી વખતે v-bind એટ્રિબ્યુટ નામને કેમેલાઇઝ કરવાની મંજૂરી આપે છે, દા.ત. SVG viewBox એટ્રિબ્યુટ:

    template
    <svg :view-box.camel="viewBox"></svg>

    જો તમે સ્ટ્રિંગ ટેમ્પ્લેટ્સનો ઉપયોગ કરી રહ્યાં હોવ અથવા બિલ્ડ સ્ટેપ સાથે ટેમ્પ્લેટને પ્રી-કમ્પાઈલ કરી રહ્યાં હોવ તો .camel ની જરૂર નથી.

  • આ પણ જુઓ

v-model ​

ફોર્મ ઇનપુટ એલિમેન્ટ અથવા ઘટક પર ટુ-વે બાઈન્ડિંગ (two-way binding) બનાવે છે.

v-slot ​

પ્રોપ્સ મેળવવાની અપેક્ષા રાખતા નેમ્ડ સ્લોટ્સ (named slots) અથવા સ્કોપ્ડ સ્લોટ્સ (scoped slots) સૂચવો.

  • ટૂંકું રૂપ (Shorthand): #

  • અપેક્ષા રાખે છે (Expects): JavaScript એક્સપ્રેશન જે ફંક્શન આર્ગ્યુમેન્ટની સ્થિતિમાં વેલિડ હોય, જેમાં ડિસ્ટ્રક્ચરિંગ (destructuring) માટેના સપોર્ટનો સમાવેશ થાય છે. વૈકલ્પિક - જો સ્લોટમાં પ્રોપ્સ પાસ કરવાની અપેક્ષા હોય તો જ જરૂર પડે છે.

  • આર્ગ્યુમેન્ટ (Argument): સ્લોટનું નામ (વૈકલ્પિક, ડિફોલ્ટ default)

  • ત્યાં જ મર્યાદિત (Limited to):

    • <template>
    • ઘટકો (components) (પ્રોપ્સ સાથેના એકલા ડિફોલ્ટ સ્લોટ માટે)

  • Example

    template
    <!-- નેમ્ડ સ્લોટ્સ (Named slots) -->
<BaseLayout>
  <template v-slot:header>
    Header content
  </template>

  <template v-slot:default>
    Default slot content
  </template>

  <template v-slot:footer>
    Footer content
  </template>
</BaseLayout>

<!-- નેમ્ડ સ્લોટ જે પ્રોપ્સ મેળવે છે -->
<InfiniteScroll>
  <template v-slot:item="slotProps">
    <div class="item">
      {{ slotProps.item.text }}
    </div>
  </template>
</InfiniteScroll>

<!-- ડિફોલ્ટ સ્લોટ જે પ્રોપ્સ મેળવે છે, ડિસ્ટ્રક્ચરિંગ સાથે -->
<Mouse v-slot="{ x, y }">
  Mouse position: {{ x }}, {{ y }}
</Mouse>

  • આ પણ જુઓ

v-pre ​

આ એલિમેન્ટ અને તેના તમામ બાળકો માટે કમ્પાઈલેશન સ્કીપ કરો.

  • એક્સપ્રેશનની અપેક્ષા રાખતું નથી

  • વિગત (Details)

    v-pre વાળા એલિમેન્ટની અંદર, તમામ Vue ટેમ્પ્લેટ સિન્ટેક્સ સાચવવામાં આવશે અને એઝ-ઇઝ (as-is) રેન્ડર કરવામાં આવશે. આનો સૌથી સામાન્ય ઉપયોગ કાચો (raw) મસ્ટાચ ટેગ્સ પ્રદર્શિત કરવાનો છે.

  • Example

    template
    <span v-pre>{{ this will not be compiled }}</span>

v-once ​

એલિમેન્ટ અને ઘટકને માત્ર એક જ વાર રેન્ડર કરો, અને ભવિષ્યના અપડેટ્સ સ્કીપ કરો.

  • એક્સપ્રેશનની અપેક્ષા રાખતું નથી

  • વિગત (Details)

    ત્યારપછીના રી-રેન્ડર્સ પર, એલિમેન્ટ/ઘટક અને તેના તમામ બાળકોને સ્ટેટિક કન્ટેન્ટ તરીકે ગણવામાં આવશે અને સ્કીપ કરવામાં આવશે. અપડેટ પરફોર્મન્સને ઑપ્ટિમાઇઝ કરવા માટે આનો ઉપયોગ કરી શકાય છે.

    template
    <!-- સિંગલ એલિમેન્ટ -->
<span v-once>This will never change: {{msg}}</span>
<!-- એલિમેન્ટમાં બાળકો છે -->
<div v-once>
  <h1>Comment</h1>
  <p>{{msg}}</p>
</div>
<!-- ઘટક -->
<MyComponent v-once :comment="msg"></MyComponent>
<!-- `v-for` ડાયરેક્ટિવ -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

    3.2 થી, તમે v-memo નો ઉપયોગ કરીને અમાન્ય સ્થિતિઓ (invalidation conditions) સાથે ટેમ્પ્લેટના ભાગને મેમોઇઝ (memoize) પણ કરી શકો છો.

  • આ પણ જુઓ

v-memo ​

  • માત્ર 3.2+ માં સપોર્ટેડ

  • અપેક્ષા રાખે છે (Expects): any[]

  • વિગત (Details)

    ટેમ્પ્લેટના સબ-ટ્રી (sub-tree) ને મેમોઇઝ કરો. એલિમેન્ટ્સ અને ઘટકો બંને પર વાપરી શકાય છે. ડાયરેક્ટિવ મેમોઇઝેશન માટે સરખામણી કરવા માટે ડિપેન્ડન્સી વેલ્યુઝની ફિક્સ્ડ-લેન્થ એરેની અપેક્ષા રાખે છે. જો એરેમાંની દરેક કિંમત છેલ્લી રેન્ડર જેવી જ હતી, તો સમગ્ર સબ-ટ્રી માટેના અપડેટ્સ સ્કીપ કરવામાં આવશે. ઉદાહરણ તરીકે:

    template
    <div v-memo="[valueA, valueB]">
  ...
</div>

    જ્યારે ઘટક ફરીથી રેન્ડર થાય છે, જો valueA અને valueB બંને સમાન રહે છે, તો આ <div> અને તેના બાળકો માટેના તમામ અપડેટ્સ સ્કીપ કરવામાં આવશે. હકીકતમાં, વર્ચ્યુઅલ DOM VNode બનાવવાનું પણ સ્કીપ કરવામાં આવશે કારણ કે સબ-ટ્રીની મેમોઇઝ્ડ કોપીનો ફરીથી ઉપયોગ કરી શકાય છે.

    મેમોઇઝેશન એરેને યોગ્ય રીતે સ્પષ્ટ કરવું મહત્વપૂર્ણ છે, અન્યથા અમે તે અપડેટ્સ સ્કીપ કરી શકીએ છીએ જે ખરેખર લાગુ કરવા જોઈએ. ખાલી ડિપેન્ડન્સી એરે (v-memo="[]") સાથે v-memo કાર્યાત્મક રીતે v-once ની સમકક્ષ હશે.

    v-for સાથે ઉપયોગ

    v-memo માત્ર પરફોર્મન્સ-ક્રિટિકલ દૃશ્યોમાં માઇક્રો ઓપ્ટિમાઇઝેશન માટે પ્રદાન કરવામાં આવ્યું છે અને તેની ભાગ્યે જ જરૂર પડશે. સૌથી સામાન્ય કેસ જ્યાં આ મદદરૂપ સાબિત થઈ શકે છે તે છે જ્યારે મોટી v-for લિસ્ટ (જ્યાં length > 1000) રેન્ડર કરવામાં આવે છે:

    template
    <div v-for="item in list" :key="item.id" v-memo="[item.id === selected]">
  <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>
  <p>...વધુ ચાઈલ્ડ નોડ્સ</p>
</div>

    જ્યારે ઘટકની selected સ્થિતિ બદલાય છે, ત્યારે મોટી માત્રામાં VNodes બનાવવામાં આવશે ભલે મોટાભાગની આઇટમ્સ બરાબર સમાન રહી હોય. અહીં v-memo નો ઉપયોગ અનિવાર્યપણે એમ કહી રહ્યો છે કે "આ આઇટમને ફક્ત ત્યારે જ અપડેટ કરો જો તે નોન-સિલેક્ટેડથી સિલેક્ટેડ થઈ હોય, અથવા બીજી રીતે". આ દરેક અપ્રભાવિત આઇટમને તેના પાછલા VNode નો ફરીથી ઉપયોગ કરવાની અને ડિફિંગ (diffing) ને સંપૂર્ણપણે સ્કીપ કરવાની મંજૂરી આપે છે. નોંધ લો કે આપણે અહીં મેમો ડિપેન્ડન્સી એરેમાં item.id શામેલ કરવાની જરૂર નથી કારણ કે Vue આઇટમની :key પરથી આપમેળે તેનું અનુમાન લગાવે છે.

    WARNING

    જ્યારે v-for સાથે v-memo નો ઉપયોગ કરતા હોવ, ત્યારે ખાતરી કરો કે તે સમાન એલિમેન્ટ પર વપરાયેલ છે. v-memo v-for ની અંદર કામ કરતું નથી.

    ચોક્કસ એજ કેસોમાં અનિચ્છનીય અપડેટ્સને મેન્યુઅલી રોકવા માટે ઘટકો પર પણ v-memo વાપરી શકાય છે જ્યાં ચાઈલ્ડ ઘટક અપડેટ ચેક ડી-ઑપ્ટિમાઇઝ કરવામાં આવ્યો હોય. પરંતુ ફરીથી, જરૂરી અપડેટ્સ સ્કીપ કરવાનું ટાળવા માટે યોગ્ય ડિપેન્ડન્સી એરે સ્પષ્ટ કરવાની જવાબદારી ડેવલપરની છે.

  • આ પણ જુઓ

v-cloak ​

કમ્પાઈલ ન થયેલ ટેમ્પ્લેટ તૈયાર ન થાય ત્યાં સુધી તેને છુપાવવા માટે વપરાય છે.

  • એક્સપ્રેશનની અપેક્ષા રાખતું નથી

  • વિગત (Details)

    આ ડાયરેક્ટિવની માત્ર નો-બિલ્ડ-સ્ટેપ (no-build-step) સેટઅપમાં જ જરૂર છે.

    જ્યારે ઇન-DOM ટેમ્પ્લેટ્સનો ઉપયોગ કરવામાં આવે છે, ત્યારે "કમ્પાઈલ ન થયેલ ટેમ્પ્લેટ્સનો ફ્લેશ" હોઈ શકે છે: વપરાશકર્તા કાચા મસ્ટાચ ટેગ્સ જોઈ શકે છે જ્યાં સુધી માઉન્ટ થયેલ ઘટક તેમને રેન્ડર કરેલા કન્ટેન્ટ સાથે બદલી ન દે.

    જ્યાં સુધી સંબંધિત ઘટક ઇન્સ્ટન્સ માઉન્ટ ન થાય ત્યાં સુધી v-cloak એલિમેન્ટ પર રહેશે. [v-cloak] { display: none } જેવા CSS નિયમો સાથે મળીને, તેનો ઉપયોગ ઘટક તૈયાર ન થાય ત્યાં સુધી કાચા ટેમ્પ્લેટ્સને છુપાવવા માટે કરી શકાય છે.

  • Example

    css
    [v-cloak] {
  display: none;
}
    template
    <div v-cloak>
  {{ message }}
</div>

    જ્યાં સુધી કમ્પાઈલેશન પૂર્ણ ન થાય ત્યાં સુધી <div> દેખાશે નહીં.

Edit this page on GitHub