The Data Property

The data property stores all of your data that you want to display or modify in the HTML of the Vue instance. Any information that you declare in the data property instantly becomes reactive. Reactive meaning that your data can change based on user interactions. Reactive properties are also bound in two-ways; when the data property is updated, any instance of that property is also updated. To display your data into your HTML view, use interpolation by using the mustache ({{ }}) syntax. If you’ve used AngularJS in the past, this should be familiar to you.

index.html

<div id="app">
  <p>Hi, my name is {{ name }}. I am from {{ hometown }}.</p>
</div>

app.js

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Dave Berning',
    hometown: 'Cincinnati, OH',
  },
});

Your view should read: Hi, my name is Dave Berning. I am from Cincinnati, OH. Try modifying your data by either changing the data properties or by adding additional properties, and use interpolation to display it out into your HTML view.

The Methods Property

The method property does what you would expect it to: it stores methods or functions that you can use across your application. These functions can either be used to execute something on one of Vue’s lifecycle methods (more on that later), running business logic or by returning a value that you can later use in your HTML view.

Let’s build off of the Vue Instance above.

Note: All of the examples in this book will be using the ES6 syntax, which requires a compiler like Babel to run in the browser. You are more than welcome to use TypeScript or the more supported ES5 syntax, which doesn’t require a compiler.

app.js

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Dave Berning',
    hometown: 'Cincinnati, OH',
  },
  methods: {
    showDataOnMounted() {
      console.log(this.name);
      console.log(this.hometown);
    },
  },
  mounted() {
    this.showDataOnMounted();
  },
});

In this example, there is an instance method that console logs the name and hometown data properties when the Vue Instance is mounted. You might also notice that we are using this a lot in the instance. That’s because this in Vue, refers to the Vue Instance, not the function. If you want to access the name data property, you can access it with this.name. To use name in your HTML via interpolation, just omit the this and use name. The same refers to any method or object.

Let’s write a method that returns something to your HTML view.

index.html

<div id="app">
  <p>Hi, my name is {{ name }}. I am from {{ hometown }}</p>
  <p>{{ numberOfSomething(someNumber, 'dogs') }}</p>
</div>

app.js

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Dave Berning',
    hometown: 'Cincinnati, OH',
    someNumber: 2,
  },
  methods: {
    numberOfSomething(number, something) {
      return `I have ${number} ${something}.`;
    },
  },
});

The numberOfSomething function accepts two arguments: a number and something. As demonstrated above, methods do not need to be called exclusively in the Vue Instance in the <script> tag; it can also be referenced in the HTML view and accept arguments. When wrapped in curly braces, the method is ran and the method returns the string, “I have 2 dogs.”.

The Computed Methods Property

One common mistake with new Vue developers (including myself, I must admit) is mixing up computed properties with methods that return a value. When used correctly, computed methods are great for a couple of reasons: 1) the value returned gets stored as if it was a data property (becomes reactive), and 2) computed properties are cached and stored.

Much like a method, computed properties can also perform logic and return something. The main difference between computed properties and methods are, computed properties cannot accept arguments. Computed properties are essentially used to perform logic, and return and store a value.

A method that should be a computed property (bad)

index.html

<div id="app">
  <p>You have {{ dogCount }} {{ dogs() }}</p>
</div>

app.js

var vm = new Vue({
  el: '#app',
  data: {
    dogCount: 2,
  },
  methods: {
    dogs() {
      if (this.dogCount === 1) {
        return 'dog';
      } else {
        return 'dogs';
      }
    },
  },
});

Your view should read: You have 2 dogs. If you change your dogCount to 1, it should read: You have 1 dog.

Computed properties, the proper way (good)

index.html

<div id="app">
  <p>You have {{ dogCount }} {{ dogs }}</p>
</div>

app.js

var vm = new Vue({
  el: '#app',
  data: {
    dogCount: 2,
  },
  computed: {
    dogs() {
      if (this.dogCount === 1) {
        return 'dog';
      } else {
        return 'dogs';
      }
    },
  },
});

Your view should still display the same information in the view. However, in this example, computed properties are being used appropriately.

A good rule of thumb when deciding to use computed properties or methods is: If you need to pass in an argument to return a certain value, always use methods. If you need to perform logic and return a value without any arguments, always use computed properties.

The Watch Property

The watch property is very similar to the computed property. They both react to a change in data, both can react to change in other data property, and both can be used as a data property. The main difference between the two properties is that the watch property is more generic than a computed property. Watch properties are more likely to be used if you have expensive operations in response to changing data or if you want to perform asynchronous tasks.

The watch property name must match that of the data property it’s watching.

var vm = new Vue({
  el: '#app',
  data: {
    favoriteFramework: 'Vue.js',
  },
  watch: {
    favoriteFramework () { ... }
  },
});

Lifecycle Methods

Lifecycle methods or “lifecycle hooks” are a way to perform functions or tasks during an instance’s lifecycle (i.e. run something when the component is created, mounted, destroyed, etc.).

