Reka Letak Dinamik dengan Vue jsx: Panduan untuk UI Fleksibel dan Boleh Diselenggara

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, wodurch der Code schwer zu lesen und zu warten ist.

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. Refactor Projek Sedia Ada : Kenal pasti dan faktor semula bahagian projek semasa anda di mana reka letak dinamik boleh meningkatkan kecekapan dan kebolehbacaan, terutamanya dalam kawasan dengan HTML berulang atau logik komponen.
2. Sepadukan dengan CMS : Eksperimen dengan menyepadukan CMS atau sistem lain dengan reka letak dinamik anda untuk mencipta antara muka pengguna yang lebih dinamik dan responsif.
3. Bekerjasama dengan Pasukan Anda : Kongsi pandangan anda tentang reka letak dinamik dengan pasukan anda. Bincangkan cara anda boleh memanfaatkan reka letak dinamik secara kolektif dalam projek anda untuk meningkatkan produktiviti dan memupuk budaya peningkatan berterusan.
4. Terokai Kes Penggunaan Terperinci : Teruskan meneroka aplikasi reka letak dinamik yang lebih maju. Penguasaan datang daripada amalan dan penerokaan yang konsisten.

Dengan mengambil langkah-langkah ini, anda sedang dalam perjalanan untuk menjadi mahir dalam reka letak dinamik. Untuk pengalaman yang lebih lancar dalam mencipta antara muka dinamik, lihat kursus kami tentang Antaramuka Mudah dengan Vuetify, perpustakaan komponen popular untuk pembangun Vue.js.

Dengan menerima reka letak dinamik, anda boleh menyelaraskan proses pembangunan anda, meningkatkan fleksibiliti aplikasi anda dan mengekalkan pangkalan kod yang lebih bersih dan boleh diselenggara. Mula menyepadukan reka letak dinamik ke dalam projek anda hari ini dan alami kesan transformatif pada aliran kerja dan kualiti aplikasi anda.

Asalnya diterbitkan di https://www.vuemastery.com pada 5 September 2024.

Atas ialah kandungan terperinci Reka Letak Dinamik dengan Vue jsx: Panduan untuk UI Fleksibel dan Boleh Diselenggara. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!