પરિચય ​

VueMastery.com પર વિડિઓ ટ્યુટોરિયલ્સ સાથે Vue શીખો

Vue શું છે? ​

Vue (ઉચ્ચાર /vjuː/, view ની જેમ) યુઝર ઇન્ટરફેસ બનાવવા માટેનું જાવાસ્ક્રિપ્ટ ફ્રેમવર્ક છે. તે પ્રમાણભૂત HTML, CSS અને JavaScript પર બનેલ છે અને એક ડિક્લેરેટિવ (declarative), કમ્પોનન્ટ-આધારિત પ્રોગ્રામિંગ મોડેલ પ્રદાન કરે છે જે તમને કોઈપણ જટિલતાના યુઝર ઇન્ટરફેસને અસરકારક રીતે વિકસાવવામાં મદદ કરે છે.

અહીં એક નાનું ઉદાહરણ છે:

import { createApp } from 'vue'

createApp({
  data() {
    return {
      count: 0
    }
  }
}).mount('#app')

import { createApp, ref } from 'vue'

createApp({
  setup() {
    return {
      count: ref(0)
    }
  }
}).mount('#app')

<div id="app">
  <button @click="count++">
    ગણતરી (Count) છે: {{ count }}
  </button>
</div>

પરિણામ (Result)

ઉપરનું ઉદાહરણ Vue ની બે મુખ્ય લાક્ષણિકતાઓ દર્શાવે છે:

• ડિક્લેરેટિવ રેન્ડરિંગ (Declarative Rendering): Vue પ્રમાણભૂત HTML ને ટેમ્પલેટ સિન્ટેક્સ સાથે વિસ્તારે છે જે આપણને જાવાસ્ક્રિપ્ટ સ્ટેટના આધારે HTML આઉટપુટને ડિક્લેરેટિવ રીતે વર્ણવવાની મંજૂરી આપે છે.

• રિએક્ટિવિટી (Reactivity): Vue જાવાસ્ક્રિપ્ટ સ્ટેટમાં થતા ફેરફારોને આપમેળે ટ્રૅક કરે છે અને જ્યારે ફેરફારો થાય ત્યારે DOM ને અસરકારક રીતે અપડેટ કરે છે.

તમને કદાચ અત્યારે કેટલાક પ્રશ્નો હોઈ શકે છે - ચિંતા ન કરશો. અમે બાકીના દસ્તાવેજોમાં દરેક નાની વિગતને આવરી લઈશું. અત્યારે, કૃપા કરીને આગળ વાંચો જેથી કરીને તમે Vue શું ઓફર કરે છે તેની ઉચ્ચ-સ્તરીય સમજ મેળવી શકો.

પ્રોગ્રેસિવ ફ્રેમવર્ક ​

Vue એક ફ્રેમવર્ક અને ઇકોસિસ્ટમ છે જે ફ્રન્ટએન્ડ ડેવલપમેન્ટમાં જરૂરી મોટાભાગની સામાન્ય સુવિધાઓને આવરી લે છે. પરંતુ વેબ અત્યંત વૈવિધ્યપુર્ણ છે - આપણે વેબ પર જે વસ્તુઓ બનાવીએ છીએ તે આકાર અને સ્કેલમાં ઘણી અલગ હોઈ શકે છે. તે ધ્યાનમાં રાખીને, Vue ને લવચીક અને ક્રમશઃ સ્વીકારી શકાય તેવું ડિઝાઇન કરવામાં આવ્યું છે. તમારા ઉપયોગના કેસ (use case) ના આધારે, Vue નો ઉપયોગ વિવિધ રીતે કરી શકાય છે:

• બિલ્ડ સ્ટેપ વિના સ્ટેટિક HTML ને બહેતર બનાવવું
• કોઈપણ પૃષ્ઠ પર વેબ કમ્પોનન્ટ્સ તરીકે એમ્બેડ કરવું
• સિંગલ-પેજ એપ્લિકેશન (SPA)
• ફુલસ્ટેક / સર્વર-સાઇડ રેન્ડરિંગ (SSR)
• Jamstack / સ્ટેટિક સાઇટ જનરેશન (SSG)
• ડેસ્કટોપ, મોબાઇલ, WebGL, અને ટર્મિનલને પણ લક્ષ્ય બનાવવું

