ಲೇಖನಗಳು

ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ ಎಂದರೇನು ಮತ್ತು Vue.js ಎಂದರೇನು

Vue.js ಒಂದು ಪ್ರಗತಿಶೀಲ ಮತ್ತು ಮುಕ್ತ ಮೂಲ JavaScript ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದ್ದು, ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಬಳಕೆದಾರ ಇಂಟರ್‌ಫೇಸ್‌ಗಳು ಮತ್ತು ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

Vue.js ಮುಖ್ಯವಾಗಿ ಅಪ್ಲಿಕೇಶನ್‌ನ ದೃಶ್ಯೀಕರಣ ಭಾಗವನ್ನು ಕೇಂದ್ರೀಕರಿಸುತ್ತದೆ, ಇದನ್ನು ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪ್‌ಮೆಂಟ್ ಎಂದೂ ಕರೆಯುತ್ತಾರೆ. Vue.js ದಿನದಿಂದ ದಿನಕ್ಕೆ ಜನಪ್ರಿಯವಾಗುತ್ತಿದೆ ಏಕೆಂದರೆ ಇತರ ಪ್ರಾಜೆಕ್ಟ್‌ಗಳು ಮತ್ತು ಲೈಬ್ರರಿಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸುವುದು ತುಂಬಾ ಸುಲಭ. ಇದನ್ನು ಸ್ಥಾಪಿಸಲು ಮತ್ತು ಬಳಸಲು ತುಂಬಾ ಸರಳವಾಗಿದೆ.

Vue.js ಎಂದರೇನು?

Vue.js ಒಂದು ಪ್ರಗತಿಶೀಲ JavaScript ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿದೆ ಮುಕ್ತ ಸಂಪನ್ಮೂಲ ಸಂವಾದಾತ್ಮಕ ವೆಬ್ ಬಳಕೆದಾರ ಇಂಟರ್ಫೇಸ್‌ಗಳು ಮತ್ತು ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು (SPA ಗಳು) ಅಭಿವೃದ್ಧಿಪಡಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. Vue.js ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ Vue ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ ಮತ್ತು ಇದನ್ನು "view.js" ಅಥವಾ "view" ಎಂದು ಉಚ್ಚರಿಸಲಾಗುತ್ತದೆ.

ಏಕ ಪುಟ ಅಪ್ಲಿಕೇಶನ್ (SPA) ಎಂದರೇನು?

ಒಂದೇ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ 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-ಆಧಾರಿತ ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ ಅದನ್ನು Vue ನಿದರ್ಶನ ಡೇಟಾದೊಂದಿಗೆ ಪ್ರದರ್ಶಿಸಲಾದ DOM ಅನ್ನು ಸಂಯೋಜಿಸಲು ಬಳಸಬಹುದು. ಎಲ್ಲಾ Vue ಟೆಂಪ್ಲೇಟ್‌ಗಳು ಮಾನ್ಯವಾದ HTML ಆಗಿದ್ದು ಅದನ್ನು ಸ್ಪೆಕ್-ಕಂಪ್ಲೈಂಟ್ ಬ್ರೌಸರ್‌ಗಳು ಮತ್ತು HTML ಪಾರ್ಸರ್‌ಗಳಿಂದ ಪಾರ್ಸ್ ಮಾಡಬಹುದು. Vue.js ವರ್ಚುವಲ್ DOM ರೆಂಡರಿಂಗ್ ಕಾರ್ಯಗಳಿಗೆ ಮಾದರಿಗಳನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ. ಬ್ರೌಸರ್ ಅನ್ನು ರಿಫ್ರೆಶ್ ಮಾಡುವ ಮೊದಲು Vue ಘಟಕಗಳನ್ನು ವರ್ಚುವಲ್ DOM ಮೆಮೊರಿಗೆ ಸಲ್ಲಿಸುತ್ತದೆ. ಅಪ್ಲಿಕೇಶನ್ ಸ್ಥಿತಿಯನ್ನು ಬದಲಾಯಿಸುವಾಗ ಮರು-ರೆಂಡರ್ ಮಾಡಲು ಮತ್ತು ಕನಿಷ್ಟ ಪ್ರಮಾಣದ DOM ಮ್ಯಾನಿಪ್ಯುಲೇಶನ್ ಅನ್ನು ಅನ್ವಯಿಸಲು Vue ಕನಿಷ್ಟ ಸಂಖ್ಯೆಯ ಘಟಕಗಳನ್ನು ಸಹ ಲೆಕ್ಕಾಚಾರ ಮಾಡಬಹುದು.

