VUE基础-概念篇
...大约 15 分钟
VUE基础-概念篇
1.Vue基本概念
Vue是一套构建用户界面的渐进式前端框架。它只关注视图层，通过尽可能简单的API来实现响应数据的绑定和组合的视图组件，可以很方便的与其它库或已有项目整合。
【1】Vue特点
- 易用：在已有HTML、CSS、JavaScript的基础上可以快速上手
- 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用
- 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化
【2】Vue开发说明
简单的Vue样例开发：
1）下载并引入vue.js文件
2）编写vue程序（由视图、脚本两部分构成）：视图（html、css）负责页面渲染；脚本负责业务数据模型和数据的处理逻辑
3）参考样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01-Vue基础样例</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
{{msg}}
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
new Vue({
el:"#div",
data:{
msg:"Hello Vue"
}
});
</script>
</html>
【3】vue核心内容介绍
vue核心对象
let vm = new Vue({
// vue选项构建列表;
});
核心选项列表
- el: 用于接收获取到的页面元素
- data: 用于保存vue对象中的数据(双向绑定概念)，在视图中声明的变量需要在此处赋值
- methods: 用于定义方法(方法可通过对象名调用，this指代当前Vue对象)
数据的双向绑定v-model
- 在视图部分可以通过获取脚本部分的数据
- 在脚本中也可通过js修改变量值，该值的绑定在视图上
参考案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>02-Vue核心内容样例</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<div>消息：{{msg}}</div>
<button onclick="say()">say hi</button>
<button onclick="update()">消息变更</button>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
msg:"Hello Vue！" // 视图中的变量在此处进行初始化
},
methods:{
hi(){
alert(this.msg);
}
}
});
// 方法定义
function say(){
// 可调用vue对象中定义的method
vm.hi();
}
// 消息变更方法
function update(){
vm.msg = "滴滴滴......";
}
</script>
</html>
2.Vue常用指令
【1】指令概念
❓什么是指令
指令是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for
使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式
⚡常用指令
| 指令 | 作用 |
|---|---|
| v-html | 将文本解析为html代码 |
| v-bind | 为html标签绑定属性值 |
| v-if、v-else、v-else-if | 条件性地渲染某个元素 |
| v-show | 根据条件选择性展示某元素（切换的是display的值） |
| v-for | 列表渲染，遍历容器额度元素或者对象属性 |
| v-on | 为html标签绑定事件 |
| v-model | 在表单元素上创建双向数据绑定 |
【2】常用指令参考案例
📌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>03-Vue常用指令样例（v-html）</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<div>消息：{{msg}}</div>
<div v-html="msg"></div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
msg:"<h1>Hello Vue</h1>" // 视图中的变量在此处进行初始化
}
});
</script>
</html>
📌v-bind
基本概念
为html标签绑定属性值：
例如给a标签指定href属性、给元素指定class内容
参考样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>04-Vue常用指令样例（v-bind）</title>
<style>
.custom{
border: 1px solid yellow;
}
</style>
</head>
<body>
<!-- 视图 -->
<div id="div">
<a v-bind:href="url">链接跳转</a>
<br>
<a :href="url">链接跳转</a>
<br>
<div :class="cls">自定义样式</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
url:"https://www.baidu.com",
cls:"custom"
}
});
</script>
</html>
📌v-if系列
基本概念
条件性地渲染某个元素
v-if、v-else-if、v-else
参考样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>05-Vue常用指令样例（v-if系列）</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<div v-if="option == 1">消息1</div>
<div v-else-if="option == 2">消息2</div>
<div v-else="option == 3">消息3</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
option:"1" // 默认option指定
}
});
</script>
</html>
📌v-show
基本概念
根据条件选择性展示某元素（切换的是display的值），与v-if类似用于条件渲染的场景
参考样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>06-Vue常用指令样例（v-show）</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<div v-show="option">hello vue</div>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
option: true // 默认option指定
}
});
</script>
</html>
| v-show | |
|---|---|
| v-for | 列表渲染，遍历容器额度元素或者对象属性 |
| v-on | 为html标签绑定事件 |
| v-model | 在表单元素上创建双向数据绑定 |
📌v-for
基本概念
列表渲染，遍历容器额度元素或者对象属性
参考样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>07-Vue常用指令样例（v-for）</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<ul>
<!-- 数组列表遍历 -->
<li v-for="name in msgList">
{{name}}
</li>
<!-- JSON数据列表遍历(对象数据属性遍历) -->
<li v-for="value in person">
{{value}}
</li>
<!-- JSON数据列表遍历 -->
<li v-for="stu in stuList">
{{stu.sno}}-{{stu.sname}}
</li>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
msgList: ["消息1","消息2","消息3"],
person:{
name: "haha",
age: "18",
birthday: "1970-01-01"
},
stuList:[
{ sno: 1001,sname:"stu1001" },
{ sno: 1002,sname:"stu1002" },
{ sno: 1003,sname:"stu1003" }
]
}
});
</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>08-Vue常用指令样例（v-on）</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<ul>
<div>{{name}}</div>
<button v-on:click="change()">点击时改变</button>
<button v-on:dblclick="change()">双击时改变</button>
<button @click="change()">改变div的内容</button>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
name:"init"
},
methods:{
change(){
this.name = "hello vue"
}
}
});
</script>
</html>
📌v-model
基本概念
表单绑定：v-model：在表单元素上创建双向数据绑定。
双向数据绑定：更新data数据，页面中的数据会更新；更新页面数据，data数据也会更新
MVVM模型(ModelViewViewModel)：MVC模式改进版
在前端页面中，Model（JS对象）+View（页面）组合作到最大程度分离实现，将Model和View关联起来的就是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>09-Vue常用指令样例（v-model）</title>
</head>
<body>
<!-- 视图 -->
<div id="div">
<ul>
<!-- 表单数据绑定 -->
<form autocomplete="off">
姓名：<input type="text" name="sname" v-model="stu.sname">
<br>
学号：<input type="number" name="sno" v-model="stu.sno">
</form>
<button onclick="submitData()">提交</button>
</ul>
</div>
</body>
<script src="../js/vue.js"></script>
<script>
// 脚本
let vm = new Vue({
el:"#div",
data:{
stu:{
sname: "stu1001",
sno: "1001"
}
}
});
function submitData(){
alert("提交信息:"+vm.stu.sname+";"+vm.stu.sno);
}
</script>
</html>
3.Element
【1】Element介绍
Element介绍
- Element（网站快速成型工具）：是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，其使用前提依托于Vue
- 组件：组成网页的部件，例如超链接、按钮、图片、表格等等，Element提供了各式各样丰富的组件内容
Element使用（需结合vue使用）
1.下载Element、Vue的核心库、js、css样式文件
2.在项目中引入相关文件
3.编写程序借助Vue对象加载元素
参考基础样例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>10-Element+Vue组合基础样例.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/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>
// 脚本
let vm = new Vue({
el:"#div",
data:{
}
});
</script>
</html>
【2】布局
📌基础布局
将页面分成最多 24 个部分，自由切分（概念类似于bootstrap的栅栏概念）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11-Element布局（基础布局）.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/element-ui/lib/index.js"></script>
<style>
.el-row {
/* 行距为20px */
margin-bottom: 20px;
}
.bg-purple-dark {
background: yellow;
}
.bg-purple {
background: red;
}
.bg-purple-light {
background: green;
}
.grid-content {
/* 边框圆润度 */
border-radius: 4px;
/* 行高为36px */
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="6"><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-light"></div></el-col>
</el-row>
<el-row>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
<el-col :span="4"><div class="grid-content bg-purple-light"></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>12-Element布局（容器布局）.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/element-ui/lib/index.js"></script>
<style>
.el-header, .el-footer {
background-color: #d32e66;
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-header>header content</el-header>
<el-container>
<el-aside width="200px">sidebar content</el-aside>
<el-container>
<el-main>main content</el-main>
<el-footer>footer content</el-footer>
</el-container>
</el-container>
</el-container>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
【3】组件
Element组件的应用不需要特殊记忆，只需要理解并应用即可。针对组件的应用和细节可参考element官网说明进行使用（注意版本问题）
📌表单
表单组件由输入框、下拉列表、单选框、多选框等控件组成，可用于收集、校验、提交数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>13-Element表单.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/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="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="1">---</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:{
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>
</html>
📌表格
表格组件用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>14-Element表格.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/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 弄'
}]
}
});
</script>
</html>
📌导航栏（顶部、侧边）
（1）顶部导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>15-Element导航栏（顶部）.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/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="#" target="_blank">后台管理</a></el-menu-item>
</el-menu>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
（2）侧边导航栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>16-Element导航栏（侧边栏）.html</title>
<!-- 引入Element、Vue核心文件 -->
<link rel="stylesheet" href="../plugins/element-ui/lib/theme-chalk/index.css">
<script src="../js/vue.js"></script>
<script src="../plugins/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>导航1</span>
</template>
<el-menu-item-group>
<template slot="title">组别1</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">导航2</span>
</el-menu-item>
<el-menu-item index="3" disabled>
<i class="el-icon-document"></i>
<span slot="title">导航3</span>
</el-menu-item>
<el-menu-item index="4">
<i class="el-icon-setting"></i>
<span slot="title">导航4</span>
</el-menu-item>
</el-menu>
</el-col>
</div>
</body>
<script>
new Vue({
el:"#div"
});
</script>
</html>
Powered by Waline v3.1.3