જો તમને આ ખ્યાલો ડરામણા લાગતા હોય, તો ચિંતા કરશો નહીં! ટ્યુટોરીયલ અને માર્ગદર્શિકા માટે માત્ર મૂળભૂત HTML અને JavaScript જ્ઞાનની જરૂર છે, અને તમે આમાંના કોઈપણમાં નિષ્ણાત થયા વિના તેને અનુસરી શકશો.

જો તમે અનુભવી ડેવલપર છો અને Vue ને તમારા સ્ટેકમાં કેવી રીતે શ્રેષ્ઠ રીતે એકીકૃત કરવું તેમાં રસ ધરાવો છો, અથવા આ શબ્દોનો અર્થ શું છે તે વિશે ઉત્સુક છો, તો અમે તેમના વિશે Vue નો ઉપયોગ કરવાની રીતો માં વધુ વિગતવાર ચર્ચા કરીએ છીએ.

લવચીકતા હોવા છતાં, Vue કેવી રીતે કાર્ય કરે છે તે વિશેનું મુખ્ય જ્ઞાન આ તમામ ઉપયોગના કેસોમાં સમાન છે. ભલે તમે અત્યારે માત્ર શિખાઉ હોવ, પણ જે જ્ઞાન મેળવશો તે ભવિષ્યમાં વધુ મહત્વાકાંક્ષી લક્ષ્યોને પાર પાડવા માટે ઉપયોગી રહેશે. જો તમે અનુભવી છો, તો તમે જે સમસ્યાઓ હલ કરવાનો પ્રયાસ કરી રહ્યા છો તેના આધારે તમે Vue નો લાભ લેવા માટે શ્રેષ્ઠ માર્ગ પસંદ કરી શકો છો, જ્યારે તમારી ઉત્પાદકતા સમાન જ રહેશે. તેથી જ આપણે Vue ને "The Progressive Framework" કહીએ છીએ: તે એક એવું ફ્રેમવર્ક છે જે તમારી સાથે વધી શકે છે અને તમારી જરૂરિયાતોને અનુરૂપ બની શકે છે.

સિંગલ-ફાઇલ કમ્પોનન્ટ્સ ​

મોટા ભાગના બિલ્ડ-ટૂલ-સક્ષમ Vue પ્રોજેક્ટ્સમાં, અમે સિંગલ-ફાઇલ કમ્પોનન્ટ (જેને *.vue ફાઇલો તરીકે પણ ઓળખવામાં આવે છે, ટૂંકમાં SFC) નામના HTML જેવા ફાઇલ ફોર્મેટનો ઉપયોગ કરીને Vue ઘટકો લખીએ છીએ. એક Vue SFC, જેમ કે નામ સૂચવે છે, ઘટકના લોજિક (JavaScript), ટેમ્પલેટ (HTML) અને શૈલીઓ (CSS) ને એક જ ફાઇલમાં સમાવે છે. SFC ફોર્મેટમાં લખાયેલ અગાઉનું ઉદાહરણ અહીં છે:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">ગણતરી છે: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

<template>
  <button @click="count++">ગણતરી છે: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC એ Vue ની એક વિશિષ્ટ લાક્ષણિકતા છે અને જો તમારો ઉપયોગ કરવાનો કેસ બિલ્ડ સેટઅપની માંગ કરતો હોય તો Vue ઘટકો લખવા માટેની ભલામણ કરેલ રીત છે. તમે તેના સમર્પિત વિભાગમાં SFC ના કેવી રીતે અને શા માટે વિશે વધુ જાણી શકો છો - પરંતુ અત્યારે, ફક્ત એટલું જાણી લો કે Vue તમારા માટે તમામ બિલ્ડ ટૂલ્સ સેટઅપ સંભાળશે.

API સ્ટાઇલ ​

Vue ઘટકો બે અલગ અલગ API સ્ટાઇલમાં લખી શકાય છે: Options API અને Composition API.

Options API ​