ರೆಟಿವಿಟಾ

ಸರಳವಾದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಬಳಸುವ ಮತ್ತು ಮರು-ರೆಂಡರಿಂಗ್ ಅನ್ನು ಉತ್ತಮಗೊಳಿಸುವ ಪ್ರತಿಕ್ರಿಯೆಯ ವ್ಯವಸ್ಥೆಯನ್ನು Vue ಒದಗಿಸುತ್ತದೆ. ಈ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ, ಪ್ರತಿಯೊಂದು ಘಟಕವು ಅದರ ಪ್ರತಿಕ್ರಿಯಾತ್ಮಕ ಅವಲಂಬನೆಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ, ಆದ್ದರಿಂದ ಸಿಸ್ಟಮ್ ಯಾವಾಗ ಮತ್ತು ಯಾವ ಘಟಕಗಳನ್ನು ಮರು-ರೆಂಡರ್ ಮಾಡಬೇಕೆಂದು ನಿಖರವಾಗಿ ತಿಳಿದಿರುತ್ತದೆ.

ರೂಟಿಂಗ್

ಪುಟ ಸಂಚರಣೆ ವ್ಯೂ-ರೂಟರ್ ಸಹಾಯದಿಂದ ಮಾಡಲಾಗುತ್ತದೆ. ನಿಮ್ಮ ಏಕ ಪುಟದ ಅಪ್ಲಿಕೇಶನ್‌ಗಾಗಿ ಅಧಿಕೃತವಾಗಿ ಬೆಂಬಲಿತ ವ್ಯೂ-ರೂಟರ್ ಲೈಬ್ರರಿಯನ್ನು ನೀವು ಬಳಸಬಹುದು.

ಪರಿವರ್ತನೆಗಳು

ಅಂಶಗಳನ್ನು ಸೇರಿಸಿದಾಗ, ನವೀಕರಿಸಿದಾಗ ಅಥವಾ 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 ಮತ್ತು JavaScript ನೊಂದಿಗೆ ಪರಿಚಿತರಾಗಿದ್ದರೆ, ನೀವು ಸುಲಭವಾಗಿ Vue.js ನಲ್ಲಿ ಕೋಡ್ ಮಾಡಬಹುದು. ಬಳಕೆದಾರರು ತಮ್ಮ ವೆಬ್ ಪ್ರಾಜೆಕ್ಟ್‌ಗೆ Vue.js ಅನ್ನು ಸುಲಭವಾಗಿ ಸೇರಿಸಬಹುದು ಮತ್ತು ಅದರ ಸರಳ ರಚನೆ ಮತ್ತು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸಬಹುದು.

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳೊಂದಿಗೆ ಸರಳ ಏಕೀಕರಣ

Vue.js ಪ್ರತಿಯೊಂದಕ್ಕೂ ಅನೇಕ ಘಟಕಗಳನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಅಪ್ಲಿಕೇಶನ್‌ಗಳೊಂದಿಗೆ ತ್ವರಿತವಾಗಿ ಸಂಯೋಜಿಸಬಹುದು. ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್‌ನಲ್ಲಿ ಬರೆಯಲಾದ ಯಾವುದೇ ಅಪ್ಲಿಕೇಶನ್‌ನೊಂದಿಗೆ ನೀವು ಅದನ್ನು ಸಂಯೋಜಿಸಬಹುದು.

ಸ್ವಭಾವತಃ ಹೊಂದಿಕೊಳ್ಳುವ