Below is a list of all the current lifecycle hooks in Vue.js 2 at the time of writing. The most commonly used hooks are: created, beforeMount, mounted, and destroyed.

• beforeCreate
• created
• beforeMount
• mounted
• beforeUpdate
• activated
• deactivated
• beforeDestroy
• destroyed
• errorCaptured

Below is an easily digestible graph that is on the Vue.js documentation website.

You use lifecycle methods like any other instance property.

app.js

var vm = new Vue({
  el: '#app',
  data: {
    ...
  },
  beforeMount () {
    console.log('I am executed before the component or instance is mounted!');
  },
  mounted () {
    console.log('I am executed when the component or instance is mounted!');
  },
  destroyed () {
    alert('I am defeated!');
  }
});

The v-for Directive

The v-for directive is used to iterate through data in your view. In vanilla JavaScript, you would use a loop of some kind like forEach to iterate through data. However, in your view, there will be plenty of times where you want to display text for each item in an array.

app.js

var vm = new Vue({
  el: '#app',
  data: {
    bands: ['Green Day', 'Nirvana', 'Foo Fighters', 'The Beatles', 'Blink-182', 'Pearl Jam'],
  },
});

In this example, we have an array called bands that has a total of six bands. To display each band as a list item in an unordered list, you can use v-for to iterate through this data.

index.html

<div id="app">
  <ul>
    <li v-for="band in bands">{{ band }}</li>
  </ul>
</div>

You should see an unordered list with all six of the rock bands:

• Green Day
• Nirvana
• Foo Fighters
• The Beatles
• Blink-182
• Pearl Jam

The v-show Directive

The v-show directive is pretty straightforward; it displays an element based on a condition.

app.js

var vm = new Vue({
  el: '#app',
  data: {
    airports: [
      {
        code: 'CVG',
        country: 'USA',
      },
      {
        code: 'YYZ',
        country: 'Canada',
      },
      {
        code: 'SEA',
        country: 'USA',
      },
      {
        code: 'CDG',
        country: 'France',
      },
      {
        code: 'DCA',
        country: 'USA',
      },
    ],
  },
});

In this example, we use the string "Airport {{ code }} is in the United States." to display if the country of that airport is equal to “USA.”

index.html

<div id="app">
  <div class="airport" v-for="airport in airports">
    <p>{{ airport.code }}<p>
    <p v-show="airport.country === 'USA'">Airport <strong>{{ airport.code }}</strong> is in the United States.</p>
  </div>
</div>

The string should only display for airports CVG (Cincinnati, OH), SEA (Seattle, WA), and DCA (Washington, D.C.).

Note: The v-show directive will still render every paragraph to the DOM even if the condition is not met. If the condition is not met, the paragraph will just be hidden.

The v-if, v-else, v-else-if Directives

The v-if, v-else, v-else-if directives are some of the most useful and common directives, in addition to v-for. These directives will render the element if a condition is met. These are similar to v-show and when checked with v-if, the element will not even render to the page. This the preferred way to conditionally render something to your view. Plus, you can use v-else and v-else-if in conjunction with it.

If you use the airport example from above, we have more information based on the airport’s country.

index.html

<div id="app">
  <div class="airport" v-for="airport in airports">
    <p>{{ airport.code }}<p>
    <p>
      Airport <strong>{{ airport.code }}</strong>
      <span v-if="airport.country === 'USA'">is in the United States.</span>
      <span v-else-if="airport.country === 'Canada'">is in Canada.</span>
      <span v-else>is in France.</span>
    </p>
  </div>
</div>

The v-on Directive

This directive declares a method to run on a specific event such as click, keyup, or submit, to name a few. The event and the directive are separated by a colon (:). The directive can accept a function or a string that is mapped to the function name in the methods property.

index.html

<div id="app">
  <button v-on:click="showAlert">Show Alert</button>
</div>

app.js

var vm = new Vue({
  el: '#app',
  methods: {
    showAlert() {
      alert('This was triggered by using the v-on directive!');
    },
  },
});

<div id="app">
  <button @click="showAlert">Show Alert</button>
</div>

The v-bind Directive

The v-bind directive is used when you need to “bind” or connect your view to some data in your Vue instance or component. You may be trying to add an alt tag to an img with a description from your instance’s data. If so, you need to bind that attribute to the data.

There will be many times when you’ll need to bind an attribute to data. As stated above, one of these examples might be giving an img an alt attribute or even a src.

To bind that attribute to data, use the v-bind: directive.

index.html

<div id="app">
  <img v-bind:src="imageSrc" v-bind:alt="altText">
</div>

app.js

var vm = new Vue({
  el: '#app',
  data: {
    imageSrc: 'path/to/image.jpg',
    altText: 'The Cincinnati Skyline as seen from Newport, Kentucky.',
  },
});

Vue.js comes pre-shipped with a shorthand syntax for v-bind: the colon (:). Every example in this book moving forward will be using the shorthand syntax.

<div id="app">
  <img :src="imageSrc" :alt="altText">
</div>