脚本宝典收集整理的这篇文章主要介绍了1月14-Element，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
常见的名词解释 UI: 用户界面(设计的网页界面) UE: 用户体验,指的用户访问网站,访问体验
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网页在文件的下一级目录): …/文件名称
注意:
入门案例
<!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全部内容，希望文章能够帮你解决1月14-Element所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。