Vue+Element组件的使用[快速开发好看实用的页面]

心态还需努力呀

已于 2022-11-30 17:05:21 修改

阅读量2.3k

点赞数 2

分类专栏：前端案例文章标签： vue.js 前端 javascript html5 elementui

于 2022-11-30 10:04:06 首次发布

本文链接：https://blog.csdn.net/weixin_52258054/article/details/128108651

版权

前端案例专栏收录该内容

15 篇文章 3 订阅

订阅专栏

2.2.1 引入需要的资源：element所用到的样式、组件库、和vue（vue3不支持element的使用）

2.2.2 将上述分析Element官网的那段轮播图代码复制到相应的位置。

2.2.3 修改代码，将数字换成图片资源

2.2.4 运行效果图

三、全部代码展示

前言

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。由饿了么公司前端团队开源。

注：必须在vue知识掌握的情况下才能看懂会去运用Element组件。也可去看我的vue文章先进行学习哦~Vue必备知识点(简单+快速上手Vue)_心态还需努力呀的博客-CSDN博客_学vue前应该会那些东西

一、Element特性

一致性 Consistency

与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。

反馈 Feedback

控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。

效率 Efficiency

简化流程：设计简洁直观的操作流程；
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。

可控 Controllability

用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。

具体详细内容可查看官网：

Element - The world's most popular Vue UI framework

二、用法（以页面编写轮播图为例）

2.1 打开Element组件官网

这里我们先打开组件，然后找到Carousel走马灯，选择以卡片化为例。如下图所示：

然后我们在卡片化下面点击显示代码：

下述代码中带有<template>放到vue的挂载点里才能生效

2.2 正式写代码

创建一个vue模板然后进行以下操作：

2.2.1 引入需要的资源：element所用到的样式、组件库、和vue（vue3不支持element的使用）

<!-- 1.导入vue+element -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>

2.2.2 将上述分析Element官网的那段轮播图代码复制到相应的位置。

运行后得到下图：

2.2.3 修改代码，将数字换成图片资源

2.2.4 运行效果图

可看到图片就已经插进去了。具体的宽高自己可以调，这里就不展示了。

三、全部代码展示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>使用Element组件--心态</title>
		<!-- 1.导入vue+element -->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<style type="text/css">
			.el-carousel__item h3 {
				color: #475669;
				font-size: 14px;
				opacity: 0.75;
				line-height: 200px;
				margin: 0;
			}

			.el-carousel__item:nth-child(2n) {
				background-color: #99a9bf;
			}

			.el-carousel__item:nth-child(2n+1) {
				background-color: #d3dce6;
			}
		</style>
	</head>
	<body>
		<div id="app" class="app">

			<el-carousel :interval="4000" type="card" height="200px">
				<el-carousel-item v-for="item in 5" :key="item">
					<!-- <h3 class="medium">{{ item }}</h3> -->
					<img :src="imgList[item]" width="100%" height="100%">
				</el-carousel-item>
			</el-carousel>

		</div>

		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					imgList: ["img/t1.png", "img/t2.png", "img/t3.png", "img/t4.png", "img/t5.png", "img/t6.png"],
				}

			})
		</script>
	</body>
</html>

总结

这就是Vue+Element组件的使用，可以方便我们学后端的开发简单的页面，只需要cv改改代码即可成为自己的代码。但这其中vue知识点是需要我们掌握的，如果vue知识点你不知道的话很难去运用element。所以说没学vue的赶快学起来吧。

心态还需努力呀

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue+Element组件的使用[快速开发好看实用的页面]

这就是Vue+Element组件的使用，可以方便我们学后端的开发简单的页面，只需要cv改改代码即可成为自己的代码。但这其中vue知识点是需要我们掌握的，如果vue知识点你不知道的话很难去运用element。所以说没学vue的赶快学起来吧。
复制链接

扫一扫