使用 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. 探索高级用例：继续探索动态布局的更高级应用。掌握来自于持续的练习和探索。

通过采取这些步骤，您就可以熟练掌握动态布局了。为了获得更流畅的动态界面创建体验，请查看我们的 Easy Interfaces with Vuetify 课程，Vuetify 是 Vue.js 开发人员常用的组件库。

通过采用动态布局，您可以简化开发流程，增强应用程序的灵活性，并维护更干净、更易于维护的代码库。立即开始将动态布局集成到您的项目中，体验对您的工作流程和应用程序质量的变革性影响。

最初发布于 https://www.vuemastery.com 于 2024 年 9 月 5 日发布。

---

以上是使用 Vue jsx 进行动态布局：灵活且可维护的 UI 指南的详细内容。更多信息请关注PHP中文网其他相关文章！