DEV Community

Cover image for Make life easy... VueJS
Interaction Designs
Interaction Designs

Posted on

Make life easy... VueJS

What is VueJS?

Basic VueJS is an implementation using JavaScript to make programming easier to write and read. VueJS has multiple possibilities that are not mentioned in this activity but just as (if not more) useful than I will show you.

Using VueJS in HTML

Once you learn the basics of VueJS you will be able to structure your programs so all of the important data is in one spot.

Example

Say we want our program to write out a list of three fruits and two vegetables all in paragraph elements (<p></p>). The traditional way with normal (boring) HTML would be to make five paragraph elements with a fruit or vegetable in each. Then if we would want to change a fruit or vegetable, we would have to find our paragraph elements and change them there. With VueJS, however, we are able to put all the fruits and vegetables in one area separate from the HTML and call from that list of fruits and vegetables to print our data.

Reasoning

A small example, like the one above, may seem like it would take more time to use VueJS than to normally write it but if we were to implement this process into a large scale program such as, a world-wide shipping conglomerate with thousands if not millions of products, then we could see how keeping all the products separate in a structured format could be extremely useful.

Still Lost?

John Travolta Lost Meme
Watch this video of a real world implementation or check out this code in the "Work Experience" section.

Top comments (0)