❮ Vue Component Home ❯

Vue.js Template Syntax

Vue.js uses an HTML-based template syntax that allows developers to declaratively bind the DOM to the underlying Vue instance's data.

The core of Vue.js is a system that enables you to declaratively render data into the DOM using straightforward template syntax.

Combined with the reactive system, Vue can intelligently calculate the minimal cost of re-rendering components and apply it to DOM operations when the application state changes.

Interpolation

Text

The most common form of data binding is using the {{...}} (double curly braces) for text interpolation:

Text Interpolation

<div id="app">
  <p>{{ message }}</p>
</div>

Html

The v-html directive is used to output HTML code:

v-html Directive

<div id="app">
    <div v-html="message"></div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>tutorialpro.org</h1>'
  }
})
</script>

Attributes

The values in HTML attributes should use the v-bind directive.

The following example checks the value of use, and if it is true, it applies the class1 style; otherwise, it does not use the class:

v-bind Directive

<div id="app">
  <label for="r1">Modify Color</label><input type="checkbox" v-model="use" id="r1">
  <br><br>
  <div v-bind:class="{'class1': use}">
    v-bind:class Directive
  </div>
</div>

<script>
new Vue({
    el: '#app',
  data:{
      use: false
  }
});
</script>

Expressions

Vue.js provides full JavaScript expression support.

JavaScript Expressions

<div id="app">
    {{5+5}}<br>
    {{ ok ? 'YES' : 'NO' }}<br>
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id">tutorialpro.org</div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    ok: true,
    message: 'tutorialpro',
    id : 1
  }
})
</script>

Directives

Directives are special attributes with the v- prefix.

Directives are used to apply certain behaviors to the DOM when the value of the expression changes. Here is an example:

Example

<div id="app">
    <p v-if="seen">Now you see me</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
})
</script>

Here, the v-if directive will insert or remove the <p> element based on the value of seen (true or false).

Arguments

Arguments are specified after the directive with a colon. For example, the v-bind directive is used to reactively update HTML attributes:

Example

<div id="app">
    <pre><a v-bind:href="url">tutorialpro.org</a></pre>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'http://www.tutorialpro.org'
  }
})
</script>

In this case, href is the argument, instructing the v-bind directive to bind the element's href attribute to the value of the url expression.

Another example is the v-on directive, which is used to listen for DOM events:

<a v-on:click="doSomething">

Here, the argument is the name of the event to listen for.

Modifiers

Modifiers are specified with a dot . and indicate that a directive should be bound in a special way. For example, the .prevent modifier tells the v-on directive to call event.preventDefault() on the triggered event:

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

User Input

In input fields, we can use the v-model directive to achieve two-way data binding:

Two-way Data Binding

<div id="app">
    <input v-model="message">
    <p>The message is: {{ message }}</p>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: ''
  }
})
</script>

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'tutorialpro!'
  }
})
</script>

The v-model directive is used to create two-way data binding on form input, textarea, and select elements. It automatically updates the bound element's value based on the form value.

Events for buttons can be listened to using v-on, which responds to user input.

The following example reverses the string when the user clicks the button:

String Reversal

<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse String</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'tutorialpro!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})
</script>

Filters

Vue.js allows you to define filters that can be used for common text formatting. They are indicated by a "pipe" symbol and are used as follows:

<!-- In double curly braces -->
{{ message | capitalize }}

<!-- In v-bind directive -->
<div v-bind:id="rawId | formatId"></div>

The filter function receives the value of the expression as the first argument.

The following example capitalizes the first letter of the input string:

Example

<div id="app">
  {{ message | capitalize }}
</div>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'tutorialpro'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>

Filters can be chained:

{{ message | filterA | filterB }}

Filters are JavaScript functions and can accept parameters:

{{ message | filterA('arg1', arg2) }}

Here, message is the first argument, the string 'arg1' is passed to the filter as the second argument, and the value of arg2 is evaluated and passed to the filter as the third argument.

Abbreviations

v-bind Abbreviation

Vue.js provides special abbreviations for the two most commonly used directives:

<!-- Full syntax -->
<a v-bind:href="url"></a>
<!-- Abbreviation -->
<a :href="url"></a>

v-on Abbreviation

<!-- Full syntax -->
<a v-on:click="doSomething"></a>
<!-- Abbreviation -->
<a @click="doSomething"></a>

❮ Vue Component Home ❯