Vue 快速入门
Vue 介绍
Vue 是一套构建用户界面的渐进式前端框架。只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。特点 易用：在有 HTML CSS JavaScript 的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。
Vue 快速入门
下载和引入 vue.js 文件。 编写入门程序。 视图：负责页面渲染，主要由 HTML+CSS 构成。 脚本：负责业务数据模型（Model）以及数据的处理逻辑。
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>快速入门
</title
>
</head
>
<body
>
<!-- 视图
-->
<div id
="div">
{{msg
}}
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
mag
:"hello vue"
}
});
</script
>
</html
>
Vue 快速入门详解
Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。 选项列表 el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。 data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。 methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。数据绑定 在视图部分获取脚本部分的数据。 {{变量名}}
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>快速入门升级
</title
>
</head
>
<body
>
<!-- 视图
-->
<!-- <div id
="div">
<div
>姓名：
{{name
}}</div
>
<div
>班级：
{{classRoom
}}</div
>
<button onclick
="hi()">打招呼
</button
>
<button onclick
="update()">修改班级
</button
>
</div
> -->
<div id
= "div">
<div
>姓名
:{{name
}}</div
>
<div
>班级
:{{classname
}}</div
>
<button onclick
="hi()">打招呼
</button
>
<button onclick
="update()">修改班级
</button
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
let vm
= new Vue({
el
:"#div",
data
:{
name
:"古巨基",
classname
:"黑马24期"
},
methods
:{
study(){
alert(this.name
+ "正在" + this.classname
+ "好好学习!" );
}
}
})
function hi(){
vm
.study();
}
function update(){
vm
.classname
= "传智播客";
}
</script
>
</html
>
快速入门小结
Vue 是一套构建用户界面的渐进式前端框架。Vue 的程序包含视图和脚本两个核心部分。脚本部分 Vue 核心对象。 选项列表 el：接收获取的元素。 data：保存数据。 methods：定义方法。视图部分 数据绑定：{{变量名}}
Vue 常用指令
指令介绍
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。常用指令
指令演示
文本插值 v-html：把文本解析为 HTML 代码。
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>文本插值
</title
>
</head
>
<body
>
<div id
="div">
<div
>{{msg
}}</div
>
<div v
-html
="msg"></div
>
<div v
-html
="ismg"></div
>
<div v
-html
= "sds"></div
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
msg
:"<b>Hello Vue</b>",
ismg
: "<b> hello V</b>",
sds
:'<b>百度一下</b>'
}
});
</script
>
</html
>
绑定属性 v-bind：为 HTML 标签绑定属性值
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>绑定属性
</title
>
<style
>
.my
{
border
: 1px solid red
;
}
</style
>
</head
>
<body
>
<div id
="div">
<a v
-bind
:href
="url">百度一下
</a
>
<br
>
<a
:href
="url">百度一下
</a
>
<br
>
<div
:class="cls">我是div
</div
>
<br
>
<a
:href
="mycl">点我有惊喜
</a
>
<div
:id
="myid"></div
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
url
:"https://www.baidu.com",
cls
:"my",
mycl
:"https://www.baidu.com",
myid
:"username"
}
});
</script
>
</html
>
条件渲染 v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。 v-else：条件性的渲染。 v-else-if：条件性的渲染。 v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>条件渲染
</title
>
</head
>
<body
>
<div id
="div">
<!-- 判断num的值，对
3取余 余数为
0显示div1 余数为
1显示div2 余数为
2显示div3
-->
<div v
-if="num % 3 == 0">div1
</div
>
<div v
-else-if="num % 3 == 1">div2
</div
>
<div v
-else="num % 3 == 2">div3
</div
>
<div v
-show
="flag">div4
</div
>
<div
>
<div v
-if = "isLogin" >个人中心
</div
>
<div v
-else = "!isLogin">
<a
:href
="myurl">注册
</a
>
<a
:href
="myurl">登录
</a
>
</div
>
</div
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
num
:1,
flag
:false,
isLogin
:false,
myurl
:"asdasdasd"
}
});
</script
>
</html
>
列表渲染 v-for：列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>列表渲染
</title
>
</head
>
<body
>
<div id
="div">
<ul
>
<li v
-for="name in names">
{{name
}}
</li
>
<li v
-for ="n in namess" >
{{n
}}
</li
>
<li v
-for="value in student">
{{value
}}
</li
>
</ul
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
namess
:["张三","李四","王二","麻子"]
}
});
</script
>
</html
>
事件绑定 v-on：为 HTML 标签绑定事件。
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>事件绑定
</title
>
</head
>
<body
>
<div id
="div">
<div
>{{name
}}</div
>
<button v
-on
:click
="change()">改变div的内容
</button
>
<button v
-on
:dblclick
="change()">改变div的内容
</button
>
<button @click
="change()">改变div的内容
</button
>
<button @click
= "dianji()">改变name
</button
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
name
:"黑马程序员",
},
methods
:{
change(){
this.name
= "传智播客"
},
dianji(){
this.name
= "黑马24期"
}
}
});
</script
>
</html
>
表单绑定 v-model：在表单元素上创建双向数据绑定。双向数据绑定 更新 data 数据，页面中的数据也会更新。 更新页面数据，data 数据也会更新。MVVM模型(Model View ViewModel)：是 MVC 模式的改进版 在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。 将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。 ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。
<!DOCTYPE html
>
<html lang
="en">
<head
>
<meta charset
="UTF-8">
<meta name
="viewport" content
="width=device-width, initial-scale=1.0">
<title
>表单绑定
</title
>
</head
>
<body
>
<div id
="div">
<form autocomplete
="off">
姓名：
<input type
="text" name
="username" v
-model
="username" >
<br
>
年龄：
<input type
="number" name
="age" v
-model
="age">
</form
>
<button @click
= "getUsername()">getUsername
</button
>
</div
>
</body
>
<script src
="js/vue.js"></script
>
<script
>
new Vue({
el
:"#div",
data
:{
username
:"张三",
age
:23
},
methods
:{
getUsername(){
console
.log(this.username
)
}
}
});
</script
>
</html
>
常用指令小结
指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。文本插值 v-html：把文本解析为 HTML 代码。绑定属性 v-bind：为 HTML 标签绑定属性值。条件渲染 v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。 v-else：条件性的渲染。 v-else-if：条件性的渲染。 v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。列表渲染 v-for：列表渲染，遍历容器的元素或者对象的属性。事件绑定 v-on：为 HTML 标签绑定事件。表单绑定 v-model：在表单元素上创建双向数据绑定。
Element 基本使用
Element 介绍
Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库。
使用 Element 前提必须要有 Vue。
组件：组成网页的部件，例如 超链接、按钮、图片、表格等等~
Element 官网：https://element.eleme.cn/#/zh-CN
自己完成的按钮
Element 提供的按钮
- 使用Element 之前一定要先导入element-ui包
<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
>
<!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
>
</head
>
<body
>
<button
>我是按钮
</button
>
<br
>
<div id
="div">
<el
-row
>
<el
-button
>默认按钮
</el
-button
>
<el
-button type
="primary">主要按钮
</el
-button
>
<el
-button type
="success">成功按钮
</el
-button
>
<el
-button type
="info">信息按钮
</el
-button
>
<el
-button type
="warning">警告按钮
</el
-button
>
<el
-button type
="danger">危险按钮
</el
-button
>
</el
-row
>
<br
>
<el
-row
>
<el
-button plain
>朴素按钮
</el
-button
>
<el
-button type
="primary" plain
>主要按钮
</el
-button
>
<el
-button type
="success" plain
>成功按钮
</el
-button
>
<el
-button type
="info" plain
>信息按钮
</el
-button
>
<el
-button type
="warning" plain
>警告按钮
</el
-button
>
<el
-button type
="danger" plain
>危险按钮
</el
-button
>
</el
-row
>
<br
>
<el
-row
>
<el
-button round
>圆角按钮
</el
-button
>
<el
-button type
="primary" round
>主要按钮
</el
-button
>
<el
-button type
="success" round
>成功按钮
</el
-button
>
<el
-button type
="info" round
>信息按钮
</el
-button
>
<el
-button type
="warning" round
>警告按钮
</el
-button
>
<el
-button type
="danger" round
>危险按钮
</el
-button
>
</el
-row
>
<br
>
<el
-row
>
<el
-button icon
="el-icon-search" circle
></el
-button
>
<el
-button type
="primary" icon
="el-icon-edit" circle
></el
-button
>
<el
-button type
="success" icon
="el-icon-check" circle
></el
-button
>
<el
-button type
="info" icon
="el-icon-message" circle
></el
-button
>
<el
-button type
="warning" icon
="el-icon-star-off" circle
></el
-button
>
<el
-button type
="danger" icon
="el-icon-delete" circle
></el
-button
>
</el
-row
>
</div
>
</body
>
<script
>
new Vue({
el
:"#div"
});
</script
>
</html
>
Element 快速入门
下载 Element 核心库。引入 Element 样式文件。引入 Vue 核心 js 文件。引入 Element 核心 js 文件。编写按钮标签。通过 Vue 核心对象加载元素。
布局方式
基础布局：将页面分成最多 24 个部分，自由切分。
<!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
-row
{
margin
-bottom
: 20px
;
}
.bg
-purple
-dark
{
background
: red
;
}
.bg
-purple
{
background
: blue
;
}
.bg
-purple
-light
{
background
: green
;
}
.grid
-content
{
border
-radius
: 4px
;
min
-height
: 36px
;
}
</style
>
</head
>
<body
>
<div id
="div">
<el
-row
>
<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
-row
>
<el
-col
:span
="8"><div
class="grid-content bg-purple"></div
></el
-col
>
<el
-col
:span
="8"><div
class="grid-content bg-purple-light"></div
></el
-col
>
<el
-col
:span
="8"><div
class="grid-content bg-purple"></div
></el
-col
>
</el
-row
>
<el
-row
>
<el
-col
:span
="2"><div
class="grid-content bg-purple"></div
></el
-col
>
<el
-col
:span
="6"><div
class="grid-content bg-purple-light"></div
></el
-col
>
<el
-col
:span
="6"><div
class="grid-content bg-purple"></div
></el
-col
>
<el
-col
:span
="6"><div
class="grid-content bg-purple-dark"></div
></el
-col
>
</el
-row
>
</div
>
</body
>
<script
>
new Vue({
el
:"#div"
});
</script
>
</html
>
容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域。
<!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
, .el
-footer
{
background
-color
: #d18e66
;
color
: #
333;
text
-align
: center
;
height
: 100px
;
}
.el
-aside
{
background
-color
: #
55e658;
color
: #
333;
text
-align
: center
;
height
: 580px
;
}
.el
-main
{
background
-color
: #
5fb1f3
;
color
: #
333;
text
-align
: center
;
height
: 520px
;
}
</style
>
</head
>
<body
>
<div id
="div">
<el
-container
>
<el
-aside width
="200px">Aside
</el
-aside
>
<el
-container
>
<el
-header
>Header
</el
-header
>
<el
-main
>Main
</el
-main
>
</el
-container
>
</el
-container
>
</div
>
</body
>
<script
>
new Vue({
el
:"#div"
});
</script
>
</html
>
表单组件
表单：由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。
<!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
>
</head
>
<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
="age">
<el
-input v
-model
="ruleForm.age"></el
-input
>
</el
-form
-item
>
<el
-form
-item label
="请输入住址" prop
="ctiy">
<el
-input v
-model
="ruleForm.ctiy"></el
-input
>
</el
-form
-item
>
<el
-form
-item label
="请选择性别" prop
="region">
<el
-select v
-model
="ruleForm.region" placeholder
="请选择活动区域">
<el
-option label
="男" value
="nan"></el
-option
>
<el
-option label
="女" value
="nv"></el
-option
>
</el
-select
>
</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
:{
ruleForm
: {
name
: '',
region
: '',
age
:"",
ctiy
:''
},
rules
: {
name
: [
{ required
: true, message
: '请输入姓名', trigger
: 'blur' },
{ min
: 3, max
: 5, message
: '长度在 3 到 5 个字符', trigger
: 'blur' }
],
region
: [
{ required
: true, message
: '请选择性别', trigger
: 'change' }
]
}
},
methods
:{
submitForm(formName
) {
this.$refs
[formName
].validate(validfunc
);
},
resetForm(formName
) {
this.$refs
[formName
].resetFields();
}
}
});
function validfunc(valid
) {
if (valid
) {
alert('submit!');
} else {
console
.log('error submit!!');
return false;
}
}
</script
>
</html
>
表格组件
表格：用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。
<!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
>
</head
>
<body
>
<div id
="div">
<template
>
<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
-column
label
="操作"
width
="180">
<el
-button type
="warning">编辑
</el
-button
>
<el
-button type
="danger">删除
</el
-button
>
</el
-table
-column
>
</el
-table
>
</template
>
</div
>
</body
>
<script
>
new Vue({
el
:"#div",
data
:{
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
>
</html
>
导航栏组件
顶部导航栏
<!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
>
</head
>
<body
>
<div id
="div">
<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
>
<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"
});
</script
>
</html
>
侧边导航栏
<!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
>
</head
>
<body
>
<div id
="div">
<el
-col
:span
="6">
<el
-menu
default-active
="2"
class="el-menu-vertical-demo"
@open
="handleOpen"
@close
="handleClose"
background
-color
="#545c64"
text
-color
="#fff"
active
-text
-color
="#ffd04b">
<el
-submenu index
="1">
<template slot
="title">
<i
class="el-icon-location"></i
>
<span
>导航一
</span
>
</template
>
<el
-menu
-item
-group
>
<template slot
="title">分组一
</template
>
<el
-menu
-item index
="1-1">选项
1</el
-menu
-item
>
<el
-menu
-item index
="1-2">选项
2</el
-menu
-item
>
</el
-menu
-item
-group
>
<el
-menu
-item
-group title
="分组2">
<el
-menu
-item index
="1-3">选项
3</el
-menu
-item
>
</el
-menu
-item
-group
>
<el
-submenu index
="1-4">
<template slot
="title">选项
4</template
>
<el
-menu
-item index
="1-4-1">选项
1</el
-menu
-item
>
</el
-submenu
>
</el
-submenu
>
<el
-menu
-item index
="2">
<i
class="el-icon-menu"></i
>
<span slot
="title">导航二
</span
>
</el
-menu
-item
>
<el
-menu
-item index
="3" disabled
>
<i
class="el-icon-document"></i
>
<span slot
="title">导航三
</span
>
</el
-menu
-item
>
<el
-menu
-item index
="4">
<i
class="el-icon-setting"></i
>
<span slot
="title">导航四
</span
>
</el
-menu
-item
>
</el
-menu
>
</el
-col
>
</div
>
</body
>
<script
>
new Vue({
el
:"#div"
});
</script
>
</html
>
Element 小结
Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于 Vue 的桌面端组件库。使用 Element 前提必须要有 Vue。使用步骤
下载 Element 核心库。引入 Element 样式文件。引入 Vue 核心 js 文件。引入 Element 核心 js 文件。借助常用组件编写网页。
常用组件 网页基本组成部分，布局、按钮、表格、表单等等~~~ 常用组件不需要记住，只需要在 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
: #
545c64
;
}
.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
="#545c64"
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" 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)">
<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">
<el
-table
-column prop
="date" label
="日期" width
="140">
</el
-table
-column
>
<el
-table
-column prop
="name" label
="姓名" width
="120">
</el
-table
-column
>
<el
-table
-column prop
="address" label
="地址">
</el
-table
-column
>
<el
-table
-column prop
="age" label
="年龄" >
</el
-table
-column
>
<el
-table
-column
label
="操作"
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
:"北京市昌平区",
age
:"3"
},{
date
:"2088-08-08",
name
:"李四",
address
:"北京市昌平区"
},{
date
:"2088-08-08",
name
:"王五",
address
:"北京市昌平区"
},
]
}
});
</script
>
</html
>
