Vue.js Introduction and Basics

Vue is is a progressive framework for building user interfaces. Compared to most inflexible frameworks, Vue was built to be incrementally adoptable. At its core Vue is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. That is not all, Vue is capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

Getting Started

You can install Vue by including the Vue script as an external JavaScript file like shown below

<!-- development version, includes helpful console warnings -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Alternatively, as contained in the installation page of Vue, is to use the vue-cli but this is not recommended for beginners, especially if you are not yet familiar with Node.js-based build tools.

Declarative Rendering

At the core of Vue.js is a system that enables us to declaratively render data to the DOM using straightforward template syntax:

HTML

<div id="app">
  {{ message }}
</div>

JS

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Mumbai!'
  }
})

This code yields : Hello Mumbai

In the example we wrote above, Vue has done a lot of work under the hood. The result is that the data and the DOM are now linked and we get a reactive implementation. How do we know? When we open our browser's JavaScript console and set app.message to a different value. we should see the rendered example above update accordingly.

In addition to text interpolation, we can also bind element attributes like so:

HTML

<div id="app-2">
  >span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

JS

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

In the example above we are encountering something new. The v-bind attribute written in the code above is called a directive. To show that directives are special attributes provided by vue, they are prefixed with a V- and these directives apply special reactive behavior to the rendered DOM. In the code example above we are saying "keep this element's title attribute up-to-date with the message property on the Vue instance."

Conditionals and Loops

Vue provides us with directive to handle conditional statements and loops. Hence it is easy to toggle the presence of an element as shown in the code snippets below:

HTML

<div id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

JS

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

This prints to our browser the following message 'Now you see me'

If we enter app3.seen = false in the console. The message will disappear.

Handling User Input

We can use the v-on directive to attach event listeners that invoke methods on our Vue instances, to enable uses interact with our app.

HTML

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JS

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

In the example shown above Vue handles all the DOM manipulation for us while we focus on logic.

Vue provides us with a v-model directive which make two-way data binding between app and form input easy.

HTML

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

JS

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

Composing with Components

Components provides an abstraction that enable us build large scale applications composed of small, self-contained and in most cases reusable components. To compose a component in another components template we need to create an instance of it in the template like so:

<ol>
  <!-- Create an instance of the parent component -->
  <parent-component></parent-component>
</ol>

However, we always will want to be able to pass data from the parent scope to the child component. To achieve this our parent-component should accept a prop:

Vue.component('task-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})

Now we can pass the task into each repeated component using v-bind:

<div id="app-7">
  <ol>
    <task-item
      v-for="item in groceryList"
      v-bind:task="item"
      v-bind:key="item.id"
    ></task-item>
  </ol>
</div>

Vue.component('task-item', {
  props: ['task'],
  template: '<li>{{ task.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})

Relation to Custom Elements

Custom element and Vue components are similar, this is because Vue's component syntax is modelled after web Component Spec Which Custom Element is part of. For instance, Vue components implements the is special attribute and the Slot API. But they do have key differences which are:

• Though Web Component Spec has been finalized, not every browser implements it natively, whereas Vue components do not require polyfills as it works consistently with all supported browsers (including IE9 and above).
• Vue components provide certain important features which plain custom elements do not offer, most especially cross-component data flow. build tool integration and custom event communication.

Previous: Installation Guide for Vue.js.
Next: Vue.js Instance: Data, Methods, and Lifecycle Hooks.