1月14-Element

Posted 小码哥的进阶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了1月14-Element相关的知识,希望对你有一定的参考价值。

  1. Element-UI
  • 常见的名词解释
    UI: 用户界面(设计的网页界面)
    UE: 用户体验,指的用户访问网站,访问体验

  • ElementUI概述

    • 网站快速成型工具(通过ElementUI快速搭建网站)。
      是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。
      特点:
    1. 它是一个前端框架,前端开发者使用它快速搭建网站
    2. 它的核心提供了丰富的组件库
    3. 它的组件是基于Vue框架定义的(所以使用elementui,一定要引用vue.js)
  • 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开发中的路径书写

  1. 绝对路径: 通过http(https),引入网站上面的文件
    比如: “https://unpkg.com/element-ui/lib/index.js”

  2. 相对路径:
    同一级目录(html网页和文件在一起): 文件的名称
    上一级目录(html网页在文件的上一级目录): 目录名称/文件名称
    下一级目录(html网页在文件的下一级目录): …/文件名称

    注意:

    1. 上多级目录的情况下(html网页在文件的上多级目录):
      目录名称1/目录名称2/—/目录名称N/文件名称
    2. 下多级目录的情况下(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>

以上是关于1月14-Element的主要内容,如果未能解决你的问题,请参考以下文章

Vue+element_ui生成Ubuntu自定义壁纸幻灯片的核心xml文本

1971年3月1日,哪年是55周岁?

测算一段时间含每个月的天数,时间段2012-1-10到212-12-10,如何通过EXCEL公式得出1月2月.12月份所含的天数

2023年1月放假日历表

2022年1月2日用英语怎么说

当前日期增加自然月(比如当前时间为3月31号,加上1个月,预期结果是4月30日,但是输出了5月1日)