Το Vue.js εστιάζει κυρίως στο τμήμα οπτικοποίησης της εφαρμογής, που ονομάζεται επίσης ανάπτυξη front-end. Το Vue.js γίνεται δημοφιλές μέρα με τη μέρα επειδή είναι πολύ εύκολο να ενσωματωθεί με άλλα έργα και βιβλιοθήκες. Είναι πολύ απλό στην εγκατάσταση και χρήση.
Το Vue.js είναι ένα προοδευτικό πλαίσιο JavaScript ανοικτού κώδικα χρησιμοποιείται για την ανάπτυξη διαδραστικών διεπαφών χρήστη Ιστού και εφαρμογών μιας σελίδας (SPA). Το Vue.js συνήθως αναφέρεται ως Vue και προφέρεται ως "view.js" ή "view".
Μια Εφαρμογή μεμονωμένης σελίδας ή SPA είναι μια εφαρμογή Ιστού ή ιστότοπος που παρέχει στους χρήστες μια πολύ ομαλή, γρήγορη και γρήγορη εμπειρία παρόμοια με μια εφαρμογή επιτραπέζιου υπολογιστή. Μια εφαρμογή μιας σελίδας περιέχει ένα μενού, κουμπιά και μπλοκ σε μια μόνο σελίδα. Όταν ένας χρήστης κάνει κλικ σε μία από αυτές, ξαναγράφει δυναμικά την τρέχουσα σελίδα αντί να φορτώνει ολόκληρες νέες σελίδες από έναν διακομιστή. Αυτός είναι ο λόγος πίσω από την ταχύτητά της απόκρισης.
Το Vue έχει αναπτυχθεί βασικά για ανάπτυξη frontend, επομένως πρέπει να χειρίζεται πολλά αρχεία HTML, JavaScript και CSS. Το Vue.js διευκολύνει τους χρήστες να επεκτείνουν το HTML με χαρακτηριστικά HTML που ονομάζονται οδηγίες. Το Vue.js παρέχει ενσωματωμένες οδηγίες και πολλές οδηγίες definite από τον χρήστη για τη βελτίωση της λειτουργικότητας των εφαρμογών HTML.
Παρακάτω είναι η λίστα με τα πιο σημαντικά χαρακτηριστικά του Vue.js:
Τα στοιχεία του Vue.js είναι ένα από τα σημαντικά χαρακτηριστικά αυτού του πλαισίου. Χρησιμοποιούνται για την επέκταση βασικών στοιχείων HTML για την ενθυλάκωση επαναχρησιμοποιήσιμου κώδικα. Μπορείτε να δημιουργήσετε επαναχρησιμοποιήσιμα προσαρμοσμένα στοιχεία σε εφαρμογές Vue.js που μπορούν αργότερα να χρησιμοποιηθούν ξανά σε HTML.
Το Vue.js παρέχει πρότυπα που βασίζονται σε HTML που μπορούν να χρησιμοποιηθούν για να συσχετίσουν το αποδοθέν DOM με δεδομένα παρουσίας Vue. Όλα τα πρότυπα Vue είναι έγκυρα HTML που μπορούν να αναλυθούν από προγράμματα περιήγησης συμβατά με προδιαγραφές και αναλυτές HTML. Το Vue.js μεταγλωττίζει μοντέλα σε συναρτήσεις απόδοσης Virtual DOM. Το Vue αποδίδει στοιχεία σε εικονική μνήμη DOM πριν ανανεώσει το πρόγραμμα περιήγησης. Το Vue μπορεί επίσης να υπολογίσει τον ελάχιστο αριθμό στοιχείων για εκ νέου απόδοση και να εφαρμόσει την ελάχιστη ποσότητα χειρισμού DOM κατά την αλλαγή της κατάστασης εφαρμογής.
Το Vue παρέχει ένα σύστημα απόκρισης που χρησιμοποιεί απλά αντικείμενα JavaScript και βελτιστοποιεί την εκ νέου απόδοση. Σε αυτή τη διαδικασία, κάθε στοιχείο παρακολουθεί τις αντιδραστικές του εξαρτήσεις, ώστε το σύστημα να γνωρίζει ακριβώς πότε και ποια στοιχεία να αποδώσει ξανά.
Η πλοήγηση στη σελίδα γίνεται με τη βοήθεια vue-router. Μπορείτε να χρησιμοποιήσετε την επίσημα υποστηριζόμενη βιβλιοθήκη vue-router για την εφαρμογή μιας σελίδας.
Το Vue σάς επιτρέπει να χρησιμοποιείτε διαφορετικά εφέ μετάβασης όταν εισάγονται, ενημερώνονται ή αφαιρούνται στοιχεία από το DOM.
Υπάρχουν πολλές μέθοδοι για να χρησιμοποιήσετε το Vue.js. Μπορείτε να το εγκαταστήσετε μεταβαίνοντας στον επίσημο ιστότοπο του ή μπορείτε να ξεκινήσετε να χρησιμοποιείτε το αρχείο Vue.js από τη βιβλιοθήκη CDN επίσης. Ακολουθούν ορισμένοι τρόποι χρήσης του 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 από το CDN, στην εφαρμογή σας. Χρησιμοποιήστε τον σύνδεσμο https://unpkg.com/vue@3/dist/vue.global.js μέσα στο στοιχείο <script>, ως κατωτέρω:
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>Το Vue.js είναι μια από τις πιο πρόσφατες τεχνολογίες λογισμικού που χρησιμοποιείται ευρέως για την ανάπτυξη ιστού και τη δημιουργία Εφαρμογών Μονής Σελίδας (SPA). Όπως μπορείτε να μαντέψετε από το όνομα, χρησιμοποιείται ως επί το πλείστον για τη διεπαφή χρήστη ή την πλευρά εμφάνισης του έργου.
Ας δούμε τα οφέλη από τη χρήση του Vue.js στο έργο σας:
Ένα από τα μεγαλύτερα πλεονεκτήματα του Vue.js είναι ότι είναι πολύ μικρό σε μέγεθος. Η επιτυχία ενός πλαισίου JavaScript εξαρτάται πολύ από το μέγεθός του και αυτό το συναρπαστικό πρόσθετο JavaScript είναι μόνο 18-21 KB, ώστε να μπορείτε να το κατεβάσετε και να το χρησιμοποιήσετε πολύ εύκολα σε ελάχιστο χρόνο.
Το πλαίσιο Vue.js έχει μια πολύ απλή δομή και είναι πολύ εύκολο να κατανοηθεί. Είναι ένας από τους λόγους για τη δημοτικότητα αυτού του πλαισίου. Εάν είστε εξοικειωμένοι με την HTML και τη JavaScript, μπορείτε εύκολα να κωδικοποιήσετε στο Vue.js. Οι χρήστες μπορούν εύκολα να προσθέσουν το Vue.js στο web project τους λόγω της απλής δομής του και να αναπτύξουν εφαρμογές.
Το Vue.js έχει πολλά στοιχεία για τα πάντα και μπορεί να ενσωματωθεί πολύ γρήγορα με υπάρχουσες εφαρμογές. Μπορείτε να το ενσωματώσετε με οποιαδήποτε εφαρμογή γραμμένη σε JavaScript.
Η ευέλικτη φύση του Vue.js καθιστά επίσης εύκολη την κατανόηση των προγραμματιστών των React.js, Angular.js και οποιωνδήποτε άλλων νέων πλαισίων JavaScript. Παρέχει μεγάλη ευελιξία στη χρήση εικονικών κόμβων για τη σύνταξη αρχείων HTML, αρχείων JavaScript και καθαρών αρχείων JavaScript.
Μπορείτε να δημιουργήσετε προσαρμοσμένα στοιχεία που μπορούν να επαναχρησιμοποιηθούν σε εφαρμογές Vue.js.
Το Vue.js παρέχει πολύ απλή, πλήρη και λεπτομερή τεκμηρίωση, επομένως οι προγραμματιστές που έχουν ελάχιστη ιδέα για το HTML και το JavaScript μπορούν να το χρησιμοποιήσουν για προγραμματισμό.
Το Vue.js χρησιμοποιεί εικονικό DOM παρόμοιο με άλλα υπάρχοντα πλαίσια όπως ReactJS, Ember κ.λπ. Το εικονικό DOM είναι μια ελαφριά αναπαράσταση δέντρου στη μνήμη του αρχικού HTML DOM και ενημερώνεται χωρίς να επηρεάζεται το αρχικό DOM.
Το Vue.js παρέχει αμφίδρομη επικοινωνία με την αρχιτεκτονική του Model View View Model (MVVM) που απλοποιεί τον χειρισμό των μπλοκ HTML.
Το πλαίσιο συνοδεύεται από ένα σύστημα που μας επιτρέπει να αποδίδουμε δηλωτικά δεδομένα στο 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:
Το Vue.js χρησιμοποιεί διπλές αγκύλες {{}} ως σύμβολα κράτησης θέσης για δεδομένα και οι οδηγίες Vue.js είναι χαρακτηριστικά HTML που χρησιμοποιούν ένα πρόθεμα v-.
Μια εφαρμογή Vue συνδέεται σε ένα μεμονωμένο στοιχείο DOM και το ελέγχει πλήρως. Στο παραπάνω παράδειγμα, είναι #app.
Με το 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 είναι η οδηγία. Οι οδηγίες χρησιμοποιούνται με ένα πρόθεμα v- για να υποδείξουν ότι είναι μοναδικά χαρακτηριστικά που παρέχονται από το Vue και χρησιμοποιούνται για την εφαρμογή ειδικής συμπεριφοράς απόκρισης στο αποδοθέν DOM.
Το αποτέλεσμα του παραδείγματος είναι το εξής
Ercole Palmeri
Την περασμένη Δευτέρα, οι Financial Times ανακοίνωσαν συμφωνία με το OpenAI. Η FT αδειοδοτεί την παγκόσμιας κλάσης δημοσιογραφία της…
Εκατομμύρια άνθρωποι πληρώνουν για υπηρεσίες ροής, πληρώνοντας μηνιαίες συνδρομές. Είναι κοινή γνώμη ότι…
Η Coveware από την Veeam θα συνεχίσει να παρέχει υπηρεσίες αντιμετώπισης περιστατικών εκβιασμών στον κυβερνοχώρο. Το Coveware θα προσφέρει ιατροδικαστικές και δυνατότητες αποκατάστασης…
Η προγνωστική συντήρηση φέρνει επανάσταση στον τομέα του πετρελαίου και του φυσικού αερίου, με μια καινοτόμο και προορατική προσέγγιση στη διαχείριση των εγκαταστάσεων.…
