Project Initialization

Begin by scaffolding a new application using the Vue CLI toolchain.

# Initialize project (select options as required for your environment)
npm create vue@latest
# Navigate to project directory
cd <project-name>
# Install dependencies
npm install
# Start the development server
npm run dev

Ensure you are running in an IDE with terminal access, such as VS Code, before proceeding with modifications.

Component Architecture

Clean Up Root Component

Clear the default content generated in src/App.vue to establish a fresh base for learning.

Create a Child View

Inside the src/views/ directory, create a new component named HomeView.vue. Use the following template structure initially:

<template>
    <div>
        Initializing...
    </div>
</template>
<script setup>

</script>

<style scoped>

</style>

Register this component within the root App.vue to verify rendering:

<script setup>
import HomeView from './views/HomeView.vue'
</script>

<template>
  <HomeView />
</template>

<style scoped>

</style>

Upon saving and refreshing the browser, the content inside HomeView.vue should be visible.

Reactive Data Binding

To implement logic and reactivity, we utilize the Options API pattern via defineComponent.

Lifecycle Hooks and State Management

Update HomeView.vue with the following script section. This demonstrates initialization logging and state definition.

<script >
    import { defineComponent } from "vue";
    export default defineComponent({
        // Lifecycle hook executed after mount
        mounted() {
            console.log("HomeView module initialized successfully.");
        },
        // Reactive state data
        data(){
            return {
                displayText: "System Ready"
            }
        },
        // Available methods
        methods:{

        }
    })
</script>

Refresh the application. Open the browser's developer tools console (F12) to confirm the log message appears.

Template Syntax and Directives

Text Interpolation

Interpolate reactive data directly into the DOM using double curly braces.

<template>
    <div>
        Status: {{ displayText }}
    </div>
</template>

<script>
export default defineComponent({
    data() {
        return {
            displayText: "System Ready"
        }
    }
})
</script>

Changing the value of displayText programmatically will immediately update the rendered text.

Event Handling (v-on)

Use directives to bind event listeners. Below is a method to toggle the status variable on a button click.

<template>
    <div>
        <p>Status: {{ displayText }}</p>
        <button v-on:click="toggleStatus">Click Action</button>
    </div>
</template>

<script>
export default defineComponent({
    data() {
        return {
            displayText: "Pending"
        }
    },
    methods: {
        toggleStatus() {
            this.displayText = "Processing Complete";
        }
    }
})
</script>

Conditional Rendering (v-if)

Dynamically show or hide elements based on boolean conditions.

<div v-if="category === 'Alpha'">
  Content A
</div>
<div v-else-if="category === 'Beta'">
  Content B
</div>
<div v-else>
  Other Content
</div>

Ensure category is defined within the data object.

Visibility Toggles (v-show)

Similar to v-if, but controls CSS visibility (display: none) rather than removing the element from the DOM. It is suitable when toggling frequently.

<div v-show="isVisible">Visible Element</div>

Attribute Binding (v-bind)

Bind dynamic atttributes to HTML tags.

<div :id="elementIdFromScript">Dynamic ID Example</div>

Form Binding (v-model)

Establish two-way data binding for form inputs like <input> or <textarea>.

<input type="text" v-model="userInputValue" placeholder="Type here..." />

List Rendering (v-for)

Iterate over arrays to render lists of items dynamicallly.

<ul>
  <li v-for="(item, index) in recordList" :key="index">
     {{ index + 1 }}. {{ item.name }}
  </li>
</ul>

Define recordList in your data() function as an array of objects.