Options API સાથે, અમે data, methods અને mounted જેવા ઓપ્શનના ઓબ્જેક્ટનો ઉપયોગ કરીને ઘટકના લોજિકને વ્યાખ્યાયિત કરીએ છીએ. ઓપ્શન દ્વારા વ્યાખ્યાયિત કરેલી પ્રોપર્ટીઝ ફંક્શન્સની અંદર this પર એક્સપોઝ થાય છે, જે ઘટકના ઇન્સ્ટન્સ તરફ નિર્દેશ કરે છે:

<script>
export default {
  // data() માંથી મળેલી પ્રોપર્ટીઝ રિએક્ટિવ સ્ટેટ બની જાય છે
  // અને તે `this` પર એક્સપોઝ થશે.
  data() {
    return {
      count: 0
    }
  },

  // મેથડ્સ એ ફંક્શન્સ છે જે સ્ટેટમાં ફેરફાર કરે છે અને અપડેટ્સ ટ્રિગર કરે છે.
  // તેમને ટેમ્પલેટ્સમાં ઇવેન્ટ હેન્ડલર્સ તરીકે બાંધી શકાય છે.
  methods: {
    increment() {
      this.count++
    }
  },

  // લાઇફસાઇકલ હૂક્સને ઘટકના જીવનચક્રના વિવિધ તબક્કાઓ પર
  // કૉલ કરવામાં આવે છે.
  // જ્યારે ઘટક માઉન્ટ (Mounted) થશે ત્યારે આ ફંક્શન કૉલ કરવામાં આવશે.
  mounted() {
    console.log(`પ્રારંભિક ગણતરી ${this.count} છે.`)
  }
}
</script>

<template>
  <button @click="increment">ગણતરી છે: {{ count }}</button>
</template>

Playground માં તે અજમાવી જુઓ

Composition API ​

Composition API સાથે, અમે ઇમ્પોર્ટ કરેલા API ફંક્શન્સનો ઉપયોગ કરીને ઘટકના લોજિકને વ્યાખ્યાયિત કરીએ છીએ. SFCs માં, Composition API નો ઉપયોગ સામાન્ય રીતે <script setup> સાથે કરવામાં આવે છે. setup એટ્રિબ્યુટ એ એક સંકેત છે જે Vue ને કમ્પાઇલ-ટાઇમ ટ્રાન્સફોર્મ્સ કરવા દે છે જે આપણને ઓછા બોઈલરપ્લેટ (boilerplate) સાથે Composition API નો ઉપયોગ કરવાની મંજૂરી આપે છે. ઉદાહરણ તરીકે, <script setup> માં જાહેર કરાયેલ ઇમ્પોર્ટ્સ અને ટોપ-લેવલ વેરિએબલ્સ / ફંક્શન્સ ટેમ્પલેટમાં સીધા વાપરી શકાય છે.

અહીં સમાન ઘટક છે, બરાબર સમાન ટેમ્પલેટ સાથે, પરંતુ તેના બદલે Composition API અને <script setup> નો ઉપયોગ કરીને:

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const count = ref(0)

// ફંક્શન્સ જે સ્ટેટમાં ફેરફાર કરે છે અને અપડેટ્સ ટ્રિગર કરે છે
function increment() {
  count.value++
}

// lifecycle hooks
onMounted(() => {
  console.log(`પ્રારંભિક ગણતરી ${count.value} છે.`)
})
</script>

<template>
  <button @click="increment">ગણતરી છે: {{ count }}</button>
</template>

Playground માં તે અજમાવી જુઓ

કયું પસંદ કરવું? ​

સમાન અંતર્ગત સિસ્ટમ દ્વારા સંચાલિત બંને API સ્ટાઇલ સામાન્ય ઉપયોગના કેસોને આવરી લેવા માટે સંપૂર્ણપણે સક્ષમ છે. વાસ્તવમાં, Options API એ Composition API ની ઉપર જ લાગુ કરવામાં આવ્યું છે! Vue વિશેની મૂળભૂત વિભાવનાઓ અને જ્ઞાન બંને શૈલીઓમાં સમાન છે.

