Lesson 2 — Reactivity

Change data, the page follows

Reactivity means Vue redraws the parts of the page that use a value whenever that value changes. @click (short for v-on:click) runs code when the element is clicked. Inside the template you can write n++ directly; in the script you must use n.value, because a ref keeps its value in .value.

<button @click="likes++">♥ {{ likes }}</button>
<!-- in script: likes.value++ -->

Why it matters: you change data, not the page — Vue does the page part for you.