ፅሁፎች

ነጠላ ገጽ መተግበሪያ ምንድን ነው እና Vue.js ምንድን ነው?

Vue.js በይነተገናኝ የድር ተጠቃሚ በይነገጾች እና ነጠላ ገጽ መተግበሪያዎችን ለማዳበር የሚያገለግል ተራማጅ እና ክፍት ምንጭ ጃቫ ስክሪፕት ነው።

Vue.js በዋናነት የሚያተኩረው በመተግበሪያው ምስላዊ ክፍል ላይ ነው፣ እሱም የፊት-መጨረሻ ልማት ተብሎም ይጠራል። ከሌሎች ፕሮጀክቶች እና ቤተመጻሕፍት ጋር መቀላቀል በጣም ቀላል ስለሆነ Vue.js ከቀን ወደ ቀን ተወዳጅ እየሆነ መጥቷል። ለመጫን እና ለመጠቀም በጣም ቀላል ነው.

ማውጫ

Vue.js ምንድን ነው?

Vue.js ተራማጅ ጃቫስክሪፕት ማዕቀፍ ነው። ክፍት ምንጭ በይነተገናኝ የድር ተጠቃሚ በይነገጾች እና ነጠላ ገፅ አፕሊኬሽኖች (SPAs) ለማዘጋጀት ስራ ላይ ይውላል። Vue.js በተለምዶ Vue ተብሎ የሚጠራ ሲሆን "view.js" ወይም "view" ተብሎ ይጠራዋል።

ነጠላ ገጽ መተግበሪያ (SPA) ምንድን ነው?

ነጠላ ገፅ አፕሊኬሽን ወይም SPA ለተጠቃሚዎች ከዴስክቶፕ መተግበሪያ ጋር የሚመሳሰል በጣም ለስላሳ፣ ምላሽ ሰጪ እና ፈጣን ተሞክሮ የሚሰጥ የድር መተግበሪያ ወይም ድር ጣቢያ ነው። የነጠላ ገጽ መተግበሪያ በአንድ ገጽ ላይ ምናሌ፣ አዝራሮች እና ብሎኮች ይዟል። አንድ ተጠቃሚ ከመካከላቸው አንዱን ጠቅ ሲያደርግ ሙሉ ለሙሉ አዲስ ገጾችን ከአገልጋዩ ከመጫን ይልቅ የአሁኑን ገጽ በተለዋዋጭነት ይጽፋል። ይህ ምላሽ ከሚሰጥበት ፍጥነት በስተጀርባ ያለው ምክንያት ነው.

Vue በመሠረቱ ለግንባር ልማት ነው የተሰራው ስለዚህ ብዙ HTML፣ JavaScript እና CSS ፋይሎችን ማስተናገድ አለበት። Vue.js ለተጠቃሚዎች መመሪያዎችን በሚባሉ የኤችቲኤምኤል ባህሪያት ኤችቲኤምኤልን ለማራዘም ቀላል ያደርገዋል። Vue.js አብሮ የተሰሩ መመሪያዎችን እና ብዙ መመሪያዎችን ይሰጣል defiየኤችቲኤምኤል መተግበሪያዎችን ተግባራዊነት ለማሻሻል በተጠቃሚው nite።

የ Vue.js ባህሪያት

ከታች ያሉት የVue.js በጣም አስፈላጊ ባህሪያት ዝርዝር ነው።

አካላት

የ Vue.js ክፍሎች የዚህ ማዕቀፍ አስፈላጊ ባህሪያት አንዱ ናቸው. እንደገና ጥቅም ላይ ሊውል የሚችል ኮድ ለመቅረጽ መሰረታዊ የኤችቲኤምኤል ክፍሎችን ለማራዘም ያገለግላሉ። በVue.js መተግበሪያዎች ውስጥ እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ብጁ ኤለመንቶችን መፍጠር ትችላለህ በኋላ ላይ በኤችቲኤምኤል እንደገና ጥቅም ላይ ሊውል ይችላል።

አብነቶች

Vue.js የተሰራውን DOM ከVue ምሳሌ ውሂብ ጋር ለማያያዝ የሚያገለግሉ HTML ላይ የተመሰረቱ አብነቶችን ያቀርባል። ሁሉም የVue አብነቶች በልዩ ሁኔታ በሚያሟሉ አሳሾች እና በኤችቲኤምኤል ተንታኞች ሊተነተኑ የሚችሉ ትክክለኛ HTML ናቸው። Vue.js ሞዴሎችን ወደ ምናባዊ DOM የማሳየት ተግባራት ያጠናቅራል። Vue አሳሹን ከማደስዎ በፊት ክፍሎችን ወደ ምናባዊ DOM ማህደረ ትውስታ ያቀርባል። Vue የመተግበሪያ ሁኔታን በሚቀይርበት ጊዜ ድጋሚ ለመስራት እና አነስተኛውን የDOM ማጭበርበር መጠን ተግባራዊ ለማድረግ አነስተኛውን የክፍሎች ብዛት ማስላት ይችላል።

