ఒకే పేజీ అప్లికేషన్ అంటే ఏమిటి మరియు Vue.js అంటే ఏమిటి

Vue.js అనేది ఇంటరాక్టివ్ వెబ్ యూజర్ ఇంటర్‌ఫేస్‌లు మరియు సింగిల్ పేజీ అప్లికేషన్‌లను అభివృద్ధి చేయడానికి ఉపయోగించే ప్రగతిశీల మరియు ఓపెన్ సోర్స్ జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్.

Vue.js ప్రధానంగా అప్లికేషన్ యొక్క విజువలైజేషన్ భాగంపై దృష్టి పెడుతుంది, దీనిని ఫ్రంట్-ఎండ్ డెవలప్‌మెంట్ అని కూడా పిలుస్తారు. Vue.js రోజురోజుకు జనాదరణ పొందుతోంది ఎందుకంటే ఇతర ప్రాజెక్ట్‌లు మరియు లైబ్రరీలతో ఇంటిగ్రేట్ చేయడం చాలా సులభం. ఇది ఇన్స్టాల్ మరియు ఉపయోగించడానికి చాలా సులభం.

విషయ సూచిక

Vue.js అంటే ఏమిటి?

Vue.js అనేది ప్రగతిశీల జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్ ఓపెన్ సోర్స్ ఇంటరాక్టివ్ వెబ్ యూజర్ ఇంటర్‌ఫేస్‌లు మరియు సింగిల్ పేజీ అప్లికేషన్‌లను (SPAలు) అభివృద్ధి చేయడానికి ఉపయోగిస్తారు. Vue.jsని సాధారణంగా Vue అని పిలుస్తారు మరియు "view.js" లేదా "view" అని ఉచ్ఛరిస్తారు.

ఒకే పేజీ అప్లికేషన్ (SPA) అంటే ఏమిటి?

ఒకే పేజీ అప్లికేషన్ లేదా SPA అనేది డెస్క్‌టాప్ అప్లికేషన్ లాగా చాలా మృదువైన, ప్రతిస్పందించే మరియు వేగవంతమైన అనుభవాన్ని వినియోగదారులకు అందించే వెబ్ అప్లికేషన్ లేదా వెబ్‌సైట్. ఒకే పేజీ అప్లికేషన్‌లో ఒకే పేజీలో మెను, బటన్‌లు మరియు బ్లాక్‌లు ఉంటాయి. వినియోగదారు వాటిలో ఒకదానిపై క్లిక్ చేసినప్పుడు, అది సర్వర్ నుండి సరికొత్త పేజీలను లోడ్ చేయకుండా ప్రస్తుత పేజీని డైనమిక్‌గా తిరిగి వ్రాస్తుంది. ఇది దాని ప్రతిస్పందన వేగం వెనుక కారణం.

Vue ప్రాథమికంగా ఫ్రంటెండ్ డెవలప్‌మెంట్ కోసం నిర్మించబడింది, కాబట్టి ఇది చాలా HTML, JavaScript మరియు CSS ఫైల్‌లను నిర్వహించాలి. Vue.js అనేది డైరెక్టివ్స్ అని పిలువబడే HTML లక్షణాలతో HTMLని విస్తరించడాన్ని వినియోగదారులకు సులభతరం చేస్తుంది. Vue.js అంతర్నిర్మిత ఆదేశాలు మరియు అనేక నిర్దేశకాలను అందిస్తుంది defiHTML అప్లికేషన్ల కార్యాచరణను మెరుగుపరచడానికి వినియోగదారు ద్వారా nite.

Vue.js యొక్క లక్షణాలు

Vue.js యొక్క అత్యంత ముఖ్యమైన లక్షణాల జాబితా క్రింద ఉంది:

భాగం

Vue.js భాగాలు ఈ ఫ్రేమ్‌వర్క్ యొక్క ముఖ్యమైన లక్షణాలలో ఒకటి. పునర్వినియోగ కోడ్‌ను సంగ్రహించడానికి ప్రాథమిక HTML మూలకాలను విస్తరించడానికి అవి ఉపయోగించబడతాయి. మీరు Vue.js అప్లికేషన్‌లలో పునర్వినియోగపరచదగిన కస్టమ్ ఎలిమెంట్‌లను సృష్టించవచ్చు, వాటిని తర్వాత HTMLలో మళ్లీ ఉపయోగించుకోవచ్చు.

లు

