பொருட்கள்

ஒற்றைப் பக்க பயன்பாடு என்றால் என்ன மற்றும் Vue.js என்றால் என்ன

Vue.js என்பது ஒரு முற்போக்கான மற்றும் திறந்த மூல JavaScript கட்டமைப்பாகும், இது ஊடாடும் இணைய பயனர் இடைமுகங்கள் மற்றும் ஒற்றை பக்க பயன்பாடுகளை உருவாக்க பயன்படுகிறது.

Vue.js முக்கியமாக பயன்பாட்டின் காட்சிப்படுத்தல் பகுதியில் கவனம் செலுத்துகிறது, இது முன்-இறுதி வளர்ச்சி என்றும் அழைக்கப்படுகிறது. Vue.js நாளுக்கு நாள் பிரபலமடைந்து வருகிறது, ஏனெனில் மற்ற திட்டங்கள் மற்றும் நூலகங்களுடன் ஒருங்கிணைப்பது மிகவும் எளிதானது. இது நிறுவ மற்றும் பயன்படுத்த மிகவும் எளிது.

Vue.js என்றால் என்ன?

Vue.js ஒரு முற்போக்கான ஜாவாஸ்கிரிப்ட் கட்டமைப்பாகும் திறந்த மூல ஊடாடும் இணைய பயனர் இடைமுகங்கள் மற்றும் ஒற்றை பக்க பயன்பாடுகளை (SPAs) உருவாக்க பயன்படுகிறது. Vue.js பொதுவாக Vue என குறிப்பிடப்படுகிறது மற்றும் "view.js" அல்லது "view" என உச்சரிக்கப்படுகிறது.

ஒற்றைப் பக்க பயன்பாடு (SPA) என்றால் என்ன?

சிங்கிள் பேஜ் அப்ளிகேஷன் அல்லது எஸ்பிஏ என்பது டெஸ்க்டாப் அப்ளிகேஷனைப் போலவே பயனர்களுக்கு மிகவும் மென்மையான, பதிலளிக்கக்கூடிய மற்றும் வேகமான அனுபவத்தை வழங்கும் இணையப் பயன்பாடு அல்லது இணையதளமாகும். ஒற்றைப் பக்க பயன்பாட்டில் ஒரு பக்கத்தில் மெனு, பொத்தான்கள் மற்றும் தொகுதிகள் உள்ளன. ஒரு பயனர் அவற்றில் ஒன்றைக் கிளிக் செய்தால், அது ஒரு சேவையகத்திலிருந்து முழுப் புதிய பக்கங்களை ஏற்றுவதற்குப் பதிலாக தற்போதைய பக்கத்தை மாறும் வகையில் மீண்டும் எழுதுகிறது. இதுவே அதன் பதிலளிக்கும் வேகத்திற்குக் காரணம்.

Vue அடிப்படையில் ஃபிரண்டெண்ட் மேம்பாட்டிற்காக கட்டமைக்கப்பட்டுள்ளது, எனவே இது நிறைய HTML, JavaScript மற்றும் CSS கோப்புகளைக் கையாள வேண்டும். வழிகாட்டுதல்கள் எனப்படும் HTML பண்புகளுடன் பயனர்கள் HTML ஐ நீட்டிப்பதை Vue.js எளிதாக்குகிறது. 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 வழங்குகிறது. இந்த செயல்பாட்டில், ஒவ்வொரு கூறுகளும் அதன் எதிர்வினை சார்புகளைக் கண்காணிக்கும், எனவே கணினி எப்போது மற்றும் எந்த கூறுகளை மீண்டும் வழங்க வேண்டும் என்பதைத் துல்லியமாக அறியும்.

ரூட்டிங்

பக்க வழிசெலுத்தல் Vue-router உதவியுடன் செய்யப்படுகிறது. உங்களின் ஒற்றைப் பக்க பயன்பாட்டிற்கு அதிகாரப்பூர்வமாக ஆதரிக்கப்படும் Vue-router நூலகத்தைப் பயன்படுத்தலாம்.

டிரான்ஸ்ஸியோனி

உறுப்புகள் செருகப்படும்போது, ​​புதுப்பிக்கப்படும்போது அல்லது 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 தொகுதிகளைக் கையாளுவதை எளிதாக்குகிறது.

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வழிகாட்டுதல்கள் எனப்படும் nire 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-bind பண்புக்கூறு கட்டளை ஆகும். வழிகாட்டுதல்கள் Vue வழங்கிய தனித்துவமான பண்புக்கூறுகள் என்பதைக் குறிக்க v- முன்னொட்டுடன் பயன்படுத்தப்படுகின்றன, மேலும் அவை வழங்கப்பட்ட DOM க்கு சிறப்புப் பதிலளிக்கக்கூடிய நடத்தையைப் பயன்படுத்தப் பயன்படுகின்றன.

