The progressive framework. Vue's template syntax and reactivity let you bind data to the DOM declaratively — change the data, and the page updates itself.
v-model ties an input to a piece of state in both directions. Type below — the greeting updates instantly, and so would the input if the state changed elsewhere. This whole page is a live Vue 3 app.
Hello, {{ name || 'stranger' }}! 👋
<!-- template --> <input v-model="name"> <p>Hello, {{ name || 'stranger' }}!</p> // setup const name = ref('');
A computed property derives a value from other state and re-calculates only when its dependencies change. Adjust the quantities — the total recomputes automatically.
const total = computed(() => cart.value .reduce((sum, i) => sum + i.qty * i.price, 0) .toFixed(2) );
v-for loops over an array to render an element per item. Add and remove fruits — Vue keeps the DOM list in sync with the data.
<li v-for="(f, i) in fruits" :key="f"> {{ f }} <button @click="fruits.splice(i, 1)">×</button> </li>
v-if adds or removes elements from the DOM based on state. Toggle the panel — it is genuinely created and destroyed, not just hidden.
v-if fully removes the element from the DOM when false,
while v-show just toggles display. Use v-if when the
condition rarely changes, v-show when it toggles often.
<button @click="open = !open">Toggle</button> <div v-if="open">…details…</div>
vue.global.js). Every demo above runs inside one genuine Vue app using ref, reactive, computed and the v-model / v-for / v-if directives. The shared CSS shell provides page styling.