Dynamische Layouts mit Vue jsx: Ein Leitfaden für flexible und wartbare Benutzeroberflächen

Geschrieben von Dubem Izuorah

Haben Sie schon einmal Stunden damit verbracht, dasselbe Weblayout über mehrere Seiten hinweg zu optimieren, oder hatten Sie Schwierigkeiten, Ihre Benutzeroberfläche an sich ändernde Daten anzupassen, ohne dass es zu Störungen kommt? Diese häufigen Herausforderungen können Ihren Entwicklungsprozess verlangsamen und zu frustrierendem, fehleranfälligem Code führen.

Einführung dynamischer Layouts

Durch die Erstellung von Layouts zur Laufzeit auf der Grundlage von Daten können Sie flexible, wartbare und skalierbare Anwendungen erstellen, die sich mühelos an Änderungen anpassen. Dieser Ansatz, der Dynamische Layouts genannt wird, macht wiederholte HTML-Änderungen überflüssig und ermöglicht, dass Ihre Benutzeroberfläche nahtlos mit Ihren Daten synchronisiert bleibt.

In diesem Artikel untersuchen wir, wie dynamische Layouts Ihren Entwicklungsworkflow verändern und Ihre Projekte aufwerten können.

Warum dynamische Layouts verwenden?

Dynamische Layouts sind besonders nützlich, wenn sich Inhalte häufig ändern oder wenn reaktionsfähige Benutzeroberflächen angezeigt werden, die APIs oder andere Datenquellen nutzen oder auf Benutzerinteraktionen reagieren.

Vorteile dynamischer Layouts

