Templates & Data & Reactivity:

Estimated reading: 1 minute 137 views

Templates & Data & Reactivity

Using Vue's templating syntax to define the structure and content of components. For instance, using double curly braces {{ }} for data bindings to display dynamic content in the template.

				
					<script setup>
// javascript
import { ref } from 'vue';
const counter = ref(0);
const increment =  ()=>{
    console.log(counter)
    counter.value++
}
</script>
<template>
    <!-- html -->
    <div>
    <button @click="increment()" style="background-color: black; padding: 50px; color: white;">click me </button>
     <div class="couter"> <h1>{{counter}}</h1></div>
     
    </div>

</template>
<style>
/* CSS */
.counter{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color :white
}
</style>