Shorthand syntax (: and @) in Vue - Mini Project: Build & Apply

Using Shorthand Syntax (: and @) in Vue

📖 Scenario: You are building a simple Vue 3 component that shows a button and a message. When you click the button, the message changes. You want to use Vue's shorthand syntax for binding and event handling to keep your code clean and easy to read.

🎯 Goal: Create a Vue component that uses the shorthand : for binding the button's text and @ for handling the click event. The button text should come from a variable, and clicking the button should update a message displayed below it.

📋 What You'll Learn

Create a reactive variable called buttonText with the value 'Click me!'

Create a reactive variable called message with the value 'Hello!'

Use the shorthand : to bind buttonText to the button's textContent

Use the shorthand @ to listen for the button's click event and update message to 'Button clicked!'

💡 Why This Matters

🌍 Real World

Using shorthand syntax in Vue helps you write cleaner and shorter code for binding data and handling events, which is common in building interactive web apps.

💼 Career

Understanding Vue's shorthand syntax is essential for frontend developers working with Vue.js to build efficient and maintainable user interfaces.

1

Setup reactive variables

In the <script setup> block, import ref from 'vue' and create two reactive variables: buttonText with the value 'Click me!' and message with the value 'Hello!'.

Vue

// Import ref and create buttonText and message variables
// Your code here



  
  

Need a hint?

Use import { ref } from 'vue' and then const buttonText = ref('Click me!') and const message = ref('Hello!').

2

Bind button text using shorthand :

In the <template>, bind the button's text content to the buttonText variable using Vue's shorthand binding syntax : with the attribute :textContent.

Vue

import { ref } from 'vue'

const buttonText = ref('Click me!')
const message = ref('Hello!')



   
  

Need a hint?

Use :textContent="buttonText" on the <button> tag.

3

Add click event handler using shorthand @

In the <template>, add a click event handler to the button using Vue's shorthand event syntax @. The handler should update the message variable to 'Button clicked!' when the button is clicked.

Vue

import { ref } from 'vue'

const buttonText = ref('Click me!')
const message = ref('Hello!')



   
  

Need a hint?

Use @click="message = 'Button clicked!'" on the <button> tag.

4

Display the message below the button

In the <template>, display the message variable inside the <p> tag using mustache syntax {{ }}.

Vue

import { ref } from 'vue'

const buttonText = ref('Click me!')
const message = ref('Hello!')



  
  {{ message }} 

Need a hint?

Use {{ message }} inside the <p> tag to show the message.