How to learn Vue js

Vue.js tutorial: step by step to your own app

All advantages at a glance

  • In the min version only 20 KB small
  • Very fast thanks to the virtual DOM
  • Little effort for big goals
  • Relatively little overhead
  • Combination of HTML, CSS and JavaScript

What can Vue.js do?

With Vue.js you canComponents For Web apps that are lightweight and fast. No new language is required for this;HTML, CSS and JavaScriptare only combined. The components you create are each kept in a single file (Single file components). So to build a component from HTML, CSS and JavaScript, you don't have to open several different files.

Vue.js can alsoin other frameworks like Reactintegrated become. Due to this flexibility and the low memory consumption, Vue.js is becoming more and more popular and the community is growing rapidly. One of the advantages over React is that the performance has been increased again. In the React framework developed by Facebook, for example, the subtree of a component is re-rendered each time the status of the component itself changes. Unless you set the statusPureComponent or add a noteshouldComponentUpdate. However, this is not always possible and this leads to unnecessary delays during the runtime.

In Vue.js this is done automatically when rendering. You don't have to set the status automatically, which in turn saves unnecessary code.

Easy entry into Vue.js

To help you get started, there is theVue CLIwhich you can find here as a free download. You can of course also use any other editor. The combination of HTML, CSS and JavaScript in one document isin the common Editors already integratedso that autocomplete and syntax highlighting are also possible without a CLI.

But let's start at the beginning. First of all, you should decide whether you want to start smaller projects or first test how Vue.js works. First you will find the instructions forsmaller projects and for testing. If you already know you want to start bigger projects, skip this part and go straight to the next pointPrepare larger projects.

Vue.js for small projects and for testing

Here you can download the current version of Vue.js.

You will find two versions on this page. The unpacked developer version and the packed production version. useto test if possible theDeveloper version, since you will only get error messages here. These notes are not included in the production version!

Ideally, take the Vue Devtools with you as well. Here areBrowser plugins that will make your work much easier.

Hello World!

  1. You can now start with a programming classic - Hello World! Create an HTML file in your editor and paste the filevue.js as a script:
  1. Now insert the call into the HTML construct:
  1. The JS code for this looks like this:

💡 Note: With el: you refer to the ID in the HTML document and provide a return to be printed. This is then accepted and displayed by the HTML document in curly brackets.

  1. With a small addition, you can also accept and display user input via the V-Modell. Just add and watch the change in the result.

Finished! The message fieldHello World!now has this text as default value, but can be overwritten with any textLive test you'll find here.

Prepare larger projects with Vue.js.

If youbigger projects create Vue.js usingNPM install it on your computer. To do this, proceed as follows:

  1. Create a new folder on your computer and switch to it. Then start the installation of Vue.js withNPM:
  1. After a few minutes you will see the success message:
  1. Now start the initialization of your web project:
  1. Answer the questions in the area above as applicable to your project. Usually the standard answers are fine. Give your computer a few minutes before you get the next message:
  1. Now follow thatNotice at the end of the success message. Change to the folder myproject,or the folder you had created. Here you insert a small intermediate step by first using thecommandnpm install call.
  1. Then call thecommandnpm run dev on.
  1. After a short pause in calculation, you will then receive the next success message:
  1. If you now call up the generated address with your browser, the result will be transmitted to you:

Already is your firstVue.js app finished – or at least good prepared. You can use the links generated to obtain further information.

Folder structure in Vue.js

This preparation creates a folder structure as it is known, for example, from VisualStudio:

The Readme file contains basic information about theCompile the project:

In the src folder you can find the files you want to edit or add them there:

Similar to the small oneHello World! Model above, you can find the hereSource files "App.vue" and "main.js" with the respective calls:

  1. main.js:

Now all you have to do is add your content or change existing data accordingly, and you're ready to gowith your Start the Vue.js project.

Conclusion:

Vue.js impresses with itsminimal Size and maximum flexibility. Larger projects can beeasily realizeif you already have some knowledge of web programming with HTML, CSS and JavaScript. With this framework, you are witheasy learning effort possible to see all three components in a new light.

More resources

More articles on the topic:

End of article