七个常用的 Vue 3 UI 组件

介绍:由于我在工作的公司中角色和职责的变化,作为后端开发人员的我在去年年底选择了 Vue.js 。当我深入研究时,我发现 Vue.js 非常有趣 。它不像 Angular 那样有很高的学习曲线,而且比 React 更轻量和灵活 。

七个常用的 Vue 3 UI 组件

文章插图
Vue.js 绝对是一个用于构建用户界面的强大 JAVAScript 框架 。为了创建具有视觉吸引力的交互式用户界面,合并 UI 组件非常重要 。
在这篇文章中,我将介绍我在工作中经常使用的 7 个 UI 组件 。我还将介绍它们的目的、实施示例和现实生活中的用例 。
UI 组件的重要性UI 组件在 Vue.js 开发中发挥着重要作用 。通过将复杂的接口分解为模块化、可重用的组件 , 开发人员可以创建可扩展且高效的代码 , 更易于维护和故障排除 。
此外,合并 UI 组件还可以改善用户体验和界面一致性,因为用户将在不同的页面或应用程序中获得熟悉的体验 。
Vue.js 7 个最常用的 UI 组件1. 按钮组件按钮使用户能够与应用程序交互 。在网站上看不到按钮几乎是不可能的 。它可能是最简单的组件之一,但其用途却并非如此 。这是网站的号召性用语 。因此,请仔细思考如何使其脱颖而出,如何处理不同的状态以及如何使用它来验证某些操作 。
现实项目中的示例:注册表单的提交按钮、电子商务网站上的“添加到购物车”按钮 。
这是一个简单的例子:
七个常用的 Vue 3 UI 组件

文章插图
<template><button>{{props.title || 'Add To Cart'}}</button></template><script setup>const props = defineProps(['title']);</script><style>button {color: #4fc08d;}button {background: none;border: solid 1px;border-radius: 1em;font: inherit;padding: 0.65em 2em;}</style>演示:https://codepen.io/terawuth/pen/poqRJvZ
2. 表单组件表单用于收集 Web 应用程序中的用户输入 , 并且可以针对不同的输入类型(文本、电子邮件、密码等)进行自定义 。在网站上很难不看到表单 。验证、步骤或指南等元素对于改善表单填写体验大有帮助 。
七个常用的 Vue 3 UI 组件

文章插图
现实项目中的示例:用于注册、联系或登录的用户输入表单 。
<template><div class="form-mAIn"><form><div class="form-item"><label>First Name</label><input type="text" name="first_name" v-model="firstName" /></div><div class="form-item"><label>Last Name</label><input type="text" name="last_name" v-model="lastName" /></div><div class="form-item"><Button @click="onSave" title="Save" /></div></form></div></template><script setup>import { ref } from "vue";import Button from "https://codepen.io/terawuthth/pen/poqRJvZ.js";const firstName = ref("");const lastName = ref("");const onSave = () => alert("Save !!");</script><style>form {display: flex;flex-direction: column;}.form-item input {margin-left: 20px}.form-item {margin-top: 20px;}</style>演示:https://codepen.io/terawuth/pen/KKbzLzK
3.卡片组件卡片用于以视觉上吸引人的方式组织和显示信息 。如今,卡片组件非常常见,尤其是在社交媒体网站上 。尽管卡片组件以一种美观且干净的方式呈现信息,但必须小心不要在卡片上放置太多数据 。
七个常用的 Vue 3 UI 组件

文章插图
现实项目中的示例:网站上的新闻文章卡、社交媒体资料卡 。
<template><div class="card"><div class="img-product"><img :src=https://www.isolves.com/it/cxkf/qd/2023-12-20/"product.image" alt="Product" />