What is Vue?

Vue is a simple and easy-to-use JS framework which appeared in 2013. It is the successful result of taking some excellent ideas from Angular and React and combining them in an easy-to-use package. 

Compared with other popular frontend frameworks, Vue comes out on top for simplicity and ease of use.

Let's see how we can start using it.

The quickest way to start using Vue2

In the last decade, a lot of the tools for web development have moved to the web, so let's go with the flow and start a new pen on http://codepen.io/.

You don't have to be a member of https://codepen.io/ to create pens there—you can just save them with the blanket username Captain Anonymous. However, it's better to open an account so you have all your experiments in one place.

Once you navigate your browser to https://codepen.io, you'll be greeted with the following screen:

Click on the Create dropdown (in the main navigation, in the top-right area of the screen), and then click New Pen. Once you do, you will see the default editor setup:

Next, click the Settings button in the top right of the screen, and in the popup that appears choose JavaScript:

Next, in the Quick-add drop-down field, select the Vue option. Once you do, the first input will be filled out with the current minified version of Vue which is served from the Cloudflare CDN, or, more specifically, from this link: https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js.

That's it! We're ready to start using Vue2 in our Codepen project.

One thing to understand about Vue is that it makes our HTML dynamic. This is achieved by adding mustache syntax. This syntax is very easy to understand. We simply insert it inside an HTML element. For example, we can add mustache syntax to an h1 tag like this:

<h1>{{ heading1 }}</h1>

So, let's go over how this works in detail. Feel free to work on your own pen or see the example here: https://codepen.io/AjdinImsirovic/pen/rKYyvE.

Mustache template example

Let's begin working with our first pen:

<div id="entryPoint">
  <h1>Just an h1 heading here</h1>
  <h2>Just an h2 heading here</h2>
  <p>Vue JS is fun</p>
</div>

We can now see our HTML being rendered in the CodePen preview pane, with the following text printed on the screen:

Just an h1 heading here
Just an h2 heading here
Vue JS is fun

Note that the CodePen app will often update the preview pane even without saving, which is a lot better than refreshing the browser—that must be done when working on your projects locally. Still, it is good to save your CodePen projects often, to not lose any changes (in the odd case of your browser freezing or something else out of the ordinary happening).

Next, let's add the following Vue code to the JS pane inside our pen:

new Vue({
  el: '#entryPoint',
  data: {
     heading1: 'Just an h1 heading here',
     heading2: 'heading 2 here',
     paragraph1: 'Vue JS'
  }
})

Finally, let's update the HTML so that the Vue code can work its magic:

<div id="entryPoint">
  <h1>{{ heading1 }}</h1>
  <h2>Just an {{ heading2 }}</h2>
  <p>{{paragraph1}} is fun</p>
</div>

In the previous code example, we can see how we use mustache templates to dynamically insert data into our HTML.

Mustache templating is achieved by simply passing the keys of our data object into our HTML tags and surrounding the keys with the opening {{ and closing }} tags.

As mentioned before, CodePen will auto-update the preview pane, but this will not affect the preview since we are effectively producing the same output as we did when we were using just plain HTML.

Now we can play with it simply by changing the key-value pairs inside our data entry:

new Vue({
  el: '#entryPoint',
  data: {
     heading1: 'This is an h1',
     heading2: 'h2 heading',
     paragraph1: 'Vue2'
  }
})

This time, the output will auto-update to this:

This is an h1
Just an h2 heading
Vue2 is fun

We can also change our entry point. For example, we can have Vue access only the p tag:

new Vue({
  el: 'p',
  data: {
     heading1: 'This is an h1',
     //heading2: 'h2 heading',
     paragraph1: 'Vue2'
  }
})

After this change, our preview pane will show the following:

{{ heading1 }}
Just an {{ heading2 }}
Vue2 is fun

From this output, we can conclude that our mustache templates will be rendered in our HTML output as regular text if either of the following things happen:

• Our entry point does not reference the data
• The entry in our data does not exist

We've also seen how our entry point can be any kind of selector. You can think of it as being similar to how you can target different elements in jQuery.

For example, we could have a more complex selector as our app's entry point:

new Vue({
  el: 'div#entryPoint',
  data: {
     heading1: 'This is an h1',
     heading2: 'h2 heading',
     paragraph1: 'Vue2'
  }
})

Using Vue's data option as a function

Note that the data option of our Vue instance can be either an object or a function. An example of data as an object can be seen in the previous code. Using data as a function is easy as well.

Data as an object doesn't work well with reusable components. For this reason, using data as a function is, generally speaking, a more useful way to use the data option in Vue.

Let's see another pen. This time, we'll use the data option as a function, instead of as an object. The pen is available here: https://codepen.io/AjdinImsirovic/pen/aKVJgd. The only change we'll make is in our Vue code:

new Vue({
  el: '#entryPoint',
  data() {
    return {
     heading1: 'Just an h1 heading here',
     heading2: 'heading 2 here',
     paragraph1: 'Vue JS data as a function'
    }
  }
})

Now that we're familiar with the very basics of Vue syntax, let's look at what it can be used for.