Declarative is making a statement or assertion.

In Vue, there is something we called Declarative Rendering, which actually is the action we take to rendering data into the DOM declaratively.

Without Vue

Let's say we have .html file that contain h1, and we want to display our name inside this template. So what we should do is something like this...

index.html

<h1></h1>

app.js

const h1 = document.querySelector('h1')

h1.innerText = 'irlan navila'

If Using Vue

But in Vue slightly different, we write code on Single File Components which uses .vue extension. First, we create some html template and script like this...

app.vue

<h1> {{ name }} </h1>

export default {
  data() {
    return {
      name: 'irlan navila'
    }
  }
}

Vue use double curly braces to put some data in the html.

You can assume that the {{ }} sign refer to <script> tag in the plain html.
Because of that we be able to use simple javascript operation inside it.
For example:

<span> {{ 2 + 3 }} </span>
<!-- This will display 5 as output -->

Is only the data that can be displayed?

Of course not just data, we can put some Computed Properties or even Methods to the html. Like this...

<span> {{ generateFullName() }} </span>

export default {
  data() {
    return {
      name: 'irlan navila'
    }
  },
  methods: {
    generateFullName() {
      return this.name + ' alarancia'
    }
  }
}

Conclusion

In the example above, we can understand that Declarative Rendering is a technique for display some data into html. But we realize that it only displays data in the form of a string or a number.

What if we want to display some array or even object? This is something i will covered in the next article.