Template Syntax

Vue uses an HTML-based template syntax which binds the instance's(component's) data to the DOM.

What Are Interpolations?

What does Interpolation even mean?

According to the Oxford dictionary interpolation is the insertion of something of a different nature into something else. So, I would assume that we are inserting something into the HTML using Vue.

Interpolation Using Text

Vue uses the "Mustache" syntax (double curly braces) to bind and interpolate data in the HTML. We are using the word binding here because it is bound with the value you assigned in the data property of the component.

<span>Message: {{ msg }} </span>
Message: hi

const RenderHtmlApp = {
  data() {
    return {
      msg: 'hi'
    }
  }
}

Once again, 'msg' in the example above would be 'interpolated' into the HTML with whatever value you gave it in the data section(property) of the corresponding Vue component.

Interpolation Using Raw HTML

You can also interpolate raw HTML instead of just text like the example above. But, you have to use the v-html directive!

<p>Using v-html directive: <span v-html="msg"></span>
</p>
Using v-html directive: Hello.

const RenderHtmlApp = {
  data() {
    return {
      msg: '<span>Hello.</span>'
    }
  }
}

Interpolation Using JS Expressions

You can use the following JS expressions to output data in the HTML as well using Vue.

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }} // ternary expression

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

But, you can only use one expression at a time. So, the following won't work.

//this is a statement, not an expression:
{{ var a = 1 }}
//What is an expression? something that produces a value
//What is a statement? something that generates some behavior. var a = 1 is a statement. The 1 is an expression because it is a value.

//flow control wont work either, use ternary expressions
{{ if (ok) { return message } }}

A ternary expression is when you use "?" and ":" for if statements which you can see in the example above.

What Are Directives?

What does directive mean?

According to the Oxford dictionary, a directive is an official authoritative instruction. So, I'm gonna assume that Vue uses directives to command or instruct the HTML to do something.

Vue uses the prefix v- as attributes in HTML to use directives. If you see v- in some HTML then you can assume that Vue is instructing that HTML tag to do something.

A directive's job is to reactively apply effects to the DOM when the value of its expression changes. Reactively here means that it is updated automatically.

What Are Shorthands?

Shorthands or Shortcuts:

v-bind:href="url" // shortcut for v-bind: is :
:href="url"

v-on:click="doSomething" // shortcut for v-on: is @
@click="doSomething"