ምላሽ መስጠት

Vue ቀላል የጃቫስክሪፕት ዕቃዎችን የሚጠቀም እና እንደገና ቀረጻን የሚያመቻች ምላሽ ሰጪነት ስርዓት ያቀርባል። በዚህ ሂደት እያንዳንዱ አካል ምላሽ ሰጪ ጥገኛዎቹን ይከታተላል፣ ስለዚህ ስርዓቱ መቼ እና የትኞቹ አካላት እንደገና እንደሚሰሩ በትክክል ያውቃል።

ማስተላለፊያ

የገጽ አሰሳ የሚከናወነው በ vue-ራውተር እገዛ ነው። ለነጠላ ገጽዎ በይፋ የሚደገፈውን የvue-router ላይብረሪ መጠቀም ይችላሉ።

ትራንዚዚዮኒ

ኤለመንቶች ሲጨመሩ፣ ሲዘምኑ ወይም ከDOM ሲወገዱ Vue የተለያዩ የሽግግር ውጤቶችን እንድትጠቀም ይፈቅድልሃል።

Vue.js እንዴት እንደሚጫን?

Vue.js ለመጠቀም በርካታ ዘዴዎች አሉ። ወደ ኦፊሴላዊው ጣቢያ በመሄድ መጫን ይችላሉ ወይም የ Vue.js ፋይልን ከሲዲኤን ላይብረሪ መጠቀምም ይችላሉ። በፕሮጀክትዎ ውስጥ Vue.jsን ለመጠቀም አንዳንድ መንገዶች እዚህ አሉ።

በቀጥታ በኤችቲኤምኤል ፋይል ውስጥ

መለያውን መጠቀም ከፈለጉ <script> የ Vue.js በቀጥታ ወደ HTML ፋይልዎ ከኦፊሴላዊው ድር ጣቢያ ማውረድ ያስፈልግዎታል።

<html>  
   <head>  
      <script type = "text/javascript" src = "vue.min.js"></script>  
   </head>  
   <body>
   </body>  
</html>

ወደ Vue.js ኦፊሴላዊ ድር ጣቢያ እንሂድ https://vuejs.org/v2/guide/installation.html እንደ ፍላጎቶችዎ vue.js ን ለማውረድ።

ሲዲኤን በመጠቀም

በመተግበሪያዎ ውስጥ የVue.js ፋይልን ከሲዲኤን መጠቀም ይችላሉ። በኤለመንቱ ውስጥ https://unpkg.com/vue@3/dist/vue.global.js ሊንኩን ይጠቀሙ <script>, ከታች እንዳለው:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vue.js የመጠቀም ጥቅሞች

Vue.js ለድር ልማት እና ነጠላ ገፅ አፕሊኬሽኖች (SPA) ግንባታ በስፋት ጥቅም ላይ ከሚውሉ የቅርብ ጊዜ የሶፍትዌር ቴክኖሎጂዎች አንዱ ነው። ከስሙ እንደሚገምቱት፣ አብዛኛው ጥቅም ላይ የሚውለው ለ UI ወይም ለፕሮጀክቱ ማሳያ ጎን ነው።

በፕሮጀክትህ ውስጥ Vue.jsን የመጠቀምን ጥቅሞች እንይ፡-

በጣም ትንሽ መጠን

የ Vue.js ትልቅ ጠቀሜታዎች አንዱ በመጠን በጣም ትንሽ ነው. የጃቫ ስክሪፕት ማዕቀፍ ስኬት በአብዛኛው የተመካው በመጠን ላይ ነው እና ይህ አስደሳች የጃቫ ስክሪፕት ፕለጊን ከ18-21 ኪባ ብቻ ስለሆነ በአጭር ጊዜ ውስጥ ማውረድ እና መጠቀም ይችላሉ።

ለመረዳት ቀላል እና ኮድ

የVue.js ማዕቀፍ በጣም ቀላል መዋቅር አለው እና ለመረዳት በጣም ቀላል ነው። የዚህ ማዕቀፍ ተወዳጅነት አንዱ ምክንያት ነው. ኤችቲኤምኤልን እና ጃቫስክሪፕትን የምታውቁ ከሆነ በVue.js በቀላሉ ኮድ ማድረግ ይችላሉ። በቀላል አወቃቀሩ ምክንያት ተጠቃሚዎች Vue.js ን ወደ ድር ፕሮጄክታቸው በቀላሉ ማከል እና መተግበሪያዎችን ማዳበር ይችላሉ።

ከነባር መተግበሪያዎች ጋር ቀላል ውህደት

Vue.js ለሁሉም ነገር ብዙ ክፍሎች አሉት እና አሁን ካሉ መተግበሪያዎች ጋር በፍጥነት ሊጣመር ይችላል። በጃቫ ስክሪፕት ከተፃፈ ከማንኛውም መተግበሪያ ጋር ሊያዋህዱት ይችላሉ።

በተፈጥሮ ተለዋዋጭ

