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:

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.

Attributes

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

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

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

Modifiers

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

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

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store