Μάθετε το Vue.js σε αυτό το δωρεάν μάθημα! ; ✨

Ας κάνουμε κάτι Vueseful

Προτού φτάσω στο άρθρο, θέλω απλώς να μοιραστώ ότι δημιουργώ ένα προϊόν και θα ήθελα πολύ να συλλέξω ορισμένα δεδομένα σχετικά με τον τρόπο καλύτερης εξυπηρέτησης των προγραμματιστών ιστού. Δημιούργησα ένα σύντομο ερωτηματολόγιο για να το ελέγξω πριν ή μετά την ανάγνωση αυτού του άρθρου. Ελέγξτε το - ευχαριστώ! Και τώρα, πίσω στον κανονικό προγραμματισμένο προγραμματισμό μας.

Γεια Διαδίκτυο!

Ίσως να μην γνωρίζετε τι είναι το Vue - και αυτό είναι εντάξει - και καλό, ίσως να μην ξέρετε ποιος είμαι! Είμαι ο Zaydek και είμαι έμπειρος σχεδιαστής γραφικών και προγραμματιστής. Μόλις κυκλοφόρησα ένα δωρεάν μάθημα για να βοηθήσω τους προγραμματιστές να μάθουν λίγο το Vue! Είμαι εδώ για να σας διαφωτίσω για όλες τις δυνατότητες που μαθαίνουν και χρησιμοποιούν αυτό το εκπληκτικό πλαίσιο ανοιχτού κώδικα.

Σε αυτό το άρθρο, περιγράφω λεπτομερώς πώς να σκεφτώ τον Vue. Επαναλαμβάνω επίσης τα δομικά στοιχεία που χρειάζονται για να ξεκινήσω τον προγραμματισμό στατικών και δυναμικών ιστότοπων με μεγαλύτερη τάξη μεγέθους από ό, τι με το JavaScript βανίλιας. ; Το Vue είναι ένα παράδειγμα για τη σύνταξη εφαρμογών ιστού και ένας ιδιωματικός οδηγός για την εκμάθηση και τον προγραμματισμό JavaScript.

Διδάσκω επίσης το JavaScript; ✨ Χρειάστηκε να ξεκινήσω στο μάθημα Vue που μόλις κυκλοφόρησα. Μάθετε Vue από τα βασικά και πώς να δημιουργήσετε μερικά πράγματα επίσης. Κάντε κλικ εδώ για να εγγραφείτε δωρεάν!

Το μάθημα διδάσκεται στο Scrimba.com, το οποίο είναι ένας νέος και διαδραστικός ιστότοπος για μάθηση και κοινή χρήση του τρόπου κωδικοποίησης . Μπορείτε να διακόψετε και να επεξεργαστείτε τις σκηνές προβολής, κάνοντας τη μάθηση ενεργή και διασκεδαστική για πειραματισμό.

Το Vue δεν είναι ένα πράγμα

Ένα πλαίσιο μπορεί να θεωρηθεί ως εργαλειοθήκη γενικής χρήσης, εξοπλισμένο με εργαλεία που επιλύουν διαφορετικά προβλήματα, αλλά όλα μαζί βοηθούν σε κάποια εργασία. Αυτό το καθήκον, όσον αφορά τη Vue, είναι η δημιουργία διατηρήσιμων και ιδιωματικών εφαρμογών ιστού με ευκολία - πραγματικά - και διασκεδάζοντας ενώ είμαστε σε αυτό!

Ας βάλουμε τα πράγματα σε προοπτική. Το Vue μπορεί να είναι τόσο απλό όσο μια ετικέτα σεναρίου που μπορούμε να συμπεριλάβουμε στους ιστότοπούς μας για να τις μετατρέψουμε σε εφαρμογές ιστού. Αλλά μπορεί επίσης να είναι ένα ολόκληρο οικοσύστημα που βασίζεται σε μια διαδικασία κατασκευής για να διευκολύνει τις μηχανικές σύνθετες και ισχυρές εφαρμογές ιστού.

Σε αυτό το άρθρο και στο μάθημα, επικεντρώνομαι στην εκμάθηση των βασικών εννοιών που παρουσιάζει ο Vue και δεν υποθέτω καμία γνώση της γραμμής εντολών ή τι είναι μια διαδικασία κατασκευής.

Τι καλύπτει το μάθημα

