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:
JS:
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:
Index.js file:
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:
Index.js file:
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.
