Study

How to Declare Variables in Vue.js

December 18, 2024 by Niyander

In this article, I will walk you through the process of How to Declare Variables in Vue.js using a few quick and straightforward steps. Whether you are a beginner exploring Vue.js or looking for an easy way to understand its basics, this tutorial will help you get started and integrate Vue.js seamlessly into your project.

If you are using Vue.js via a CDN, declaring variables is straightforward. In Vue 3, variables are defined inside the data() function within the createApp() method. Vue supports various data types like strings, booleans, arrays, and objects. Here’s how to declare them:

Basic Example

Here is a simple Vue 3 example using a CDN:

<!DOCTYPE html>
<html>
<head>
  <title>Vue 3 Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <p>String: {{ message }}</p>
    <p>Boolean: {{ isVisible }}</p>
    <p>Array: {{ items }}</p>
    <p>Object: {{ user.name }} ({{ user.age }} years old)</p>
    <button @click="toggleVisibility">Toggle Visibility</button>
  </div>

  <script>
    const app = Vue.createApp({
      data() {
        return {
          // String
          message: "Hello Vue 3",
          
          // Boolean
          isVisible: true,
          
          // Array
          items: ["Apple", "Banana", "Orange"],
          
          // Object
          user: {
            name: "John Doe",
            age: 30
          }
        };
      },
      methods: {
        toggleVisibility() {
          this.isVisible = !this.isVisible;
        }
      }
    });

    app.mount("#app");
  </script>
</body>
</html>

Explanation of Variables

String: A text-based variable like message.
Boolean: A true or false value like isVisible.
Array: A list of items, declared as items.
Object: A key-value pair structure like user with properties name and age.

How It Works

String (message): Displayed using {{ message }}.
Boolean (isVisible): Can be toggled using a method like toggleVisibility.
Array (items): Displays the entire array content.
Object (user): Access properties using dot notation, e.g., user.name.
@click Event: Binds a click event to call the toggleVisibility method.

Output

String: Displays “Hello Vue 3“.
Boolean: Initially true, but can toggle between true and false when clicking the button.
Array: Displays ["Apple", "Banana", "Orange"].
Object: Displays “John Doe (30 years old)”.

Note: If you want to learn more about Vue.js click here

Summary

Vue.js makes it easy to declare and use variables of different types:

Strings for text values.
Booleans for conditions and toggles.
Arrays for lists of items.
Objects for structured data.
With Vue 3 and a CDN, you can quickly create dynamic and reactive user interfaces by declaring variables inside the data() function.

Read Also: How to Add Vue.js to an HTML Page

Conclusion

Using Vue.js with a CDN is a quick way to start building interactive applications. By understanding how to declare variables like strings, booleans, arrays, and objects, you can make your web pages reactive and dynamic. Vue 3’s simplicity and flexibility make it an excellent choice for both beginners and experienced developers looking to enhance their HTML-based projects.

Niyander Tech