- Element-UI
-
常见的名词解释
UI: 用户界面(设计的网页界面)
UE: 用户体验,指的用户访问网站,访问体验 -
ElementUI概述
- 网站快速成型工具(通过ElementUI快速搭建网站)。
是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
特点:
- 它是一个前端框架,前端开发者使用它快速搭建网站
- 它的核心提供了丰富的组件库
- 它的组件是基于Vue框架定义的(所以使用elementui,一定要引用vue.js)
- 网站快速成型工具(通过ElementUI快速搭建网站)。
-
ElementUI入门
官网地址:
总结:
1.link标签的href: 引入element-ui/lib/theme-chalk/index.css
2.script标签的src: 引入vue.js
3.script标签的src: 引入element-ui/lib/index.js -
ElementUI常用的组件(非常丰富的组件库,基于Vue框架定义的)
* 行组件:
基本语法:子组件1,子组件2,子组件N
特点: 让那子组件在一行显示
注意: 子组件过多,会另一起一行显示.
* 按钮组件
基本语法:文本
type属性改变按钮的样式:info,danger,warning等等
icon属性: 在按钮上显示icon图标
* icon图标按钮:
基本语法:
class属性值不同,图标样式不一样
* form表单组件
基本语法:
文本输入框
密码输入框
单选输入框
多选输入框
提交按钮
隐藏
* 容器组件(布局组件) -
完整的案例: 教务管理系统后端页面的布局(UI)
=============================================================
web开发中的路径书写
-
绝对路径: 通过http(https),引入网站上面的文件
比如: “https://unpkg.com/element-ui/lib/index.js” -
相对路径:
同一级目录(html网页和文件在一起): 文件的名称
上一级目录(html网页在文件的上一级目录): 目录名称/文件名称
下一级目录(html网页在文件的下一级目录): …/文件名称注意:
- 上多级目录的情况下(html网页在文件的上多级目录):
目录名称1/目录名称2/—/目录名称N/文件名称 - 下多级目录的情况下(html网页在文件的下多级目录)
…/----/…/文件名称
备注: ----表示多级目录的意思
- 上多级目录的情况下(html网页在文件的上多级目录):
入门案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element快速入门</title>
<!--1引入elementui的css样式文件-->
<link rel="stylesheet" type="text/css"
href="element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">
<el-row>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
<!--2.引入vue.js 放在element: index.js 上面-->
<script src="js/vue.js"></script>
<!--3.引入index.js-->
<script src="element-ui/lib/index.js"></script>
<script>
new Vue({
"el":"#app",
});
</script>
</body>
</html>
按钮组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element快速入门</title>
<!--1引入elementui的css样式文件-->
<link rel="stylesheet" type="text/css"
href="element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">
<el-row>
<el-button>xxxxx</el-button>
<el-button type="info">xxxxx</el-button>
<el-button type="danger">xxxxx</el-button>
</el-row>
</div>
<!--2.引入vue.js 放在element: index.js 上面-->
<script src="js/vue.js"></script>
<!--3.引入index.js-->
<script src="element-ui/lib/index.js"></script>
<script>
new Vue({
"el":"#app",
});
</script>
</body>
</html>
图标组件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>element快速入门</title>
<!--1引入elementui的css样式文件-->
<link rel="stylesheet" type="text/css"
href="element-ui/lib/theme-chalk/index.css"/>
</head>
<body>
<div id="app">
<el-row>
<el-button>xxxxx</el-button>
<el-button type="info">xxxxx</el-button>
<el-button type="danger">xxxxx</el-button>
</el-row>
</div>
<!--2.引入vue.js 放在element: index.js 上面-->
<script src="js/vue.js"></script>
<!--3.引入index.js-->
<script src="element-ui/lib/index.js"></script>
<script>
new Vue({
"el":"#app",
});
</script>
</body>
</html>