v-once for static content in Vue - Mini Project: Build & Apply

Using <code>v-once</code> for Static Content in Vue

📖 Scenario: You are building a simple Vue component for a website's About section. This section contains some static text that does not change after the page loads.

🎯 Goal: Create a Vue component that displays a static heading and paragraph using the v-once directive to optimize rendering by telling Vue to render the static content only once.

📋 What You'll Learn

Create a Vue component with a template containing a heading and a paragraph.

Use the v-once directive on the static content container.

Add a reactive data property for a dynamic message below the static content.

Display the dynamic message without v-once so it updates reactively.

💡 Why This Matters

🌍 Real World

Websites often have static sections like headers, footers, or informational text that do not change. Using <code>v-once</code> helps Vue render these parts only once, improving page speed.

💼 Career

Understanding how to optimize Vue components with directives like <code>v-once</code> is valuable for frontend developers to build fast, efficient user interfaces.

1

Create the Vue component template with static content

Create a Vue component with a <template> containing a <div> that has a <h1> with text About Us and a <p> with text We provide quality services.

Vue

  
    
  



// Your code here

Hint

Start by writing the template with a div containing the heading and paragraph exactly as shown.

2

Add the v-once directive to the static content container

Add the v-once directive to the <div> that wraps the static heading and paragraph in the <template>.

Vue

  
    About Us
    We provide quality services.
  



// Your code here

Hint

Use v-once on the div to tell Vue to render this content only once.

3

Add a reactive data property for a dynamic message

In the <script setup> section, import ref from 'vue' and create a reactive variable called dynamicMessage with the initial value 'Welcome to our site!'.

Vue

  
    About Us
    We provide quality services.
  



// Create reactive variable dynamicMessage here

Hint

Use ref to create a reactive variable for the dynamic message.

4

Display the dynamic message reactively below the static content

In the <template>, add a <p> below the v-once <div> that displays the dynamicMessage using mustache syntax {{ dynamicMessage }}.

Vue

  
    About Us
    We provide quality services.
  
  



import { ref } from 'vue'
const dynamicMessage = ref('Welcome to our site!')

Hint

Use mustache syntax to display the reactive dynamicMessage below the static content.