做网站培训做企业网站需要准备什么材料
Element(美化网页）
ElementUI的使用注意事项：
Element.ui的使用基于Vue环境，于是Element相关组件的使用必须放在Vue对象绑定的视图中去
ElementUI的JS库的引入必须放在vue.js库的后面
<!-- 引入样式 --><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><!-- 引入 Vue,由于index.js依赖于Vue所以必须先导入Vue库 --><script src="../js/vue.js"></script><!-- 引入组件库 --><script src="../element-ui/lib/index.js"></script>
Element的布局：
基础布局：el-row
将一行最多分为24个列，可以是24的整数因子个为一个小块
<el-row><!-- 一行组多24列 --><el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col></el-row><el-row><el-col :span="12"><div class="grid-content bg-purple"></div></el-col><el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col></el-row>
容器布局：<el-container>
<el-container>：外层容器。
<el-header>：顶栏容器。
<el-aside>：侧边栏容器。
<el-main>：主要区域容器。
<el-footer>：底栏容器。
注意：
当子元素中包含 <el-header> 或 <el-footer> 时，(只要有一个header，footer)全部子元素会垂直上下排列，否则会水平左右排列。
<body><div id="div"><el-container><el-header>Header</el-header><el-container><el-aside width="200px">Aside</el-aside><el-container><el-main>Main</el-main><el-footer>Footer</el-footer></el-container></el-container></el-container></div>
</body>
<script>new Vue({el:"#div"});
</script>
表单组件：el-form
注意：
Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可
v-model用于绑定输入框的数据到Vue对象的数据模型中
<body><div id="div"><el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"><el-form-item label="活动名称" prop="name"><el-input v-model="ruleForm.name"></el-input></el-form-item><el-form-item label="活动区域" prop="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item label="活动时间" required><el-col :span="11"><el-form-item prop="date1"><el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;"></el-date-picker></el-form-item></el-col><el-col class="line" :span="2">-</el-col><el-col :span="11"><el-form-item prop="date2"><el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker></el-form-item></el-col></el-form-item><el-form-item label="即时配送" prop="delivery"><el-switch v-model="ruleForm.delivery"></el-switch></el-form-item><el-form-item label="活动性质" prop="type"><el-checkbox-group v-model="ruleForm.type"><el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox><el-checkbox label="地推活动" name="type"></el-checkbox><el-checkbox label="线下主题活动" name="type"></el-checkbox><el-checkbox label="单纯品牌曝光" name="type"></el-checkbox></el-checkbox-group></el-form-item><el-form-item label="特殊资源" prop="resource"><el-radio-group v-model="ruleForm.resource"><el-radio label="线上品牌商赞助"></el-radio><el-radio label="线下场地免费"></el-radio></el-radio-group></el-form-item><el-form-item label="活动形式" prop="desc"><el-input type="textarea" v-model="ruleForm.desc"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button><el-button @click="resetForm('ruleForm')">重置</el-button></el-form-item></el-form></div>
</body>
<script>new Vue({el:"#div",data() {return {ruleForm: {name: '',region: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {name: [{ required: true, message: '请输入活动名称', trigger: 'blur' },{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }],region: [{ required: true, message: '请选择活动区域', trigger: 'change' }],date1: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],date2: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],type: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],resource: [{ required: true, message: '请选择活动资源', trigger: 'change' }],desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]}};},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},resetForm(formName) {this.$refs[formName].resetFields();}}});
</script>
其中在submit提交按钮的函数中绑定对应的异步操作
在校验结果通过或者失败的话执行对应的操作，用于通过axios添加相应的异步操作
methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {alert('submit!');} else {console.log('error submit!!');return false;}});},
表格组件：
<body><div id="div"><!-- 当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名。可以使用width属性来定义列宽。 --><template><!-- 通过:data将data属性绑定对应的数据模型 --><!-- style表示只占整个页面的一半 --><el-table:data="tableData"style="width: 50%"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table></template></div>
</body>
<script>new Vue({el:"#div",data() {return {// 在开发中这个数据模型一般是通过ajax请求从后台获取的默认为空数组tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1517 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1519 弄'}, {date: '2016-05-03',name: '王小虎',address: '上海市普陀区金沙江路 1516 弄'}]}}});
</script>
导航栏组件
<body><div id="div"><!-- 导航菜单默认为垂直模式，通过mode属性可以使导航菜单变更为水平模式。--horizontal另外，在菜单中通过submenu组件可以生成二级菜单。Menu 还提供了background-color、text-color和active-text-color点击标签的颜色，分别用于设置菜单的背景色、菜单的文字颜色和当前激活菜单的文字颜色。 --><el-menu:default-active="activeIndex2"class="el-menu-demo"mode="horizontal"@select="handleSelect"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"><el-menu-item index="1">处理中心</el-menu-item><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项1</el-menu-item><el-menu-item index="2-4-2">选项2</el-menu-item><el-menu-item index="2-4-3">选项3</el-menu-item></el-submenu></el-submenu><!-- disabled表示禁用 --><el-menu-item index="3" disabled>消息中心</el-menu-item><el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item></el-menu></div>
</body>
<script>new Vue({el:"#div",data() {return {activeIndex: '1',activeIndex2: '1'};},methods: {handleSelect(key, keyPath) {console.log(key, keyPath);}}});
</script>
Element综合案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生列表</title><link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css"><script src="../js/vue.js"></script><script src="../element-ui/lib/index.js"></script><style>.el-header{background-color: #93acb4;}.header-img{width: 100px;margin-top: 20px;}</style>
</head>
<body><div id="div"><el-container><!-- 头部 --><el-header class="el-header"><el-container><div><el-image src="img/export.png" class="header-img"></el-image></div><el-menu:default-active="activeIndex2"mode="horizontal"@select="handleSelect"background-color="#93acb4"text-color="white"active-text-color="#ffd04b"style="margin-left: auto;"><el-menu-item index="1">处理中心</el-menu-item><!-- 二级菜单 --><el-submenu index="2"><template slot="title">我的工作台</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item><el-menu-item index="2-3">选项3</el-menu-item></el-submenu><el-menu-item index="3"><a href="学生列表.html" style="display: contents;" target="_self">首页</a></el-menu-item></el-menu></el-container></el-header><el-container style="height: 580px; border: 1px solid #eee"><!-- 侧边栏区域 --><el-aside width="200px" style="background-color: rgb(238, 241, 246)"><!-- 侧边栏默认打开一个部门default-openeds="['1']" --><el-menu :default-openeds="['1']"><el-submenu index="1"><template slot="title"><i class="el-icon-menu"></i>学工部</template><el-menu-item-group><el-menu-item index="1-1"><i class="el-icon-help"></i>在校学生管理</el-menu-item><el-menu-item index="1-2"><i class="el-icon-help"></i>学生升级/留级</el-menu-item><el-menu-item index="1-3"><i class="el-icon-help"></i>学生就业情况</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>咨询部</template><el-menu-item-group><el-menu-item index="2-1"><i class="el-icon-help"></i>意向学生管理</el-menu-item><el-menu-item index="2-2"><i class="el-icon-help"></i>未报名学生管理</el-menu-item><el-menu-item index="2-3"><i class="el-icon-help"></i>已报名学生管理</el-menu-item></el-menu-item-group></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-menu"></i>教研部</template><el-menu-item-group><el-menu-item index="3-1"><i class="el-icon-help"></i>已有课程管理</el-menu-item><el-menu-item index="3-2"><i class="el-icon-help"></i>正在研发课程管理</el-menu-item><el-menu-item index="3-3"><i class="el-icon-help"></i>新技术课程管理</el-menu-item></el-menu-item-group></el-submenu></el-menu></el-aside><!-- 主区域 --><el-container><el-main><b style="color: red;font-size: 20px;">学生列表</b><div style="float:right"><el-button type="primary">添加学生</el-button></div><el-table :data="tableData" style="width: 100%;"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址" ></el-table-column><el-table-columnlabel="操作"width="180"><el-button type="warning">编辑</el-button><el-button type="danger">删除</el-button></el-table-column></el-table></el-main></el-container></el-container></el-container></div>
</body>
<script>new Vue({el:"#div",data:{tableData:[{date:"2088-08-08",name:"张三",address:"北京市昌平区"},{date:"2088-08-08",name:"李四",address:"北京市昌平区"},{date:"2088-08-08",name:"王五",address:"北京市昌平区"},]}});
</script>
</html>