Declarative Rendering in Vue (Simplified)

Vue lets you connect your data (state) to your HTML easily. Instead of manually updating the page, you simply write your HTML to "reflect" your data. When your data changes, Vue automatically updates the HTML.

1. Creating Reactive Data

You can create reactive data using reactive() (for objects) or ref() (for simple values like strings or numbers).

• reactive() (for objects):

    import { reactive } from 'vue'
  
    const counter = reactive({
      count: 0
    })
    counter.count++  // Update the count
  

• ref() (for basic values):

    import { ref } from 'vue'
  
    const message = ref('Hello!')
    message.value = 'Goodbye!'  // Update the message
  

2. Using Data in Templates

Once your data is reactive, you can use it directly in your HTML template. Vue will automatically update the content when the data changes.

<template>
  <h1>{{ message }}</h1>  <!-- Shows the message -->
  <p>Count is: {{ counter.count }}</p>  <!-- Shows the count -->
</template>

3. Vue Makes it Easy

You don’t need to use .value in the template. Vue automatically handles it for you.

<h1>{{ message }}</h1>  <!-- No need for .value -->

4. Manipulating Data in Templates

You can even perform actions like reversing a string right in the template:

<h1>{{ message.split('').reverse().join('') }}</h1>  <!-- Reverses the message -->

5. Reactivity Made Simple

Vue automatically tracks changes to your data and updates the UI when needed. You don’t need to worry about manually updating the page—Vue does it for you!

In short, Vue's declarative rendering lets you easily bind data to your template, and it updates the page whenever the data changes. Simple and efficient!