Step by Step Learning Vue 2

Tram Ho

Basic introduction to Vue 2

First we learn the basics, what is VueJs? Is it interesting or not? If you have the opportunity to work with AngularJs or ReactJs, VueJs is also a basic framework that uses javascript to work, but these frameworks also provide and support a lot of things to help programmers. Members work easier and faster. Let’s put into practical practice to help us. First let’s try to perform a basic example as in Vue’s docs, in my opinion, the Vue’s docs are quite understandable and easy to read.

Embark on the classic Hello world example to understand more vuejs can help us do anything. First let’s create an html file as follows

Next let’s embed the vuejs link described in the docs and add an input.

Assuming we still use the JS DOM as usual, how are we going to add the value to the input?

We can simply handle the following in the script tag, and the output will display the following

Okie, next I will make the same request for vuejs

As you can see, I have added a new Vue class ({}) including el and data. Add el to be able to freely use the elements in the div containing id = “root” and the main data is to add the data variable declared above. Then I simply added v-model to the input with the message being the part that I want to set the value in the input. And what will the result be like?

As you can see the result is still the same as we use the DOM of JS only. But the special thing of VueJS is not only that. Let’s continue adding 1 p tag as follows.

For {{message}} the message: Hello World is also displayed in the p tag. And when we change the value in the input, the p card section is also updated

Quite okay, the value will always be updated as we catch onchange () but we don’t have to code much more. Finally, we will delete the data variable and insert the message directly into the data of the new Vue function as follows:

The above is the simplest example of VueJS. Let’s come with the more advanced exercises in the following sections!

Share the news now

Source : Viblo