Vue.js ನ ಹೊಂದಿಕೊಳ್ಳುವ ಸ್ವಭಾವವು React.js, Angular.js ಮತ್ತು ಯಾವುದೇ ಇತರ ಹೊಸ JavaScript ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳ ಡೆವಲಪರ್‌ಗಳಿಗೆ ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. HTML ಫೈಲ್‌ಗಳು, ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳು ಮತ್ತು ಶುದ್ಧ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗಳನ್ನು ಬರೆಯಲು ವರ್ಚುವಲ್ ನೋಡ್‌ಗಳನ್ನು ಬಳಸಲು ಇದು ಸಾಕಷ್ಟು ನಮ್ಯತೆಯನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಘಟಕಗಳು

Vue.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮರುಬಳಕೆ ಮಾಡಬಹುದಾದ ಕಸ್ಟಮ್ ಅಂಶಗಳನ್ನು ನೀವು ರಚಿಸಬಹುದು.

ಸರಳ, ಸಂಪೂರ್ಣ ಮತ್ತು ವಿವರವಾದ ದಸ್ತಾವೇಜನ್ನು

Vue.js ತುಂಬಾ ಸರಳ, ಸಂಪೂರ್ಣ ಮತ್ತು ವಿವರವಾದ ದಾಖಲಾತಿಯನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದ್ದರಿಂದ HTML ಮತ್ತು JavaScript ಬಗ್ಗೆ ಸ್ವಲ್ಪ ಕಲ್ಪನೆಯನ್ನು ಹೊಂದಿರುವ ಡೆವಲಪರ್‌ಗಳು ಅದನ್ನು ಪ್ರೋಗ್ರಾಂಗೆ ಬಳಸಬಹುದು.

ವರ್ಚುವಲ್ DOM

Vue.js ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಇತರ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಾದ ReactJS, ಎಂಬರ್, ಇತ್ಯಾದಿಗಳಂತೆಯೇ ವರ್ಚುವಲ್ 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 ಫ್ರೇಮ್‌ವರ್ಕ್ ನಮಗೆ ಅನುಮತಿಸುತ್ತದೆ defiಡೈರೆಕ್ಟಿವ್ಸ್ ಎಂದು ಕರೆಯಲ್ಪಡುವ ನೈರ್ 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>  

ಈ ಸಂದರ್ಭದಲ್ಲಿ, ಹೊಸ ವಿ-ಬೈಂಡ್ ಗುಣಲಕ್ಷಣವು ನಿರ್ದೇಶನವಾಗಿದೆ. ನಿರ್ದೇಶನಗಳನ್ನು Vue ನಿಂದ ಒದಗಿಸಲಾದ ಅನನ್ಯ ಗುಣಲಕ್ಷಣಗಳು ಎಂದು ಸೂಚಿಸಲು v- ಪೂರ್ವಪ್ರತ್ಯಯದೊಂದಿಗೆ ಬಳಸಲಾಗುತ್ತದೆ ಮತ್ತು ಪ್ರದರ್ಶಿಸಲಾದ DOM ಗೆ ವಿಶೇಷ ಸ್ಪಂದಿಸುವ ನಡವಳಿಕೆಯನ್ನು ಅನ್ವಯಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆಯ ಫಲಿತಾಂಶವು ಈ ಕೆಳಗಿನಂತಿರುತ್ತದೆ

Ercole Palmeri

ನಾವೀನ್ಯತೆ ಸುದ್ದಿಪತ್ರ
ನಾವೀನ್ಯತೆಯ ಪ್ರಮುಖ ಸುದ್ದಿಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳಬೇಡಿ. ಇಮೇಲ್ ಮೂಲಕ ಅವುಗಳನ್ನು ಸ್ವೀಕರಿಸಲು ಸೈನ್ ಅಪ್ ಮಾಡಿ.

ಇತ್ತೀಚಿನ ಲೇಖನಗಳು