Vue.js HTML-ఆధారిత టెంప్లేట్‌లను అందిస్తుంది, ఇది రెండర్ చేయబడిన DOMని Vue ఉదాహరణ డేటాతో అనుబంధించడానికి ఉపయోగించవచ్చు. అన్ని Vue టెంప్లేట్‌లు చెల్లుబాటు అయ్యే HTML, వీటిని స్పెక్-కంప్లైంట్ బ్రౌజర్‌లు మరియు HTML పార్సర్‌ల ద్వారా అన్వయించవచ్చు. Vue.js మోడల్‌లను వర్చువల్ DOM రెండరింగ్ ఫంక్షన్‌లుగా కంపైల్ చేస్తుంది. Vue బ్రౌజర్‌ను రిఫ్రెష్ చేయడానికి ముందు భాగాలను వర్చువల్ DOM మెమరీలోకి అందిస్తుంది. Vue రీ-రెండర్ చేయడానికి మరియు అప్లికేషన్ స్థితిని మార్చేటప్పుడు కనీస మొత్తంలో DOM మానిప్యులేషన్‌ని వర్తింపజేయడానికి కనీస భాగాల సంఖ్యను కూడా లెక్కించవచ్చు.

రెట్టివిటా

Vue సాధారణ JavaScript ఆబ్జెక్ట్‌లను ఉపయోగించే ప్రతిస్పందించే సిస్టమ్‌ను అందిస్తుంది మరియు రీ-రెండరింగ్‌ని ఆప్టిమైజ్ చేస్తుంది. ఈ ప్రక్రియలో, ప్రతి భాగం దాని రియాక్టివ్ డిపెండెన్సీలను ట్రాక్ చేస్తుంది, కాబట్టి సిస్టమ్‌కు ఎప్పుడు మరియు ఏ భాగాలను తిరిగి అందించాలో ఖచ్చితంగా తెలుసు.

రూటింగ్

పేజీ నావిగేషన్ వ్యూ-రూటర్ సహాయంతో జరుగుతుంది. మీరు మీ సింగిల్ పేజీ అప్లికేషన్ కోసం అధికారికంగా మద్దతు ఇచ్చే వ్యూ-రూటర్ లైబ్రరీని ఉపయోగించవచ్చు.

ట్రాన్సిజియోని

DOM నుండి మూలకాలు చొప్పించినప్పుడు, నవీకరించబడినప్పుడు లేదా తీసివేయబడినప్పుడు విభిన్న పరివర్తన ప్రభావాలను ఉపయోగించడానికి Vue మిమ్మల్ని అనుమతిస్తుంది.

Vue.jsని ఎలా ఇన్‌స్టాల్ చేయాలి?

Vue.jsని ఉపయోగించడానికి అనేక పద్ధతులు ఉన్నాయి. మీరు దాని అధికారిక సైట్‌కి వెళ్లడం ద్వారా దీన్ని ఇన్‌స్టాల్ చేయవచ్చు లేదా మీరు CDN లైబ్రరీ నుండి Vue.js ఫైల్‌ను ఉపయోగించడం ప్రారంభించవచ్చు. మీ ప్రాజెక్ట్‌లో Vue.jsని ఉపయోగించడానికి ఇక్కడ కొన్ని మార్గాలు ఉన్నాయి.

నేరుగా HTML ఫైల్‌లో

మీరు ట్యాగ్‌ని ఉపయోగించాలనుకుంటే <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ని డౌన్‌లోడ్ చేసుకోవడానికి.

CDNని ఉపయోగించడం

మీరు మీ అప్లికేషన్‌లో CDN నుండి 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-21KB మాత్రమే, కాబట్టి మీరు దీన్ని చాలా సులభంగా డౌన్‌లోడ్ చేసుకోవచ్చు మరియు ఏ సమయంలోనైనా ఉపయోగించవచ్చు.

అర్థం చేసుకోవడం మరియు కోడ్ చేయడం సులభం

Vue.js ఫ్రేమ్‌వర్క్ చాలా సరళమైన నిర్మాణాన్ని కలిగి ఉంది మరియు అర్థం చేసుకోవడం చాలా సులభం. ఈ ఫ్రేమ్‌వర్క్ యొక్క ప్రజాదరణకు ఇది ఒక కారణం. మీకు HTML మరియు జావాస్క్రిప్ట్‌లు బాగా తెలిసి ఉంటే, మీరు సులభంగా Vue.jsలో కోడ్ చేయవచ్చు. వినియోగదారులు Vue.jsని వారి వెబ్ ప్రాజెక్ట్‌కి దాని సాధారణ నిర్మాణం కారణంగా సులభంగా జోడించవచ్చు మరియు అప్లికేషన్‌లను అభివృద్ధి చేయవచ్చు.

