作者 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:
이러한 단계를 수행하면 동적 레이아웃에 능숙해지게 됩니다. 동적 인터페이스를 더욱 원활하게 생성하려면 Vue.js 개발자에게 인기 있는 구성 요소 라이브러리인 Vuetify를 사용한 쉬운 인터페이스 과정을 확인하세요.
동적 레이아웃을 수용함으로써 개발 프로세스를 간소화하고, 애플리케이션의 유연성을 향상시키며, 더 깔끔하고 유지 관리하기 쉬운 코드베이스를 유지할 수 있습니다. 지금 바로 동적 레이아웃을 프로젝트에 통합하고 워크플로우와 애플리케이션 품질에 혁신적인 영향을 미치는 것을 경험해 보세요.
2024년 9월 5일 https://www.vuemastery.com 에 원본 게시.
위 내용은 Vue jsx를 사용한 동적 레이아웃: 유연하고 유지 관리 가능한 UI 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
