Why nearly 50% of Front-End Developers want to learn Vue.js

As you may know, JavaScript has matured a great deal in the last 10 years, and much of the code that was normally on the server-side has migrated into the browser. As that has grown more complex, so have the frameworks to keep things more organized.

I’m not going to tell you why one is better than the other, although there is a great comparison page on the official Vue docs.

Vue.js aims to be an approachable, versatile, performant, maintainable, and testable JavaScript framework. Vue also aims to be progressive, meaning that if you have an existing application you can use Vue in just one part of your front-end that needs a more interactive experience.

Alternatively, you can build more business logic into your front-end from the start. Vue has the core libraries and ecosystem you’ll need to scale.

Like other front-end frameworks, Vue allows you to take a webpage and split the logic up into reusable components. Each of these can have it’s own HTML, CSS, and JavaScript needed to render each piece of the page.

An example of how things might be split up into components

Diving into our First Project

I’d like to give you a sense of what it’s like to code in Vue if you haven’t seen it before, and show you some of the syntax. I won’t be diving into the details, but we’ll see some core concepts along the way.

As with many JavaScript applications, we start from the need to display our data onto a page.

To start building with Vue it’s quite simple.

As you can see in the above image we include the Vue library, create a Vue instance, and plug into our root element with the id of app. EL stands for element. We’ll also move our data inside an object and change X into an expression with the double curly braces.

As you can see, it works:

Nothing special, but the magic of Vue starts when data changes. If I jump into the console and change the value of the product, check out what happens:

Vue is reactive, meaning that when our data changes Vue takes care of updating all the places we’re using it on our webpage.

This works with any kind of data — not just strings. So, instead of a single product let’s use an array of products and update our h2 to an unordered list. To create a new element for every product, we’ll used a special attribute (AKA directive) from Vue called the v-for. This way, each product gets it’s own list item.

If we jump into the browser, here’s what we’d see:

This is still a little contrived though, so let’s start with our list empty and fetch our products from an actual API, which could be coming from a database somewhere.

If we look at what gets printed to our page now we’ll see:

As you can see, each list item is showing the object it returned. In order for this data to be read by humans, we need to change the way it’s displayed.

And our result is:

We might want to call attention to the items that have quantity 0, so lets add a with the text “OUT OF STOCK.” We only want it to appear if our item.quantity === 0, so we’ll use Vue’s v-if directive.

Sure enough, our jacket is out of stock:

What if we wanted to print out the total number of products under our list? We need to create a computed property called totalProducts, which returns the total quantity of our products. If you’re not familiar with JavaScript reduce, it’s adding up all the quantities from each product.

As you can see below, we now have our total inventory printing out.

This is probably a good time to tell you about the Vue.js devtools Chrome Extension. One of the nice features of the extension is that you can inspect the data getting loaded onto your page.

Just to show of some of Vue’s Reactivity again, let’s pop two items off the array and see what happens. As you can see below, not only is our list updated, but our total as well.

Next, I want to show you how we can add interactivity to this page through the use of a button. We’ll create an Add button for each product, and when a click occurs on this button we’ll increment the quantity by one.

Notice how when we add an item (below), not only does the total inventory get updated, but also if we increment our Jacket product, our Out of stock notice goes away.

But what if we want to just write in the quantity of jackets or hiking socks? We just create a new input field, and bind it to our product quantity field with the v-model directive, and specify that this is always a number.

You’ll notice I can now input the total quantity of each item, and it gets updated immediately. I can even set the quantity back to zero and I get my OUT of Stock statement, and my add buttons still work.

You can fiddle withthe finished version of this project and run it by heading over to this JSFiddle.

A few more Vue Features

If we were building this into a larger application would want to start splitting things up at this point into multiple components and files to keep things organized.

Vue even provides a Command Line Interface to make it simple to start developing real projects quickly. As you see below the init command can be used to start a new project.

We could also use single file .vue components, which contain HTML, JavaScript, and scoped CSS or even SCSS.

What you’ve seen here just barely scratches the surface of what Vue can do. There’s so much more to help you build, organize, and scale your front-end applications. To start coding yourself, I’ll recommend two resources.

Thank you for reading !

#Vuejs #Vue #JavaScript #Front End #Frameworks