作者 Dubem Izuorah
您是否曾经花费数小时在多个页面上调整相同的网页布局，或者努力让您的 UI 适应不断变化的数据而不造成破坏？这些常见的挑战可能会减慢您的开发过程，并导致令人沮丧且容易出错的代码。
通过在运行时基于数据创建布局，您可以构建灵活、可维护和可扩展的应用程序，轻松适应变化。这种方法称为 动态布局，消除了重复 HTML 编辑的需要，使您的 UI 与数据无缝保持同步。
在本文中，我们将探讨动态布局如何改变您的开发工作流程并提升您的项目。
当内容频繁更改或显示从 API、其他数据源提取的响应式 UI 或响应用户交互时，动态布局特别有用。
动态布局在各种现实场景中大放异彩，例如：
通过动态生成这些元素，您可以确保一致性、简化调整并维护干净的代码库。
让我们通过构建动态导航栏来获得动态布局的实践经验。作为参考，这里是本教程的 Github 存储库。
假设您正在开发一个支付平台，需要创建一个干净的、可扩展的导航栏组件，如下面的屏幕截图所示：
用户登录时的导航栏
没有用户登录的导航栏
为了专注于动态布局，我们不会在这里深入研究环境设置细节。您可以在我们的 GitHub 存储库中找到完整的代码示例。
使用的技术：
静态导航栏组件涉及大量 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 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>
虽然静态布局可能足以满足简单的界面，但动态布局提供了卓越的可维护性和可扩展性。
To create a dynamic navbar, we’ll want to define our layout data and generate UI components based on this 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:
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.
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:
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.
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.
Now that we understand dynamic layouts, it’s time to put your knowledge into practice. Here are some suggested next steps:
通过采取这些步骤，您就可以熟练掌握动态布局了。为了获得更流畅的动态界面创建体验，请查看我们的 Easy Interfaces with Vuetify 课程，Vuetify 是 Vue.js 开发人员常用的组件库。
通过采用动态布局，您可以简化开发流程，增强应用程序的灵活性，并维护更干净、更易于维护的代码库。立即开始将动态布局集成到您的项目中，体验对您的工作流程和应用程序质量的变革性影响。
最初发布于 https://www.vuemastery.com 于 2024 年 9 月 5 日发布。
以上是使用 Vue jsx 进行动态布局：灵活且可维护的 UI 指南的详细内容。更多信息请关注PHP中文网其他相关文章！