ಬ್ರಿಲಿಯಂಟ್ ಐಡಿಯಾ: ಬ್ಯಾಂಡಲಕ್ಸ್ ಏರ್‌ಪ್ಯೂರ್ ® ಅನ್ನು ಪ್ರಸ್ತುತಪಡಿಸುತ್ತದೆ, ಇದು ಗಾಳಿಯನ್ನು ಶುದ್ಧೀಕರಿಸುವ ಪರದೆ

ನಿರಂತರ ತಾಂತ್ರಿಕ ನಾವೀನ್ಯತೆ ಮತ್ತು ಪರಿಸರ ಮತ್ತು ಜನರ ಯೋಗಕ್ಷೇಮಕ್ಕೆ ಬದ್ಧತೆಯ ಫಲಿತಾಂಶ. Bandalux Airpure® ಅನ್ನು ಪ್ರಸ್ತುತಪಡಿಸುತ್ತದೆ, ಟೆಂಟ್…

12 ಏಪ್ರಿಲ್ 2024

ವಿನ್ಯಾಸ ಪ್ಯಾಟರ್ನ್ಸ್ Vs SOLID ತತ್ವಗಳು, ಅನುಕೂಲಗಳು ಮತ್ತು ಅನಾನುಕೂಲಗಳು

ವಿನ್ಯಾಸ ಮಾದರಿಗಳು ಸಾಫ್ಟ್‌ವೇರ್ ವಿನ್ಯಾಸದಲ್ಲಿನ ಮರುಕಳಿಸುವ ಸಮಸ್ಯೆಗಳಿಗೆ ನಿರ್ದಿಷ್ಟ ಕಡಿಮೆ-ಮಟ್ಟದ ಪರಿಹಾರಗಳಾಗಿವೆ. ವಿನ್ಯಾಸ ಮಾದರಿಗಳು ...

11 ಏಪ್ರಿಲ್ 2024

ಮ್ಯಾಜಿಕಾ, ತಮ್ಮ ವಾಹನವನ್ನು ನಿರ್ವಹಿಸುವಲ್ಲಿ ವಾಹನ ಚಾಲಕರ ಜೀವನವನ್ನು ಸರಳಗೊಳಿಸುವ iOS ಅಪ್ಲಿಕೇಶನ್

ಮ್ಯಾಜಿಕಾ ಎಂಬುದು ಐಫೋನ್ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿದ್ದು ಅದು ವಾಹನ ನಿರ್ವಹಣೆಯನ್ನು ಸರಳ ಮತ್ತು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಮಾಡುತ್ತದೆ, ಚಾಲಕರು ಉಳಿಸಲು ಮತ್ತು...

11 ಏಪ್ರಿಲ್ 2024

ಎಕ್ಸೆಲ್ ಚಾರ್ಟ್‌ಗಳು, ಅವು ಯಾವುವು, ಚಾರ್ಟ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಮತ್ತು ಸೂಕ್ತವಾದ ಚಾರ್ಟ್ ಅನ್ನು ಹೇಗೆ ಆರಿಸುವುದು

ಎಕ್ಸೆಲ್ ಚಾರ್ಟ್ ಎಕ್ಸೆಲ್ ವರ್ಕ್‌ಶೀಟ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಪ್ರತಿನಿಧಿಸುವ ದೃಶ್ಯವಾಗಿದೆ.…

9 ಏಪ್ರಿಲ್ 2024

ನಿಮ್ಮ ಭಾಷೆಯಲ್ಲಿ ಹೊಸತನವನ್ನು ಓದಿ

ನಾವೀನ್ಯತೆ ಸುದ್ದಿಪತ್ರ
ನಾವೀನ್ಯತೆಯ ಪ್ರಮುಖ ಸುದ್ದಿಗಳನ್ನು ಕಳೆದುಕೊಳ್ಳಬೇಡಿ. ಇಮೇಲ್ ಮೂಲಕ ಅವುಗಳನ್ನು ಸ್ವೀಕರಿಸಲು ಸೈನ್ ಅಪ್ ಮಾಡಿ.

ನಮ್ಮನ್ನು ಅನುಸರಿಸಿ