Options API એ "ઘટક ઇન્સ્ટન્સ" (જેમ કે ઉદાહરણમાં this જોવા મળે છે) ના ખ્યાલની આસપાસ કેન્દ્રિત છે, જે સામાન્ય રીતે OOP લેન્ગવેજ બેકગ્રાઉન્ડ ધરાવતા વપરાશકર્તાઓ માટે ક્લાસ-આધારિત માનસિક મોડેલ સાથે વધુ સારી રીતે મેળ ખાય છે. તે રિએક્ટિવિટીની વિગતોને દૂર કરીને અને ઓપ્શન ગ્રુપ દ્વારા કોડ ઓર્ગેનાઇઝેશન લાગુ કરીને શિખાઉ માણસો માટે વધુ અનુકુળ છે.

Composition API એ ફંક્શન સ્કોપમાં સીધા રિએક્ટિવ સ્ટેટ વેરિએબલ્સ જાહેર કરવા અને જટિલતાને હેન્ડલ કરવા માટે બહુવિધ ફંક્શન્સમાંથી સ્ટેટને એકસાથે કમ્પોઝ કરવા પર ધ્યાન કેન્દ્રિત કરે છે. તે વધુ મુક્ત-સ્વરૂપ છે અને તેને અસરકારક રીતે ઉપયોગમાં લેવા માટે Vue માં રિએક્ટિવિટી કેવી રીતે કાર્ય કરે છે તેની સમજ હોવી જરૂરી છે. બદલામાં, તેની લવચીકતા લોજિકને ગોઠવવા અને પુનઃઉપયોગ માટે વધુ શક્તિશાળી પેટર્નને સક્ષમ કરે છે.

તમે Composition API FAQ માં બે શૈલીઓ વચ્ચેની સરખામણી અને Composition API ના સંભવિત ફાયદાઓ વિશે વધુ જાણી શકો છો.

જો તમે Vue માં નવા છો, તો અહીં અમારી સામાન્ય ભલામણ છે:

• શીખવાના હેતુઓ માટે, એવી શૈલી સાથે જાઓ જે તમને સમજવામાં સરળ લાગે. ફરીથી, મોટા ભાગના મુખ્ય ખ્યાલો બંને શૈલીઓ વચ્ચે સમાન છે. તમે પછીથી હંમેશા બીજી શૈલી શીખી શકો છો.

• પ્રોડક્શન ઉપયોગ માટે:

  • જો તમે બિલ્ડ ટૂલ્સનો ઉપયોગ કરી રહ્યાં નથી અથવા ઓછી જટિલતાવાળા દ્રશ્યોમાં મુખ્યત્વે Vue નો ઉપયોગ કરવાની યોજના ઘડી રહ્યા છો, તો Options API સાથે જાઓ.

  • જો તમે Vue સાથે સંપૂર્ણ એપ્લિકેશન બનાવવાની યોજના ઘડી રહ્યા હોવ તો Composition API + સિંગલ-ફાઇલ કમ્પોનન્ટ્સ સાથે જાઓ.

તમારે શીખવાના તબક્કા દરમિયાન માત્ર એક જ શૈલીને વળગી રહેવાની જરૂર નથી. બાકીનું દસ્તાવેજીકરણ જ્યાં લાગુ પડતું હોય ત્યાં બંને શૈલીમાં કોડ નમૂનાઓ પ્રદાન કરશે, અને તમે ડાબી સાઇડબારની ટોચ પર API Preference સ્વિચ નો ઉપયોગ કરીને કોઈપણ સમયે તેમની વચ્ચે બદલી શકો છો.

હજુ પણ પ્રશ્નો છે? ​

અમારા FAQ તપાસો.

તમારો લર્નિંગ પાથ પસંદ કરો ​

વિવિધ ડેવલપર્સની શીખવાની શૈલીઓ અલગ-અલગ હોય છે. તમારી પસંદગીને અનુરૂપ લર્નિંગ પાથ પસંદ કરવા માટે નિઃસંકોચ રહો - જો કે અમે શક્ય હોય તો બધી જ સામગ્રી જોવાની ભલામણ કરીએ છીએ!