引见：

由于我在上班的公司中角色和职责的变动，作为后端开发人员的我在去年年底选用了Vue.js。当我深化钻研时，我发现Vue.js十分幽默。它不像Angular那样有很高的学习曲线，而且比React更轻量和灵敏。

Vue.js相对是一个用于构建用户界面的弱小Script框架。为了创立具有视觉吸引力的交互式用户界面，兼并UI组件十分关键。

在这篇文章中，我将引见我在上班中经常经常使用的7个UI组件。我还将引见它们的目标、实施示例和事实生存中的用例。

UI组件的关键性

UI组件在Vue.js开发中施展着关键作用。经过将复杂的接口合成为模块化、可重用的组件，开发人员可以创立可裁减且高效的代码，更易于保养和缺点扫除。

此外，兼并UI组件还可以改善用户体验和界面分歧性，由于用户将在不同的页面或运行程序中取得相熟的体验。

Vue.js7个最罕用的UI组件

1.按钮组件

按钮经常使用户能够与运行程序交互。在网站上看不到按钮简直是无法能的。它或许是最便捷的组件之一，但其用途却并非如此。这是网站的召唤性用语。因此，请细心理考如何使其锋芒毕露，如何处置不同的形态以及如何经常使用它来验证某些操作。

事实名目中的示例：注册表单的提交按钮、电子商务网站上的减少到购物车按钮。

这是一个便捷的例子：

