Element-简单使用
一、介绍Element-UI
ElementUI中文网 :https://element.eleme.cn/#/zh-CN
Element-Ul是
饿了么
前端团队推出的一款基于Vue.js 2.0
的桌面端UI框架,手机端有对应框架是Mint UI 。我是学后端的在学习Vue时候了解到Element,我使用Element主要是为了从里面使用各种组件
二、入门
1.安装:
通过CDN安装,我们也可以把他们下载下来,注意它是配置Vue使用的所以Vue.js也是需要的
目前可以通过 unpkg.com/element-ui 获取到最新版本的资源,在页面上引入 js 和 css 文件即可开始使用。
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
官方建议使用 CDN 引入 Element 的用户在链接地址上锁定版本,以免将来 Element 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com。
三、简单使用
- 项目代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入Vue.js -->
<script type="text/javascript" src="js/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="container">
<!-- 引入组件模板 -->
<template>
<el-table :data="stus" style="width: 100%">
<el-table-column prop="stuNum" label="学号" width="180"></el-table-column>
<el-table-column prop="stuName" label="姓名" width="180"></el-table-column>
<el-table-column prop="address" label="地址"></el-table-column>
</el-table>
</template>
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
stus: [{
stuNum: '1001',
stuName: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
stuNum: '2016-05-04',
stuName: '张三',
address: '上海市普陀区金沙江路 1517 弄'
}, {
stuNum: '2016-05-01',
stuName: '李四',
address: '上海市普陀区金沙江路 1519 弄'
}, {
stuNum: '2016-05-03',
stuName: '王五',
address: '上海市普陀区金沙江路 1516 弄'
}]
}
});
</script>
</body>
</html>
- 效果
这里就简单演示如何使用一个组件,在项目中我们需要什么组件来找一下,照猫画虎即可,如果要深入学习还是要参考官方文档来学习