Vue.js Tutorial
Data Binding
- vue.js-data-binding
- form-input-bindings
Transition & Animation

Vue.js Declarative Rendering

In Vue.js, there is a system in the core that enables us to declaratively render data to the DOM using simple, straightforward template syntax.

Syntax:

HTML:

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

    

JS:

     var app = new Vue({
  el: '#app',
  data: {
    message: 'This is a simple Vue.js Declarative Rendering example!'
  }
})

    

As we know that Vue.js facilitates us to extend HTML with HTML attributes called directives that are used to offer functionality to HTML applications.

There are two types of directives in Vue.js: built-in directives and user-defined directives. Vue.js uses double braces {{ }} as place-holders for data, and the Vue.js directives are HTML attributes that use a v- prefix.

Let's see a simple Declarative Rendering example that uses text interpolation.

Example 1:

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>        
        <div id="app">
            {{ message }}
        </div>        
        <script src="index.js"></script>
    </body>
</html>

    

Index.js file:

     var app = new Vue({ 
    el: '#app',
    data: {
          message: 'This is a simple Vue.js Declarative Rendering example!'
    }
});

    

Output:

This is a simple Vue.js Declarative Rendering example!

The above example is similar to rendering a string template, as we have already done in the very first Vue.js example. Now, the data and the DOM are linked, and everything is now reactive. You can check it on your browser's JavaScript console. Set app.message to a different value, and you will see the rendered example above update accordingly.

Now, we no longer have to interact with the HTML directly. A Vue app attaches itself to a single DOM element and fully controls it. In the above example case, it is #app. Now, HTML is only the entry point, and everything else happens within the newly created Vue instance.

Let's see an example where we deploy the binding of element attributes.

Example 2:

Index.html file:

     <html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    </head>
    <body>       
        <div id="app-2">
  <span v-bind:title="message">
    Hover mouse over me for a few seconds
    and see a dynamically bound title which I have set!
  </span>
</div>        
<script src="index.js"></script>
    </body>
</html>

    

Index.js file:

     var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

    

Output:

Hover mouse over me for a few seconds and see a dynamically bound title which I have set!

In the above example, a new v-bind attribute you are seeing is called a directive. Directives are used with a prefix v- to indicate that they are unique attributes provided by Vue, and they are used to apply a special reactive behavior to the rendered DOM.

Next TopicVue.js Conditions & Loops

← prev next →