• Flexibilität: Passen Sie UI-Komponenten einfach basierend auf den zugrunde liegenden Daten an, ohne HTML oder Vorlagencode zu ändern.
• Wartbarkeit: Halten Sie sich an das DRY-Prinzip (Don't Repeat Yourself), reduzieren Sie sich wiederholenden Code und vereinfachen Sie die Wartung.
• Skalierbarkeit: Verwalten Sie Ihre Benutzeroberfläche programmgesteuert und ermöglichen Sie so einfache Aktualisierungen, Hinzufügungen oder Entfernungen von Elementen.
• Fehlerreduzierung: Minimieren Sie manuelle HTML-Änderungen und verringern Sie so die Wahrscheinlichkeit von Fehlern.
• Verbesserte Reaktionsfähigkeit: UI-Elemente basierend auf Bedingungen dynamisch ein- oder ausblenden, wodurch die Schnittstelle besser auf Benutzerinteraktionen oder Datenänderungen reagiert.

Praktische Szenarien für dynamische Layouts

Dynamische Layouts glänzen in verschiedenen realen Szenarien, wie zum Beispiel:

• Formulare: Für formularintensive Apps ist es möglicherweise am besten, Ihre Formularfelder in eine berechnete Eigenschaft zusammen mit einer Validierungsbibliothek zu abstrahieren. Im Layout können Sie Ihre Eigenschaft durchlaufen, um Formularfelder und Eigenschaften wie Beschriftungen, Klassennamen, Validierungsmeldungen usw. bedingt anzuzeigen.
• Blog-Post-Listen: Verwalten und aktualisieren Sie den Inhalt jeder Postkarte dynamisch basierend auf ihren Daten.
• Inhaltsblöcke: Organisieren und zeigen Sie verschiedene Inhaltselemente effizient an.
• Benutzerlisten, Navigationselemente, Dashboard-Panels: Sorgen Sie für ein einheitliches Design und einfache Anpassungen ohne manuelle HTML-Updates.
• Website-Abschnitte: Generieren Sie dynamisch Abschnitte, um ein zusammenhängendes und leicht anpassbares Layout beizubehalten.

Durch die dynamische Generierung dieser Elemente stellen Sie Konsistenz sicher, vereinfachen Anpassungen und sorgen für eine saubere Codebasis.

Erstellen einer dynamischen Navigationsleiste

Lassen Sie uns praktische Erfahrungen mit dynamischen Layouts sammeln, indem wir eine dynamische Navigationsleiste erstellen. Als Referenz finden Sie hier das Github-Repo für dieses Tutorial.

Anforderungen

Stellen Sie sich vor, Sie entwickeln eine Zahlungsplattform und müssen eine saubere, erweiterbare Navigationsleistenkomponente erstellen, wie in den Screenshots unten gezeigt:

Navigationsleiste, wenn ein Benutzer angemeldet ist

Navigationsleiste ohne angemeldeten Benutzer

Einrichten der Umgebung

Um uns auf dynamische Layouts zu konzentrieren, gehen wir hier nicht näher auf die Details der Umgebungseinrichtung ein. Die vollständigen Codebeispiele finden Sie in unserem GitHub-Repository.

Verwendete Technologien:

1. Nuxt  –  Vue-Framework
2. Nuxt TailwindCSS  –  Styling
3. Phosphor-Icons Vue  –  Icon-Komponenten

Statischer Ansatz

Eine statische Navbar-Komponente umfasst zahlreiche HTML-Tags und -Eigenschaften, was das Lesen und Verwalten des Codes erschwert.

Das Aktualisieren eines solchen Layouts ist fehleranfällig, insbesondere wenn sich wiederholende Elemente dieselben Eigenschaften oder denselben Stil haben.

Während ein statischer Ansatz zum Entwerfen von Layouts nützlich ist, sind dynamische Layouts für die Wartbarkeit und Zusammenarbeit vorzuziehen.

Beispiel einer statischen Navigationsleiste:

? App.vue

<template>
  <nav class="w-screen border-b py-4">
    <div class="container mx-auto flex items-center gap-10">
      <!-- Logo -->
      <NuxtLink href="/" class="flex items-center">
        <img src="https://logo.clearbit.com/google.com" class="w-10 h-10 object-contain" />
      </NuxtLink>

<!-- Dashboard or Home Link -->
      <NuxtLink v-if="user" href="/dashboard" class="flex items-center">
        <PhGauge size="24" />
        <span class="ml-2">Dashboard</span>
      </NuxtLink>
      <NuxtLink v-else href="/home" class="flex items-center">
        <PhHouseSimple size="24" />
        <span class="ml-2">Home</span>
      </NuxtLink>
      <!-- Spacer -->
      <div class="ml-auto"></div>
      <!-- Add Funds Button (Visible only when user is authenticated) -->
      <button v-if="user" class="flex items-center">
        <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
      </button>
      <!-- User Avatar (Visible only when user is authenticated) -->
      <div v-if="user" class="flex items-center">
        <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />
        <span class="ml-2">Dubem Izuorah</span>
      </div>
      <!-- Auth Button -->
      <button class="flex items-center" @click="user = !user">
        <span>{{ user ? 'Logout' : 'Login' }}</span>
      </button>
    </div>
  </nav>
  <main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>
<script setup lang="jsx">
import { ref } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";
// Simulate user authentication status
const user = ref(true);
</script>

Während statische Layouts für einfache Schnittstellen ausreichen können, bieten dynamische Layouts eine überlegene Wartbarkeit und Skalierbarkeit.

Dynamic Approach

To create a dynamic navbar, we’ll want to define our layout data and generate UI components based on this data.

Defining the Data

Instead of hard-coding each menu item, we can create a list of menu items in our script with properties like title, image, to, icon, render, and class. This allows us to dynamically generate the navbar based on the data.

? App.vue

<script setup lang="jsx">
// Import necessary components
import { ref, computed } from "vue";
import { NuxtLink, Avatar } from "#components";
import { PhGauge, PhHouseSimple } from "@phosphor-icons/vue";

// Simulate user authentication status
const user = ref(true);
// Define menu items
const items = computed(() => [
  {
    key: "logo",
    image: "https://logo.clearbit.com/google.com",
    href: "/"
  },
  {
    icon: user.value ? PhGauge : PhHouseSimple,
    key: "dashboard",
    title: user.value ? "Dashboard" : "Home",
    to: user.value ? "/dashboard" : "/home",
  },
  {
    key: "spacer",
    class: "ml-auto",
  },
  {
    key: "add-funds",
    render: () => <span class="text-white bg-green-500 px-4 py-2 rounded-lg">Add Funds</span>
  },
  {
    key: "user",
    render: () => <Avatar src="https://randomuser.me/api/portraits/men/40.jpg" />,
    title: "Dubem Izuorah",
    hide: !user.value
  },
  {
    key: "auth",
    title: user.value ? "Logout" : "Login",
    onClick: () => user.value = !user.value
  },
]);
// Filter out hidden items
const menuItems = computed(() => items.value.filter(item => !item.hide));
</script>

Key Takeaways:

1. Reactive Layout : Use computed properties to update the layout based on reactive data like user.
2. Conditional Rendering : Apply different values using ternary operators based on state.
3. JSX Integration : Utilize JSX to include HTML elements and Vue components directly within property values.
4. Dynamic Properties : Use properties like hide to conditionally display items.
5. Event Handling : Store functions or event handlers (e.g., onClick) within data objects.
6. Modular Data Management : Move layout data to Vue composables or external JSON files for better organization.

Defining the Avatar Component

Create an Avatar component used within the dynamic navbar.

? Avatar.vue

<template>
  <div class="rounded-full w-10 h-10 bg-gray-100 overflow-hidden">
    <img class="w-full h-full object-cover" :src="src" />
  </div>
</template>

<script setup>
const props = defineProps({
  src: {
    type: String,
    required: true,
  },
})
</script>

This component creates a reusable avatar element that can display different images based on the ‘src’ prop passed to it. This makes it flexible and easy to use throughout your application for displaying user avatars or profile pictures.

Building the Layout

Use the defined data to render the navbar dynamically.

? App.vue

<template>
  <nav class="w-screen border-b py-4">
    <div class="container mx-auto flex items-center gap-10">
      <component
        v-for="item in menuItems"
        :key="item.key"
        :is="item.to ? NuxtLink : 'button'"
        v-bind="item"
        @click="item.onClick"
        class="flex items-center"
      >
        <img v-if="item.image" :src="item.image" class="w-10 h-10 object-contain" />
        <component v-if="item.render" :is="item.render" />
        <component v-if="item.icon" :is="item.icon" :size="24" />
        <span v-if="item.title" class="ml-2">{{ item.title }}</span>
      </component>
    </div>
  </nav>
  <main class="h-64 bg-gray-100 flex justify-center pt-10 text-xl">App Here</main>
</template>

<script setup lang="jsx">
// The script remains the same as above
</script>

Key Takeaways:

1. v-bind Usage : Attach multiple properties to elements simultaneously, keeping the template clean.
2. Unique Keys : Use the key attribute to prevent rendering issues during dynamic updates.
3. Dynamic Components : Utilize Vue’s dynamic components to render different elements based on data.
4. Event Binding : Attach events like @click dynamically based on data properties.
5. Component Modularity : Break down components further and import them as needed for better scalability.

By following this approach, you create a dynamic and flexible horizontal navbar that’s easy to extend or modify. This method not only saves time and effort but also ensures your codebase remains clean and maintainable.

Enhancing Flexibility with Vue JSX

Vue JSX allows developers to write Vue components using a syntax similar to React’s JSX, offering greater flexibility and expressiveness. Unlike Vue’s typical template-based approach, JSX allows you to embed HTML-like elements directly inside JavaScript logic. This is particularly useful in dynamic layouts where you need to generate or manipulate UI elements based on dynamic data.

Instead of separating logic and markup across different sections of the component (template and script), JSX enables you to manage both in one cohesive block of code.

In our solution, JSX helps simplify how we dynamically render components like the Avatar or conditional elements such as the “Add Funds” button.

For example, instead of hardcoding these elements into a template, we can dynamically generate them using a render function in JavaScript.

This allows us to update components like the navbar with real-time data, such as user authentication status, without duplicating code or scattering logic across the template and script sections.

By using JSX, we maintain cleaner, more maintainable code, while still leveraging Vue’s reactivity and flexibility.

Next Steps

Now that we understand dynamic layouts, it’s time to put your knowledge into practice. Here are some suggested next steps:

1. Bestehende Projekte umgestalten: Identifizieren und umgestalten Sie Teile Ihrer aktuellen Projekte, bei denen dynamische Layouts die Effizienz und Lesbarkeit verbessern können, insbesondere in Bereichen mit sich wiederholendem HTML oder Komponentenlogik.
2. Integration mit CMS: Experimentieren Sie mit der Integration eines CMS oder anderer Systeme in Ihre dynamischen Layouts, um noch dynamischere und reaktionsfähigere Benutzeroberflächen zu erstellen.
3. Arbeiten Sie mit Ihrem Team zusammen: Teilen Sie Ihre Erkenntnisse zu dynamischen Layouts mit Ihrem Team. Besprechen Sie, wie Sie gemeinsam dynamische Layouts in Ihren Projekten nutzen können, um die Produktivität zu steigern und eine Kultur der kontinuierlichen Verbesserung zu fördern.
4. Erweiterte Anwendungsfälle erkunden: Erkunden Sie weiterhin fortgeschrittenere Anwendungen dynamischer Layouts. Meisterschaft entsteht durch konsequentes Üben und Erforschen.

Mit diesen Schritten sind Sie auf dem besten Weg, sich mit dynamischen Layouts vertraut zu machen. Für ein noch reibungsloseres Erlebnis beim Erstellen dynamischer Schnittstellen schauen Sie sich unseren Kurs über einfache Schnittstellen mit Vuetify an, der beliebten Komponentenbibliothek für Vue.js-Entwickler.

Durch die Einführung dynamischer Layouts können Sie Ihren Entwicklungsprozess optimieren, die Flexibilität Ihrer Anwendung erhöhen und eine sauberere, besser wartbare Codebasis beibehalten. Beginnen Sie noch heute mit der Integration dynamischer Layouts in Ihre Projekte und erleben Sie die transformative Wirkung auf Ihren Workflow und Ihre Anwendungsqualität.

Ursprünglich veröffentlicht unter https://www.vuemastery.com am 5. September 2024.

Das obige ist der detaillierte Inhalt vonDynamische Layouts mit Vue jsx: Ein Leitfaden für flexible und wartbare Benutzeroberflächen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!