What are templates and directives in Vue.js?

Templates and directives are how Vue connects your data object to the HTML: {{ }} drops data into text, and v- attributes wire data into the element's behavior.

In Vue you don't reach into the DOM by hand. Instead you describe, right in the HTML, how each element should depend on your data — and Vue keeps the page in sync whenever that data changes. There are two halves to that description.

Templates use double curly braces, {{ }}, to interpolate (insert) a value into the page text. If your data has message: "Hello", then:

<p>{{ message }}</p>

renders <p>Hello</p>, and re-renders automatically the moment message changes.

Directives are special HTML attributes prefixed with v-. Where {{ }} only injects text, directives attach reactive behavior to an element. The handful you'll use constantly:

• v-model — two-way binding for form inputs. <input v-model="name"> keeps the name data property and the textbox in lockstep: type in the box and name updates; change name in code and the box updates.
• v-if / v-else-if / v-else — conditional rendering, just like JavaScript if/else. <p v-if="loggedIn">Welcome</p> adds the element to the DOM only when loggedIn is true (and removes it entirely otherwise — it's not merely hidden).
• v-bind — bind an HTML attribute to an expression. <button v-bind:disabled="cart.length === 0"> toggles the real disabled attribute as the cart fills or empties. Shorthand: :disabled.
• v-for — render a list by looping an array. <li v-for="item in items">{{ item }}</li> produces one <li> per element of items.
• v-on — attach an event handler. <button v-on:click="counter++"> runs the expression on click. Shorthand: @click.

Memory tip: {{ }} writes into text; v-… does something to the element — bind it, loop it, show/hide it, or listen on it.

Go deeper:

• Template Syntax (Vue docs) — the full reference for {{ }} interpolation, directives, arguments, and modifiers.