If you don’t know Vue, read the Vue.js introduction first. The short answer is that it’s a framework to build your page by data/information rather than markup. It allows you to wire data together so that when one thing changes, another part will automatically change.

We can use an paging element as an example:

In this example, the data consists of how many total items there are and how many items to display per page. As you adjust these values using the inputs, other elements on the page automatically adjust as appropriate. For example, if you change The per-page value to 82, the total number of pages instantaneously changes to 11, and the items showing on the page changes to 1 through 82. Hit the next button, and you now see 83 through 164. Now changes per-page to 14 and you have 15 through 28 on your page two.

All of these things are wired together in the “reactivity system” of Vue, so that you don’t need to rewrite the entire html of the page just because a single value changes. Similarly, you needn’t do a ton of jQuery trying to write blocks for every edge case based on the various conditions of multiple elements.

The standard system of rendering full static html pages on every button click is pretty clunky. Imagine if changing the number on your house thermostat printed a full set of directions, which you then needed to bring down to the furnace and feed in. Instead, changing a value here changes what happens there — because the things are wired together in just the right way. Similarly, in a Vue app (or any reactive framework like React, Angular, Ember, etc), the data is wired together in just the right way so that any changes the user makes happen in the most efficient way, and without bothering about the rest of the page.