Vue Basics - Simplifying Vue Docs

What is Vue?

Vue is a progressive framework for building user interfaces. Progressive means that it can be implemented incrementally instead of having to implement it from start to finish.

What is Declarative Rendering?

Understanding imperative rendering will make it easier to understand declarative rendering because declarative rendering was devised as an improvement to imperative rendering.

Imperative rendering is about how while declarative rendering is about what. This means that in imperative rendering you have to write down each step while in declarative rendering you just have to focus on what you want to do. An example of imperative vs declarative rendering achieving the same result is provided below. We can easily tell that declarative rendering requires less code.

Imperative

function createList(items) {
  let list = $("<section><h1>My List</h1></section>");
  let bullets = $("<ul></ul>");
  list.append(bullets);
  for (const item of items) {
    list.append(`<li>${item}</li>`);
  }
  return list;
}

Declarative

<h1>My List</h1>
<ul>
  <li v-for="item in list">{{item}}</li>
</ul>

Another way to look at the difference between imperative and declarative rendering is that in imperative rendering many different functions push down info to an element. Declarative rendering, on the other hand, pulls info down from state and props.

How does Vue render data declaratively?

Vue does this by using HTML-based template syntax. This HTML-based syntax is familiar to a lot of people who have experience in HTML/CSS and significantly reduces the learning curve for many people. Vue connects the DOM to the data and makes everything reactive. Reactive meaning that the data rendered on the HTML is updated automatically by Vue.