உதாரணத்தின் முடிவு பின்வருமாறு

Ercole Palmeri

புதுமை செய்திமடல்
புதுமை பற்றிய மிக முக்கியமான செய்திகளைத் தவறவிடாதீர்கள். மின்னஞ்சல் மூலம் அவற்றைப் பெற பதிவு செய்யவும்.

சமீபத்திய கட்டுரைகள்

ஆக்மென்ட் ரியாலிட்டியில் புதுமையான தலையீடு, கேடேனியா பாலிகிளினிக்கில் ஆப்பிள் வியூவருடன்

ஆப்பிள் விஷன் ப்ரோ கமர்ஷியல் வியூவரைப் பயன்படுத்தி கண்சிகிச்சை அறுவை சிகிச்சை கேடேனியா பாலிக்ளினிக்கில் செய்யப்பட்டது.

29 மே 29

குழந்தைகளுக்கான வண்ணப் பக்கங்களின் நன்மைகள் - எல்லா வயதினருக்கும் மாய உலகம்

வண்ணம் தீட்டுவதன் மூலம் சிறந்த மோட்டார் திறன்களை வளர்ப்பது, எழுதுவது போன்ற சிக்கலான திறன்களுக்கு குழந்தைகளை தயார்படுத்துகிறது. வண்ணம் தீட்ட…

29 மே 29

எதிர்காலம் இங்கே உள்ளது: கப்பல் துறை எவ்வாறு உலகப் பொருளாதாரத்தில் புரட்சியை ஏற்படுத்துகிறது

கடற்படைத் துறை ஒரு உண்மையான உலகளாவிய பொருளாதார சக்தியாகும், இது 150 பில்லியன் சந்தையை நோக்கி பயணித்துள்ளது...

29 மே 29

செயற்கை நுண்ணறிவு மூலம் செயலாக்கப்படும் தகவல்களின் ஓட்டத்தை ஒழுங்குபடுத்த வெளியீட்டாளர்கள் மற்றும் OpenAI ஒப்பந்தங்களில் கையெழுத்திடுகின்றனர்

கடந்த திங்கட்கிழமை, பைனான்சியல் டைம்ஸ் OpenAI உடன் ஒரு ஒப்பந்தத்தை அறிவித்தது. FT அதன் உலகத் தரம் வாய்ந்த பத்திரிகைக்கு உரிமம் அளிக்கிறது…

ஏப்ரல் 29 ஏப்ரல்

உங்கள் மொழியில் புதுமையைப் படியுங்கள்

புதுமை செய்திமடல்
புதுமை பற்றிய மிக முக்கியமான செய்திகளைத் தவறவிடாதீர்கள். மின்னஞ்சல் மூலம் அவற்றைப் பெற பதிவு செய்யவும்.

எங்களுக்கு பின்பற்றவும்

சமீபத்திய கட்டுரைகள்

இணைப்பு

ஜீவனாம்சம் சைபர் தாக்குதல் blockchain chatbot அரட்டை gpt மேகம் கிளவுட் கம்ப்யூட்டிங் உள்ளடக்க சந்தைப்படுத்தல் சைபர் தாக்குதல் இணைய பாதுகாப்பு நுகர்வோர் உரிமை இணையவழி எனியா புதுமை நிகழ்வு gianfranco fedele Google செல்வாக்கு கண்டுபிடிப்பு புதுமைக்கு நிதியளித்தல் அதிகரிக்கும் கண்டுபிடிப்பு மருத்துவ கண்டுபிடிப்பு புதுமை நிலைத்தன்மை தொழில்நுட்ப கண்டுபிடிப்பு செயற்கை நுண்ணறிவு சனத்தொகை எந்திர கற்றல் metaverse மைக்ரோசாப்ட் nft சுழலில் மனிதர் இல்லை PHP பதில் ரோபாட்டிக்ஸ் எஸ்சிஓ ஸெர்ப் மென்பொருள் மென்பொருள் வடிவமைப்பு மென்பொருள் மேம்பாடு மென்பொருள் பொறியியல் பேண்தகைமை தொடக்க தேல்ஸ் பயிற்சி VPN web3