I recently worked with Evan You, Chris Fritz, Sarah Drasner, and Adam Jahr to produce an introduction video, which you can now find on the front page of http://vuejs.org. What follows is a text version of that video.
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.
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.
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.
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 <li> 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 <span> 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:
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.
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.
Take Vue Mastery’s free Intro to Vue.js course. Vue Mastery also has a free Vue cheat sheet you’ll get if you create a free account, which has all of the syntax you need to know when you’re first getting started. Also, there is Introduction on the Official Documentation.
Lastly I must thank Evan You, Chris Fritz, Sarah Drasner, and Adam Jahr for helping me create this content and the video.