Vue.js Quick Start Guide

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

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.

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:

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'
  }
})

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.

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.

All the v-* attributes in Vue are called directives, which is borrowed from Angular.

The concept of directives is very interesting. They make code easier to understand, easier to think about, and easier to work with.

There are other directives in Vue that we will use extensively throughout this book. For now, let's just list some of them: v-bind, v-cloak, v-for, v-else, v-else-if, v-model, v-on, v-once, v-text, and v-html.

An example of a useful directive is v-model. The v-model directive is used to make forms reactive; it helps us update data on user input events. While this topic might sound a bit advanced to a beginner in Vue, this complexity is dealt with so elegantly that even beginners should find it easy to see what is happening in the code:

<!-- HTML -->
<div id="app">
  <span>Enter the weight in kilograms:</span>
  <input v-model="someNum" type="number">
  <div>The weight in pounds is: {{ someNum * 2.20 }}</div>
</div>

// js
new Vue({
  el: '#app',
  data() {
    return {
      someNum: "1"
    }
  }
})

As you can see, the {{ someNum }} value is bound to whatever a user types into the input field. In other words, the underlying data model—the value of someNum—will change based on user input.

To view the pen for the preceding example, visit https://codepen.io/AjdinImsirovic/pen/pKdPgX.

The directives in Vue are further extended with the help of modifiers.

The link to official documentation on modifiers in directives can be found at this link: https://vuejs.org/v2/guide/forms.html#Modifiers.

To use a modifier, we simply append it to a directive. The simplest possible example might look a bit like this:

<!-- HTML -->
<div>
  <input v-model.trim="userInput" placeholder="type here">
  <p>You have typed in: {{ userInput }}</p>
</div>

// js
new Vue({
  el: 'div',
  data() {
    return {
      userInput: ""
    }
  }
})

We have just appended the trim modifier to the v-model directive.

You can view the example for this code at this link: https://codepen.io/AjdinImsirovic/pen/eKeRXK.

This modifier will trim any whitespace (such as spaces or tabs) typed into the input field by the user.

Before continuing with this 10,000-foot overview of Vue syntax, let's also mention the v-on directive, which is used for event handling. Here is a quick example:

<!-- HTML -->
<divid="example-1">
<buttonv-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>

// JS
var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

Vue even provides shortcut syntax for v-on: the @ symbol. Thus, we can replace v-on:click with just @click and our Vue counter will still work.

To view this example in http://codepen.io/, visit the following URL: https://codepen.io/AjdinImsirovic/pen/PaOjvz.

The methods option in a Vue instance just lists all the functions that exist on that Vue instance (or on a Vue component).

The methods option works with the data of the Vue instance. What follows is a simple demonstration of this concept in practice:

// HTML
<div id="definitions">
  <!-- 'whatIsVue' and 'whyUseVue' are functions defined in the 'methods' option in the Vue instance -->
  <button id="btn" v-on:click="whatIsVue">What is Vue?</button>
  <button id="btn" v-on:click="whyUseVue">Why use Vue?</button>
</div>

// JS
var definitions = new Vue({
 el: '#definitions',
 data: {
 name: 'Vue.js'
 },
 // define methods (functions) under the `methods` object
 methods: {
   whatIsVue: function () {
    console.info(this.name + ' is a Progressive Front-end Framework')
   },
   whyUseVue: function () {
    alert('Because ' + this.name + ' is nice.')
   }
 }
})

As we can see, the data option holds the Vue.js string, which can be accessed via thenamekey.

Inside the methods option, we can see two functions: whatIsVue and whyUseVue. The whatIsVue function takes the click event and logs out the value inside name to the console. The whyUseVue function inside the methods option works similarly. 

This code can be seen in a pen at this address: https://codepen.io/AjdinImsirovic/pen/yEPXdK.

Computed properties are used to avoid complex logic adding bloat to your views. In other words, computed properties are useful to hide the complexity from our HTML and thus keep our HTML understandable, easy to use, and declarative. Put differently, when we need to compute some values from the data option, we can do that with the help of computed properties.

The full code for the following example can be seen at https://codepen.io/AjdinImsirovic/pen/WyXEOz:

<!-- HTML -->
<div id="example">
  <p>User name: "{{ message }}"</p>
  <p>Message prefixed with a title: "{{ prefixedMessage }}"</p>
</div>

// JS
var example = new Vue({
  el: '#example',
  data: {
    userName: 'John Doe',
    title: ''
  },
  computed: {
    // a computed getter
    prefixedMessage: function () {
      // `this` points to the Vue instance's data option
      return this.title + " " + this.userName
    }
  }
})

Watchers are not as frequently used as computed properties are. In other words, the watch option is to be used less frequently than the computed properties option. Watchers are commonly used for asynchronous or otherwise costly operations with changing data.

Watchers have to do with reactive programming; they allow us to observe a sequence of events through time and react to changes as they happen on a certain data property. 

We will cover the subject of computed properties and watchers in later chapters. For now, it is sufficient to know that they exist in Vue and that they are widely used.