<template><button>{{props.title||'AddToCart'}}</button></template><scriptsetup>constprops=defineProps(['title']);</script><style>button{color:#4fc08d;}button{background:none;border:solid1px;border-radius:1em;font:inherit;padding:0.65em2em;}</style>

展示：

2.表单组件

表单用于搜集Web运行程序中的用户输入，并且可以针对不同的输入类型（文本、电子邮件、明码等）启动自定义。在网站上很难不看到表单。验证、步骤或指南等元素关于改善表单填写体验大有协助。

事实名目中的示例：用于注册、咨询或登录的用户输入表单。

<template><div><form><div><label>FirstName</label><inputv-model="firstName"/></div><div><label>LastName</label><inputv-model="lastName"/></div><div><Button@click="onSave"/></div></form></div></template><scriptsetup>import{ref}from"vue";importButtonfrom"https://codepen.io/terawuthth/pen/poqRJvZ.js";constfirstName=ref("");constlastName=ref("");constonSave=()=>alert("Save!!");</script><style>form{display:flex;flex-direction:column;}.form-iteminput{margin-left:20px}.form-item{margin-top:20px;}</style>

展示：

3.卡片组件

卡片用于以视觉上吸引人的形式组织和显示信息。当初，卡片组件十分经常出现，尤其是在社交媒体网站上。虽然卡片组件以一种好看且洁净的形式出现信息，但必定小心不要在卡片上搁置太少数据。

事实名目中的示例：网站上的资讯文章卡、社交媒体资料卡。

<template><div><div><img:src="product.image"/></div><div><div><h3><a:href="product.link">{{product.name}}</a></h3></div><div><av-for="tagintags":href="tag.link"><span>{{tag.name}}</span></a></div></div></div></template><scriptsetup>import{ref,reactive}from"vue";consttags=ref([{link:"#",name:"notebook"},{link:"#",name:""}]);constproduct=reactive({name:"Domino",image:"https://picsum.photos/id/2/250/200",link:"#"});</script><style>.card{width:250px;height:300px;border:1pxsolid#dedfdf;border-radius:10px;}.card:hover{border:2pxsolid#adaeae;box-shadow:2px2px#adaeae;}.card.img-product{height:60%;margin:0;}.card.img-productimg{height:200px;width:100%;}.detail{height:40%;padding:10px;display:flex;flex-direction:column;justify-content:start;align-items:start;}.taga{font-size:12px;color:black;background-color:#dedfdf;padding:08px08px;border-radius:20px;text-decoration:none;}.taga:not(:first-child){margin-left:8px;}.detaila{color:black;text-decoration:none;}.detail.taga:hover{color:#fff;background-color:#fc6969;}.detail.titleh3:hover{color:#fc6969;}</style>

展示：

4.导航组件

导航准许用户导航到运行程序内的不同局部或页面。大少数网站至少有1个菜单。菜单关于疏导用户十分关键，但太多菜单或不正确的菜单分组或许会造成凌乱。

事实名目中的示例：公司网站的导航栏、餐厅网站的菜单。

<template><div><av-for="menuinmenuList":class="{active:menu.name===activeMenu}":href="menu.link">{{menu.name}}</a></div></template><scriptsetup>import{ref}from"vue";constactiveMenu=ref("menu1");constmenuList=ref([{link:"#",name:"menu1"},{link:"#",name:"menu2"},{link:"#",name:"menu3"}]);</script><style>body{margin:0;padding:0;}.nav{overflow:hidden;background-color:#333;}.nava{float:left;color:#f2f2f2;text-align:center;padding:14px16px;text-decoration:none;font-size:17px;}.nava:hover{background-color:#ddd;color:black;}.nava.active{background-color:#04aa6d;color:white;}</style>

展示：

5.模态组件

模态框用于在关键内容之上的弹出窗口中显示内容。它十分适宜在不进入新页面的状况下显示无心义的信息。虽然它可以让用户专一于特定的中央，但它或许会让人厌烦。一个例子是广告形式。

事实名目中的示例：登录或注册弹出窗口、确认信息。

<template><div><Button@click="showModal"/><div:style="{display:modalDisplay}"><div><span@click="closeModal">×</span><p>{{content}}</p></div></div></div></template><scriptsetup>import{ref}from"vue";importButtonfrom"https://codepen.io/terawuthth/pen/poqRJvZ.js";constmodalDisplay=ref("none");constcontent=ref("SometextintheModal..!!");constshowModal=()=>{modalDisplay.value="block";};constcloseModal=()=>(modalDisplay.value="none");</script><style>.modal{position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4);}.modal-content{background-color:#fefefe;margin:15%auto;padding:20px;border:1pxsolid#888;width:80%;}.close{color:#aaa;float:right;font-size:28px;font-weight:bold;}.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer;}</style>

展示：

6.警报组件

警报提供反应并通知用户无关运行程序中的关键信息或事情。警报是一种十分有用的形式来反应用户而不打扰他们。但我们应该思索何时经常使用一段期间后隐没的警报或何时须要用户封锁警报。

事实名目中的示例：付款或买卖的成功或失误信息、站点保养通知。

<template><div:style="{display:alertDisplay}"><spanclass="closebtn"@click="closeAlert"onclick="this.parentElement.style.display='none';">×</span>Thisisanalertbox.</div></template><scriptsetup>import{ref}from"vue";constisAlert=ref(true);constalertDisplay=ref("block");constcloseAlert=()=>(alertDisplay.value="none");</script><style>.alert{padding:20px;background-color:#f44336;color:white;margin-bottom:15px;}.closebtn{margin-left:15px;color:white;font-weight:bold;float:right;font-size:22px;line-height:20px;cursor:pointer;transition:0.3s;}.closebtn:hover{color:black;}</style>

展示：

7.头像组件

头像是代表运行程序中用户的图标或图像。它们经常使用户帐户愈加共性化并且易于用户识别。

但是，并非一切系统都须要用户帐户具有图标或图像。假设用户不上行它们，我们应该提供自动图像或经常使用他们名字的首字母以提供更好的用户体验。

事实名目中的示例：社交媒体网站或聊天运行程序上的用户团体资料。

<template><div><img:src="imgPath"/></div></template><scriptsetup>import{ref}from"vue";constimgPath=ref("https://picsum.photos/id/866/50/50");</script><stylescoped>.avatar{vertical-align:middle;width:50px;height:50px;}#img-avatar{border-radius:50%;}</style>

展示：

留意：您可以在此地址：中找到7个UI组件汇合的代码。

优势和留意事项

在Vue.js开发中经常使用这些UI组件的好处包含：

但是，思索一些限度或缺陷也很关键，例如，由于页面上有少量组件而造成的潜在性能疑问，或许须要超出预构建组件提供范畴的自定义。因此，在经常使用预构建组件和定制代码之间取得平衡十分关键。

我对后端开发的认识

就我而言，我来自经常使用Node.js（基于JavaScript）的后端开发。我不用同时学习新言语和新框架。

此外，Vue.js文档激励新手经常使用函数式编程准则（例如CompositionAPI）启动开发。雷同，激励后端开发人员尽或许经常使用这个概念，从而使向前端开发的过渡变得更容易。

论断

Vue.js是一个用于开发引人入胜的用户界面的弱小工具，兼并UI组件可以将您的名目优化到一个新的水平。这些只是我团体对7个最罕用UI组件的认识，开发人员可以创立用户青睐的可裁减、高效且具有视觉吸引力的界面。

作为一个刚接触Vue.js的后端开发人员，我还有很多物品须要学习。宿愿经过火享我的阅历旅程，可以激励任何有兴味学习和裁减对Vue.js中UI组件开发的了解的人。

vue插件都有哪些UI组件和框架，能告诉我一下吗？

element - 饿了么出品的Vue2的web UI工具套件mint-ui - Vue 2的移动UI元素iview - 基于 Vuejs 的开源 UI 组件库Keen-UI - 轻量级的基本UI组件合集vue-material - 通过Vue Material和Vue 2建立精美的app应用muse-ui - 三端样式一致的响应式 UI 库vuetify - 为移动而生的Vue JS 2组件框架vonic - 快速构建移动端单页应用vue-blu - 帮助你轻松创建web应用vue-multiselect - 选择框解决方案VueCircleMenu - 漂亮的vue圆环菜单vue-chat - vuejs和vuex及webpack的聊天示例radon-ui - 快速开发产品的Vue组件库vue-waterfall - 的瀑布布局组件vue-carbon - 基于 vue 开发MD风格的移动端vue-beauty - 由vue和ant design创建的优美UI组件bootstrap-vue - 应用于Vuejs2的Twitter的Bootstrap 4组件vueAdmin - 基于vuejs2和element的简单的管理员模板vue-ztree - 用 vue 写的树层级组件vue-tree - vue树视图组件vue-tabs - 多tab页轻型框架

助你上手Vue3全家桶之Vue3教程

这些内容是博主在学习过程中记录下来的，有一些不重要的点就跳过了，需要时自行查询文档。其实 V2 到 V3 的学习成本不高，熟悉 V2 的话，看完这篇文章就可以上手 V3 。

Vue3官网

在线源码编译地址

setup 是所有 Composition API 的容器，值为一个函数。组件中所用到的数据、方法等等，均要配置在 setup 中，它会在 beforeCreate 之前执行一次，注意： V3 里 this 不再是指向 Vue 实例，访问 this 会是 undefined

尽量不要与V2配置混用

V2 配置（ data 、 methos 、 computed ...）中可以访问到 setup 中的属性、方法。 但在 setup 中不能访问到 V2 配置（ data 、 methods 、 computed ...）。 如果有重名,setup 优先。

setup不能是一个async函数

因为返回值不再 return 的对象, 而是 promise , 模板看不到 return 对象中的属性。（后期也可以返回一个 Promise 实例，但需要 Suspense 和异步组件的配合）

使用 ref 可以创建一个包含响应式数据的引用对象（reference对象，简称ref对象），可以是基本类型、也可以是对象。

语法

定义一个对象类型的响应式数据，内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作

语法

与 V2 中 computed 配置功能一致

语法

与 V2 中 watch 配置功能一致，语法有点改动

语法

和 watch 的区别是， watch 既要指明监视的属性，也要指明监视的回调。而 watchEffect ，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性，不用写返回值。

语法

生命周期全都写在 setup 中

创建一个 ref 对象，其 value 值指向另一个对象中的某个属性

语法

将响应式对象转换为普通对象，其中结果对象的每个 property 都是指向原始对象相应 property 的 ref

语法

只处理对象最外层属性的响应式（浅响应式）。适用于：一个对象数据，结构比较深, 但变化时只是外层属性变化

语法

只处理基本数据类型的响应式, 不进行对象的响应式处理。适用于：一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换

语法

让一个响应式数据变为只读的（深只读），应用于不希望数据被修改时

语法

让一个响应式数据变为只读的（浅只读），应用于不希望数据被修改时

语法

将一个由reactive生成的响应式对象转为普通对象，对这个普通对象的所有操作，不会引起页面更新。

语法

标记一个对象，使其永远不会再成为响应式对象，有些值不应被设置为响应式的，例如复杂的第三方类库等，当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

语法

创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数，该函数接收 track 和 trigger 函数作为参数，并且应该返回一个带有 get 和 set 的对象。

语法

实现祖与后代组件间通信，父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

语法

检查一个值是否为一个 ref 对象

语法

检查一个值是否为一个 isReactive 对象

语法

检查一个对象是否是由 readonly 创建的只读代理

语法

检查对象是否是由 reactive 或 readonly 创建的 proxy

语法

Teleport 提供了一种干净的方法，允许我们控制在 DOM 中哪个父节点下渲染了 HTML ，而不必求助于全局状态或将其拆分为两个组件。

语法

等待异步组件时先渲染一些额外内容，让应用有更好的用户体验

语法

将全局的API，即调整到应用实例（app）上

由于 V3 中不在存在 this ，所以 ref 的获取调整了

语法

V3 中在 for 循环元素上绑定 ref 将不再自动创建 $ref 数组。要从单个绑定获取多个 ref ，请将 ref 绑定到一个更灵活的函数上

语法

定义一个组件可以向其父组件触发的事件

使用方式修改

通过事件来监听组件生命周期中的关键阶段

语法

如果看了觉得有帮助的，我是@ 鹏多多 ，欢迎 点赞 关注 评论； END

往期文章

个人主页