Vue is known as the easy framework to get started with. That reputation is deserved—but behind that “easy” experience are some useful ideas worth understanding before you start copying examples from the internet.
What Vue is, without the fluff
Vue is a JavaScript framework for building interfaces. Instead of manually manipulating the DOM (document.querySelector here, innerHTML there), you describe what the screen should look like for each data state and let Vue handle the connection.
The idea that holds everything together is simple: the UI is a function of state. When the state changes, the screen follows. You stop thinking, “Now I need to update that <span>,” and start thinking, “When this data changes, what should the screen show?” It involves fewer step-by-step instructions and more declaration.
Reactivity: the heart of Vue
Reactivity is the mechanism that makes the screen respond automatically when data changes. You declare a reactive value, use it in the template, and when it changes, Vue re-renders only what depended on it.
js import { ref } from 'vue'
const contador = ref(0) function incrementar() { contador.value++ }
In the template, contador becomes text directly. In JavaScript, you access and assign it through .value—that .value is the gotcha every beginner forgets. For objects, there is reactive, which eliminates .value but only works with objects and arrays.
A practical rule to avoid getting stuck: use ref for individual values (number, string, boolean), and reactive when you want an object to hold state. When in doubt, ref solves almost everything.
Template syntax: HTML with superpowers
Vue’s template is real HTML with a few additions. No JSX is required, and you do not have to relearn how to write markup.
html <button @click="incrementar"> Cliquei {{ contador }} vezes </button>
Já clicou!
The essentials fit into five things: {{ }} interpolates a value, : (the shorthand for v-bind) binds an attribute to data, @ (the shorthand for v-on) listens for an event, v-if shows or hides content, and v-for repeats it. With these, you can already build 90% of a screen. The rest is detail you learn when you need it.
Composition API vs. Options API
These are two ways to write the same component. The Options API organizes everything by category: a data block, a methods block, and a computed block. It is easy to learn and works well for small components.
js export default { data() { return { contador: 0 } }, methods: { incrementar() { this.contador++ } } }
The Composition API (the <script setup> syntax you see in modern examples) organizes code by logic rather than by type. Related state, functions, and computed values stay together, and you can extract pieces into reusable composables.
js
<script setup> import { ref } from 'vue' const contador = ref(0) function incrementar() { contador.value++ } </script>Neither approach is wrong. The Options API is a gentler starting point; the Composition API scales better as a component grows and you want to reuse logic. New documentation and the community tend to favor Composition API—if you are starting today, learn it first, but do not panic when you encounter Options API in older code.
Single-File Components: everything in one file
Vue’s signature format is the .vue file, the Single-File Component. The template, logic, and styles for the same component live in one place:
html <template> <button @click="incrementar">{{ contador }}</button> </template>
<script setup> import { ref } from 'vue' const contador = ref(0) function incrementar() { contador.value++ } </script> <style scoped> button { padding: 8px 16px; } </style>The detail that makes life easier is scoped in the <style> block: the CSS there is limited to that component and does not leak into the rest of the application. You no longer have to worry that renaming a class will break a screen on the other side of the project.
When Vue is a great choice
Vue shines in three situations. First: you are getting started and want a framework that will not overwhelm you on day one—the learning curve is genuinely gentle. Second: incremental adoption—you can add Vue to one part of a legacy page without rewriting the entire world, something not every framework lets you do so naturally. Third: you want a cohesive, officially supported ecosystem—the router (Vue Router) and state management solution (Pinia) are maintained by the same team, so you do not end up with the usual puzzle of choosing among ten competing libraries.
It is not a silver bullet. A large team already committed to another stack, or a very specific need addressed by an ecosystem that exists only in another framework, are legitimate reasons to look elsewhere. But for getting started, learning reactive UI concepts, and delivering something real quickly, it is hard to go wrong with Vue.
If you understand that the UI is a function of state, that reactivity is Vue observing your data, and that a .vue file brings everything together—then you already have the mental model. The rest is writing components until it becomes automatic. Open a .vue file and click the button.