Vue jsx를 사용한 동적 레이아웃: 유연하고 유지 관리 가능한 UI 가이드

作者 Dubem Izuorah

您是否曾经花费数小时跨多个页面调整相同的网页布局，或者努力让您的 UI 适应不断变化的数据而不造成破坏？这些常见的挑战可能会减慢您的开发过程，并导致令人沮丧且容易出错的代码。

引入动态布局

通过在运行时基于数据创建布局，您可以构建灵活、可维护和可扩展的应用程序，轻松适应变化。这种方法称为 动态布局，消除了重复 HTML 编辑的需要，使您的 UI 与数据无缝保持同步。

在本文中，我们将探讨动态布局如何改变您的开发工作流程并提升您的项目。

为什么使用动态布局？

当内容频繁更改或显示从 API、其他数据源提取的响应式 UI 或响应用户交互时，动态布局特别有用。

动态布局的好处

• 灵活性：基于底层数据轻松调整UI组件，无需修改HTML或模板代码。
• 可维护性：坚持DRY（Don’t Repeat Yourself）原则，减少重复代码，简化维护。
• 可扩展性：以编程方式管理您的 UI，允许轻松更新、添加或删除项目。
• 减少错误：最大限度地减少手动 HTML 编辑，降低出现错误的可能性。
• 增强响应能力：根据条件动态显示或隐藏 UI 元素，使界面对用户交互或数据变化的响应更加灵敏。

动态布局的实际场景

动态布局在各种现实场景中大放异彩，例如：

• 表单：对于表单较多的应用程序，最好将表单字段抽象为与某些验证库配对的计算属性。在布局中，您可以循环遍历属性以有条件地显示表单字段和属性，例如标签、类名称、验证消息等。
• 博客文章列表：根据数据动态管理和更新每张明信片的内容。
• 内容块：有效组织和显示不同的内容元素。
• 用户列表、导航项、仪表板：确保一致的样式和轻松调整，无需手动 HTML 更新。
• 网站部分：动态生成部分以保持有凝聚力且易于调整的布局。

通过动态生成这些元素，您可以确保一致性、简化调整并维护干净的代码库。

构建动态导航栏

让我们通过构建动态导航栏来获得动态布局的实践经验。作为参考，这里是本教程的 Github 存储库。

要求

假设您正在开发一个支付平台，需要创建一个干净的、可扩展的导航栏组件，如下面的屏幕截图所示：

用户登录时的导航栏

没有用户登录的导航栏

设置环境

为了专注于动态布局，我们不会在这里深入研究环境设置细节。您可以在我们的 GitHub 存储库中找到完整的代码示例。

使用的技术：

1. Nuxt — Vue框架
2. Nuxt TailwindCSS — 样式
3. Phosphor-icons Vue — 图标组件

静态方法

静态导航栏组件涉及大量 HTML 标签和属性，使得代码难以阅读和维护。

更新此类布局很容易出错，尤其是在重复元素共享相同属性或样式的情况下。

虽然静态方法对于起草布局很有用，但动态布局对于可维护性和协作来说更可取。

静态导航栏示例：

？ 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  class="w-10 h-10 object-contain lazy" src="/static/imghwm/default1.png" data-src="https://logo.clearbit.com/google.com" alt="Vue jsx를 사용한 동적 레이아웃: 유연하고 유지 관리 가능한 UI 가이드" >
      </nuxtlink>

<!-- Dashboard or Home Link -->
      <nuxtlink v-if="user" href="/dashboard" class="flex items-center">
        <phgauge size="24"></phgauge>
        <span class="ml-2">Dashboard</span>
      </nuxtlink>
      <nuxtlink v-else href="/home" class="flex items-center">
        <phhousesimple size="24"></phhousesimple>
        <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"></avatar>
        <span class="ml-2">Dubem Izuorah</span>
      </div>
      <!-- Auth Button -->
      <button class="flex items-center">
        <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>

虽然静态布局可能足以满足简单的界面，但动态布局提供了卓越的可维护性和可扩展性。

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
  },
  {
    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 lazy" src="/static/imghwm/default1.png" data-src="src" : alt="Vue jsx를 사용한 동적 레이아웃: 유연하고 유지 관리 가능한 UI 가이드" >
  </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" class="flex items-center">
        <img  class="w-10 h-10 object-contain lazy" src="/static/imghwm/default1.png" data-src="item.image" v-if="item.image" : alt="Vue jsx를 사용한 동적 레이아웃: 유연하고 유지 관리 가능한 UI 가이드" >
        <component v-if="item.render" :is="item.render"></component>
        <component v-if="item.icon" :is="item.icon" :size="24"></component>
        <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. 기존 프로젝트 리팩터링 : 특히 반복적인 HTML 또는 구성 요소 로직이 있는 영역에서 동적 레이아웃을 통해 효율성과 가독성을 높일 수 있는 현재 프로젝트의 일부를 식별하고 리팩터링합니다.
2. CMS와 통합: CMS 또는 기타 시스템을 동적 레이아웃과 통합하여 훨씬 더 동적이고 응답성이 뛰어난 사용자 인터페이스를 만들어 보세요.
3. 팀과 공동작업: 동적 레이아웃에 대한 통찰력을 팀과 공유하세요. 프로젝트에서 동적 레이아웃을 종합적으로 활용하여 생산성을 높이고 지속적인 개선 문화를 조성할 수 있는 방법에 대해 논의하세요.
4. 고급 사용 사례 탐색 : 동적 레이아웃의 고급 응용 프로그램을 계속 탐색합니다. 숙달은 지속적인 연습과 탐구에서 비롯됩니다.

이러한 단계를 수행하면 동적 레이아웃에 능숙해지게 됩니다. 동적 인터페이스를 더욱 원활하게 생성하려면 Vue.js 개발자에게 인기 있는 구성 요소 라이브러리인 Vuetify를 사용한 쉬운 인터페이스 과정을 확인하세요.

동적 레이아웃을 수용함으로써 개발 프로세스를 간소화하고, 애플리케이션의 유연성을 향상시키며, 더 깔끔하고 유지 관리하기 쉬운 코드베이스를 유지할 수 있습니다. 지금 바로 동적 레이아웃을 프로젝트에 통합하고 워크플로우와 애플리케이션 품질에 혁신적인 영향을 미치는 것을 경험해 보세요.

2024년 9월 5일 https://www.vuemastery.com 에 원본 게시.

---

위 내용은 Vue jsx를 사용한 동적 레이아웃: 유연하고 유지 관리 가능한 UI 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!