19
loading...
Vue Basics - Simplifying Vue Docs
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.
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.
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.
Vue handles user input by using the v-on or the v-model directives to attach event listeners that invoke methods on instances.
Directives are special HTML attributes that allow the manipulation of the DOM.
Components are small building blocks that make up an application.
They are useful because they can be reused by inserting data(props) into them.
19