ఇప్పటికే ఉన్న అప్లికేషన్‌లతో సింపుల్ ఇంటిగ్రేషన్

Vue.js అన్నింటికీ అనేక భాగాలను కలిగి ఉంది మరియు ఇప్పటికే ఉన్న అప్లికేషన్‌లతో చాలా త్వరగా అనుసంధానించబడుతుంది. మీరు జావాస్క్రిప్ట్‌లో వ్రాసిన ఏదైనా అప్లికేషన్‌తో దీన్ని ఇంటిగ్రేట్ చేయవచ్చు.

స్వభావరీత్యా అనువైనది

Vue.js యొక్క అనువైన స్వభావం React.js, Angular.js మరియు ఏదైనా ఇతర కొత్త JavaScript ఫ్రేమ్‌వర్క్‌ల డెవలపర్‌లు అర్థం చేసుకోవడం సులభం చేస్తుంది. ఇది HTML ఫైల్‌లు, జావాస్క్రిప్ట్ ఫైల్‌లు మరియు స్వచ్ఛమైన జావాస్క్రిప్ట్ ఫైల్‌లను వ్రాయడానికి వర్చువల్ నోడ్‌లను ఉపయోగించడానికి చాలా సౌలభ్యాన్ని అందిస్తుంది.

భాగం

మీరు Vue.js అప్లికేషన్‌లలో పునర్వినియోగపరచదగిన అనుకూల అంశాలను సృష్టించవచ్చు.

సాధారణ, పూర్తి మరియు వివరణాత్మక డాక్యుమెంటేషన్

Vue.js చాలా సరళమైన, పూర్తి మరియు వివరణాత్మక డాక్యుమెంటేషన్‌ను అందిస్తుంది, కాబట్టి HTML మరియు JavaScript గురించి తక్కువ ఆలోచన ఉన్న డెవలపర్‌లు దీన్ని ప్రోగ్రామ్ చేయడానికి ఉపయోగించవచ్చు.

వర్చువల్ DOM

Vue.js ReactJS, Ember మొదలైన ఇతర ఫ్రేమ్‌వర్క్‌ల మాదిరిగానే వర్చువల్ DOMని ఉపయోగిస్తుంది. వర్చువల్ DOM అనేది ఒరిజినల్ HTML DOM యొక్క తేలికపాటి ఇన్-మెమరీ ట్రీ ప్రాతినిధ్యం మరియు ప్రారంభ DOMని ప్రభావితం చేయకుండా నవీకరించబడుతుంది.

రెండు-మార్గం కమ్యూనికేషన్

Vue.js HTML బ్లాక్‌ల నిర్వహణను సులభతరం చేసే దాని మోడల్ వ్యూ వ్యూ మోడల్ (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 ఫ్రేమ్‌వర్క్ మమ్మల్ని అనుమతిస్తుంది definire HTML గుణాలను డైరెక్టివ్స్ అని పిలుస్తారు, ఇవి HTML అప్లికేషన్‌లకు కార్యాచరణను అందించడానికి ఉపయోగించబడతాయి.

Vue.jsలో రెండు రకాల ఆదేశాలు ఉన్నాయి:

సమీకృత ఆదేశాలు ఇ
ఆదేశాలు defiవినియోగదారు ద్వారా తొలగించబడింది.

Vue.js డబుల్ బ్రేస్‌లను {{}} డేటా కోసం ప్లేస్‌హోల్డర్‌లుగా ఉపయోగిస్తుంది మరియు Vue.js డైరెక్టివ్‌లు v- ఉపసర్గను ఉపయోగించే HTML గుణాలు.

ఒక Vue యాప్ ఒకే DOM మూలకానికి కనెక్ట్ చేస్తుంది మరియు దానిని పూర్తిగా నియంత్రిస్తుంది. పై ఉదాహరణలో, ఇది #యాప్.

Vueతో మనం HTMLని ఎంట్రీ పాయింట్‌గా పరిగణించవచ్చు మరియు మిగతావన్నీ సృష్టించిన 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>

ఈ సందర్భంలో, కొత్త v-బైండ్ లక్షణం నిర్దేశకం. డైరెక్టివ్‌లు Vue ద్వారా అందించబడిన ప్రత్యేక లక్షణాలు అని సూచించడానికి v- ఉపసర్గతో ఉపయోగించబడతాయి మరియు రెండర్ చేయబడిన DOMకి ప్రత్యేక ప్రతిస్పందించే ప్రవర్తనను వర్తింపజేయడానికి ఉపయోగించబడతాయి.

ఉదాహరణ యొక్క ఫలితం క్రిందిది