የVue.js ተለዋዋጭ ተፈጥሮ ለReact.js፣ Angular.js እና ማንኛውም ሌላ አዲስ የጃቫስክሪፕት ማዕቀፎችን ገንቢዎች ለመረዳት ቀላል ያደርገዋል። ኤችቲኤምኤል ፋይሎችን ፣ የጃቫ ስክሪፕት ፋይሎችን እና ንጹህ ጃቫስክሪፕት ፋይሎችን ለመፃፍ ምናባዊ ኖዶችን ለመጠቀም ብዙ ተለዋዋጭነት ይሰጣል።

አካላት

በVue.js መተግበሪያዎች ውስጥ እንደገና ጥቅም ላይ ሊውሉ የሚችሉ ብጁ ክፍሎችን መፍጠር ይችላሉ።

ቀላል ፣ የተሟላ እና ዝርዝር ሰነዶች

Vue.js በጣም ቀላል፣ የተሟላ እና ዝርዝር ሰነዶችን ያቀርባል፣ስለዚህ ስለኤችቲኤምኤል እና ጃቫስክሪፕት ብዙም ግንዛቤ የሌላቸው ገንቢዎች ፕሮግራም ለማድረግ ሊጠቀሙበት ይችላሉ።

ምናባዊ DOM

Vue.js እንደ ReactJS፣ Ember፣ ወዘተ ካሉ ነባር ማዕቀፎች ጋር ተመሳሳይ የሆነ ምናባዊ DOM ይጠቀማል። ምናባዊው DOM ቀላል ክብደት ያለው ውስጠ-ማህደረ ትውስታ የዋናው ኤችቲኤምኤል DOM ምስል ነው እና የመጀመሪያውን DOM ሳይነካው ተዘምኗል።

የሁለት መንገድ ግንኙነት

Vue.js የኤችቲኤምኤል ብሎኮች አያያዝን የሚያቃልል በሞዴል እይታ ሞዴል (MVVM) አርክቴክቸር የሁለት መንገድ ግንኙነትን ይሰጣል።

Vue.js መግለጫ መስጠት

ማዕቀፉ ቀላል እና ቀጥተኛ የሞዴል አገባብ በመጠቀም መረጃን ለDOM ለማቅረብ ከሚያስችል ስርዓት ጋር አብሮ ይመጣል።

አንድ ምሳሌ ይኸውና፡-

<body>
<div id="app">  
  {{ message }}  
</div>

<script>
var app = new Vue({  
  el: '#app',  
  data: {  
    message: 'This is a simple Vue.js Declarative Rendering example!'  
  }  
})  
</script>
</body>

የVue.js ማዕቀፍ ያስችለናል። defiለኤችቲኤምኤል አፕሊኬሽኖች ተግባራዊነትን ለማቅረብ የሚያገለግሉ መመሪያዎች ተብለው የሚጠሩ የኤችቲኤምኤል ባህሪዎች።

በVue.js ውስጥ ሁለት አይነት መመሪያዎች አሉ፡-

የተቀናጁ መመሪያዎች ሠ
መመሪያዎች defiበተጠቃሚው የቀረበ።

Vue.js ድርብ ቅንፎችን {{}} ለውሂብ ቦታ ያዥ ይጠቀማል፣ እና የVue.js መመሪያዎች የv- ቅድመ ቅጥያ የሚጠቀሙ የኤችቲኤምኤል ባህሪያት ናቸው።

የVue መተግበሪያ ከአንድ DOM አባል ጋር ይገናኛል እና ሙሉ በሙሉ ይቆጣጠራል። ከላይ ባለው ምሳሌ #መተግበሪያ ነው።

በVue ኤችቲኤምኤልን እንደ መግቢያ ነጥብ ልንቆጥረው እንችላለን፣ እና ሁሉም ነገር በተፈጠረው የVue ምሳሌ ውስጥ ይከሰታል።
ኤለመንት እና የባህሪ ትስስርን የምንሞክርበትን ምሳሌ እንመልከት፡-

<html>  
    <head>  
        <link rel="stylesheet" href="index.css">  
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
    </head>  
    <body>         
        <div id="app-2">  
        <span v-bind:title="message">  
            Hover mouse over me for a few seconds  
            and see a dynamically bound title which I have set!  
        </span>  
        </div>          
        <script>
           var app2 = new Vue({  
           el: '#app-2',  
           data: {  
           message: 'You loaded this page on ' + new Date().toLocaleString()  
                 }  
           })  
       </script>  
    </body>  
</html>

በዚህ አጋጣሚ አዲሱ የቪ-ቢንድ ባህሪ መመሪያው ነው። መመሪያዎች በVue የተሰጡ ልዩ ባህሪያት መሆናቸውን ለማመልከት ከ v-ቅድመ-ቅጥያ ጋር ጥቅም ላይ ይውላሉ እና ልዩ ምላሽ ሰጪ ባህሪን ለተሰራው DOM ተግባራዊ ለማድረግ ያገለግላሉ።

የምሳሌው ውጤት የሚከተለው ነው