I love Vue.js and enjoy using it for all my current projects. And I’ll give you an overview of almost all basic Vue.js concepts. All this information is based on the official documentation, and I extend it with some more detailed knowledge.

Furthermore, I update this article in the future if new things come out or change. So it’s worth to check this article from time to time.

---

Table of Content

• Interpolations
  • Basic Interpolation
  • Interpolation with Expression
• Directives
  • Regular Attribute Binding
  • Class Bindings
  • Inline Style Bindings
  • Two-Way Data Binding
  • Rendering HTML
  • Conditional Rendering
  • Conditional Display
  • List Rendering

---

Interpolations

Vue.js is a system that enables us to render data to the DOM using straightforward template syntax declaratively, which is possible by using Vue’s double-mustache syntax.

Basic Interpolation

The data and the DOM are linked, and everything is reactive. Open your browser’s JavaScript console and set app.name to a different value. You should see the rendered example update immediately.

<div id="app">
  My name is: {{ name }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    name: 'Mario'
  }
})

Note that you no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element, #app in this case, then fully controls it. The HTML is the entry point, but everything else happens within the created Vue instance.

Interpolation with Expression

Interpolations can contain simple expressions in Vue, like this:

<div>{{ bugs + 99 }} little bugs in the code</div>

Manipulate your local data with methods, where you can change an array to a comma-separated string for example.

<div>On my shopping list is: {{ list.join(", ") }}</div>

You can also use a ternary operator to have a conditional rendering.

<div>You {{ score > 50 ? 'passed' : 'failed' }} the test</div>

#vue #javascript #developer