Intro to Vue.js

Illustration made by Natalia Wit (Yes, that is me!)

Two weeks ago I covered the topic of how to get started with your first Vue.js App. This week I decided to write about the core concepts in Vue while building a mini-app.

Interpolations and data-binding:

One way of data binding is text interpolation where you can use the double curly braces aka “Mustache” syntax such as:

<p>Name: {{ name }}</p>

Once you run your Vue app the namewill be replaced with the value of what name is. You can also run a one-time interpolation that does not update on data change by using v-once directive but it's important to keep in mind that this will affect any other bindings on the same node.

<p v-once>This name will never change: {{ name }}</p>

Attributes

Mustaches are not to be used inside HTML attributes. Instead, use a v-bind directive

<div v-bind:id="theDynamicId"></div>

Arguments

Some directives take arguments which follow by a colon after the directive name. We can use the v-bind directive to reactively update the HTML attribute

<a v-bind:href="url"> ... </a>

In the above example:

→ The href is the argument that tells v-bind to bind the elements href attribute to the value of url

Another example we can look at is v-on which listen to the DOM events

<p v-on:click="doSomething"> ... </p>

Modifiers

Modifiers are used to indicate that the directive should be run in a special way. Given the example below:

<form v-on:submit.prevent="handleSubmit"> ... </form>

The .prevent is basically calling event.preventDefault() on the event.