Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

A View to Vue.js

DZone's Guide to

A View to Vue.js

While Angular and React get a lot of attention, Vue.js has a growing community of developers supporting it. Read on to find out why!

· Web Dev Zone ·
Free Resource

Code something amazing with the IBM library of open source blockchain patterns. Content provided by IBM.

This article is featured in the new DZone Guide to Web Development. Get your free copy for more insightful articles, industry statistics, and more!

If you’re like me, you’ve likely been bombarded over the past few years by Angular and React content. Every other blog entry, conference session, or keynote seemed to be focused on either of the two. With that context in mind, I can still remember the first time I saw a “Vue.js” talk listed on a conference schedule. While I certainly do not pretend to know everything, at least when it comes to buzzwords and the such, I was pretty sure I had heard of most of the popular front-end frameworks out there and this was one I had decidedly not heard of.

Vue.js is not new. It was first released in 2014 by its creator, Evan You. But it’s almost as if talking about the framework has been drowned out by all the attention given to Angular, and even more so, React. If you’ve avoided looking at Vue.js because of this, you’ve made a mistake, and I’d like to explain why.

So, What Is It?

Vue is an incredibly simple framework that can scale up with your needs. If you aren’t building an app but instead simply need a bit of JavaScript on a page, Vue is the perfect tool to make that JavaScript easier to manage and more powerful. I like Angular, but sometimes I don’t want an “app” — I don’t want a large set of dependencies and a build “process” just for one simple page. While Vue projects can certainly grow into complex applications, the default is to start small and simple and I really appreciate that.

At the basic level, Vue handles two-way binding between your view (form fields and the such) and your code as well as the rendering of data. In the abstract, that’s almost too vague to make sense of, so let’s look at a simple example.

First, a bit of HTML (the HTML has been simplified to save space, including removing the script tag to load Vue itself).

<div id=”app”>
 <input v-model=”name”><br/>
 My name is {{name}}
</div>

And now the JavaScript:

let app = new Vue({
 el:’#app’,
 data:{
 name:’Ray’
 }
})

Let’s tackle the JavaScript first. It begins by creating a new instance of Vue. You can basically think of this as a Vue app, but rather simplified. I bind it to the DOM with the el value and then specify some default data. In this case a name with the value of Ray.

On the HTML side, note that I’ve used a div with “app” as a way of connecting it to the Vue instance made earlier. There are two special things going on here. The attribute v-model in the input tag binds the value in the form to the variable name defined in the Vue instance. Changing the input field will update the data and vice versa. The next line shows a simple example of the template syntax. In this case, {{name}} is automatically replaced with the value of name.

Run this code (which you can do via the CodePen here) and you’ll see that as you type, the text after “My name is” is updated automatically.

Taking it to the Next Level

...Ok, that’s possibly not that exciting, but let’s kick it up a notch. Let’s build a simple application that searches the iTunes API. It will have a search field, a button to initiate searching, and then a place to render the results. We’ll start with the HTML:

<div id=”app”>
 <input v-model=”term” type=”search”>
 <button @click=”search”>Search</button>
 </p>
 <div v-for=”result in results”>
 <img :src=”result.artworkUrl100”>
 <b>Artist:</b> {{result.artistName}}<br/>
 <b>Track:</b> {{result.trackName}}<br/>
 <br clear=”left”>
 </div>
</div>

The first input field uses a similar syntax to the first example, using v-model to tell Vue, “Connect this value to a variable, ‘term’.” The button tag uses a shortcut “@click” to assign a click handler to the button. You’ll see the code assigned to that in a moment.

The fun part is the result render. By using v-for in the div, we’ve said, “Repeat this div for every item in the results array and assign a variable, result, to the individual item.” Inside the div, we use {{ … }} tokens to render the data. The image uses another shorthand, :src, to assign the src value to the result. Now let’s switch to the code.

let app = new Vue({
 el:’#app’,
 data:{
 term:’’,
 results:[]
 },
 methods:{
 search:function() {
 fetch(`https://itunes.apple.com/
 search?term=${encodeURIComponent(this.
 term)}&limit=10&media=music`)
 .then(res => res.json())
 .then(res => {
 this.results = res.results;
 });
 }
 }
})

It starts off much the same as the last example, but note the new data item: results. We set the initial result to an empty array. Next, we’ve defined a new block, methods, that will store functions related to our app. In this case, a function called search. It then uses the Fetch API (not part of Vue, it’s a modern XHR replacement) to hit the iTunes API. The result is in JSON, which is parsed and then simply assigned back to the array defined earlier.

And that’s it. No creating long strings of HTML to inject into the HTML, no event handlers defined by hand. Vue basically made shortcuts for all of the things we commonly do when working with JavaScript and HTML and made it as easy as pie. You can run this online yourself here.

Of course, there’s a lot more to the template rendering syntax, like conditionals, for example. The general form would look like this:

<div v-if=”somethingIsCool”>Cool.</div>

Another way to conditionally add something to the DOM is via CSS binding:

<div v-bind:class=”{ coolItem:somethingIsCool }”></div>

In this example, when the value of somethingIsCool is truthy, the coolItem is added as a class value for the div.

Again, the idea here is to provide simple shortcuts for common use cases. To me, it feels like I’ve got the power of Angular with nearly zero overhead.

Where Next?

Obviously, the first place you’ll want to start is the Vue homepage. Once there, start looking at the Guide as it walks you through the basics into the more complex tutorials. Then follow up with this incredible five-part guide to Vue by Sarah Drasner. Chrome and Firefox uses can also find a dev tools extension to help development. Mouse over that“Ecosystem” drop down on the Vue page for a good list of other related resources as well.

My suggestion is to simply give it a whirl. At the end of the day, actually using a framework tells you pretty quickly if it’s something that’s going to work well for you. The primary reason I don’t use React is that it simply didn’t gel with me — it certainly didn’t lack for features. However, Vue.js did get with me, and I think it might with you too!

This article is featured in the new DZone Guide to Web Development. Get your free copy for more insightful articles, industry statistics, and more!

Start coding something amazing with our library of open source Cloud code patterns. Content provided by IBM.

Topics:
web dev ,vue.js ,front-end developmemt ,javascript frameworks ,javascript libraries

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}