Το μάθημα αποτελείται από τρία μέρη:

  1. μαθαίνοντας το ελάχιστο JavaScript που απαιτείται για να ξεκινήσετε με το Vue
  2. εκμάθηση των βασικών εννοιών του Vue, και
  3. μια επισκόπηση δύο πιο προηγμένων παραδειγμάτων (δύο χαριτωμένες και διασκεδαστικές εφαρμογές ιστού που έφτιαξα: Schrödinger's Div? and a? Color Picker).

Αυτό που μου αρέσει για το Vue είναι ότι προτείνει μερικές ενδιαφέρουσες ιδέες για το πώς να σκεφτώ και πώς να δημιουργήσω εφαρμογές ιστού. Υπάρχουν μερικές ιδέες που πιστεύω ότι είναι πιο ενδιαφέρουσες - αν και αυτό δεν υπονοεί όλα όσα μπορεί να κάνει η Vue:

  • διαχωρισμός των δεδομένων από το DOM
  • ιδιωματική JavaScript
  • templating και HTML βάσει στοιχείων
  • διαχείριση χειρισμού εκδηλώσεων

Αλλά προτού μπορέσουμε να το καταλάβουμε, ας καλύψουμε πρώτα πώς να συνδέσουμε το Vue μέσω μιας απλής ετικέτας σεναρίου σε έναν ιστότοπο:

Μπορείτε να θεωρήσετε μια εφαρμογή ιστού ως μέσα ή πάνω από έναν ιστότοπο. Έτσι, μια εφαρμογή ιστού ξεκινά τη ζωή της στο

p">, where from inside the script tag it is plugged in via new Vue({ el: "#app" }). That is how we create a relationship from the JavaScript to the HTML (where el is short for element).

This is the first of what are known as options, and Vue supports a lot of options, such as data and methods. These are analogous to variables and functions for our web app.

Note: Vue comes in two flavors: ? there’s both the development and production version. The development version emits detailed error messages and warnings to support developers while working in Vue. The production version is optimized for speed and size.

In addition to all of this, there’s an official Chrome extension that makes managing the app’s state and debugging painless.

Separating the data from the DOM

As mentioned earlier, one great suggestion Vue proposes is separating the data from the DOM. DOM stands for document-object-model, which can be thought of as the tree of elements that compose our website. The text in between the opening and closing elements is what I’m referring to as the data. In Vue we don’t hardcode it — we separate it and put in the aforementioned data object from inside of our Vue instance.

This idea is also referred to as the Virtual DOM. This might seem insignificant, but the truth is that having the data in one place means that we know how and where to update it. And because Vue is reactive, whenever we update said data, that change gets propagated throughout our web app. Because of this relationship, data can be thought of as much more alive in Vue than in vanilla HTML.

These ideas are explored in the third screencast.

Idiomatic JavaScript

For me, Vue makes JavaScript a language worth learning, because it makes sense of JavaScript. What I mean is that from inside of a new Vue({ ... }) is how and where we learn to wrangle JavaScript. Variables are key-value pairs attached to the data object as shown above, and functions are attached as key-value pairs attached to a second object: methods. And both objects data and methods are optional — remember, these are our web app’s options.

But Vue goes a lot further: Vue features a lot of options that come in the form of objects we hook into in our Vue instance. Altogether, this resembles an idiomatic guide and approach to programming in JavaScript. Therefore, few architectural decisions are left for the programmer. This means that writing and reading Vue has a sort of coherence and elegance that makes it easier to pick up than deconstructing how a vanilla JavaScript app works.

These ideas are explored in the fourth screencast.

Templating HTML

Most people wouldn’t consider HTML a programming language. But I think a reasonable definition of the purpose of a programming language is this: to interpret and transform data, such as reading and compiling source code.

Given Vue’s attributes, such as v-for, v-if, and so on, for me HTML begins to resemble a programming language with control-flow. This means that we can better control the flow of our program’s data (for example, our website’s content or what I keep calling the data).

For what it’s worth, templating frameworks, like Jekyll and Hugo, were created to aid developers with authoring static-based websites using a kind of control-flow. As nice as this is, it’s limited to static websites, because these frameworks compile to HTML rather than interpret HTML.

Having access to realtime control-flow, like for-loops and if-statements, means that Vue can do a lot more and do it in realtime. This is one of the big differences between websites and web apps (static versus dynamic content).

These ideas are explored in the fifth screencast.

Components and props

Something that took me far too long to appreciate is the difference between variables and properties. Variables store data, whereas properties are variables attached to an object in JavaScript. So components can be thought of as HTML mixins. A what? A mixin is like a function, but instead of returning data, it mixes-in data into the document. For example, it writes HTML for us so we don’t have to repeat ourselves!

And this isn’t a small thing. The benefit of components and props in Vue means we can refactor entire HTML code blocks into one-liners that can be customized via props. This means we can now author custom elements that expose access to their internals without overcomplicating the public HTML. This is a big win for both maintainable and readable code.

These ideas are explored in the sixth screencast.

Managing event-handling

While everything we’ve talked about so far is fascinating, it doesn’t speak to user-interaction, which is one of the key differences between a website versus a web app. A website conventionally means something that is more-or-less static and isn’t designed or intended to interact with the user much, outside of perhaps collecting data. In an actual web app, something reminiscent of a native app, interaction is paramount. ? This idea is also referred to as a dynamic website or web app.

Since Vue is both a framework and an ecosystem, it has idiomatic solutions for this, too. The simplest one that I teach in the course is the @click="function()" handler which we plug into an element as an HTML attribute. This simple snippet gives us a means to interact with our data, as simple as an attribute that we plug into an element. This means that we can defer to JavaScript and not HTML or CSS for rich user-interaction.

These ideas are explored in the seventh screencast.

There’s a lot more to learning Vue, so I wrote two more articles on the subject matter. Please, after this article, have a look!

Vue makes the web make sense

Before Vue, I was acquainted with HTML and CSS. I was comfortable enough to make some alluring websites, but nothing more. I explored some frameworks (like those I discussed in this article concerning static compilation), and peered into Angular and React, but I didn’t get the right feeling when exploring those. What I wanted was something lightweight and intuitive, and I believe I’ve found that with Vue.

In the end, it doesn’t matter which tools we use if we can create what we set out to build. But the thing is, it’s hard to separate the tools from the thinking used to build a product or service. This is both a good and bad thing. On the one hand, it can make us narrow-minded. But on the other end of the spectrum, the tools we use can also serve as a teaching instrument for learning new and interesting ideas. I love tools that can’t help but teach me at the same time, and I couldn’t recommend Vue more for this reason!

So please, go out into the beautiful world and learn you some Vue! You can(!) make amazing things and even change people’s lives, even your own. And if it helps, try the free course!