Vue与Element入门使用

已于 2022-05-05 10:41:40 修改
阅读量3.3k 收藏 8
点赞数 3
分类专栏： 前端 文章标签： vue.js 前端 Element
于 2021-12-11 19:11:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45477086/article/details/121877746
版权

Vue：

  • Vue是一套构建用户界面的渐进式前端框架。
  • 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。
  • 视图：负责页面渲染，主要由HTML+CSS构成。
  • 脚本：负责业务数据模型（Model）以及数据的处理逻辑。

特点：

  • 易用：在有HTMLCSSJavaScript的基础上，快速上手。
  • 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
  • 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。
Vue的快速入门：

开发步骤：

  1. 下载和引入vue.js文件。
  2. 编写入门程序。
<!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>
</body>
<script src="vue.js"></script>
<script>
    // 脚本
    let vm = new Vue({
        el: "#div",
        data: {
            name: "韩信",
            classRoom: "王者峡谷"
        },
        methods: {
            study() {
                alert(this.name + "正在" + this.classRoom + "被追杀!");
            }
        }
    });

    //定义打招呼方法
    function hi() {
        vm.study();
    }

    //定义修改职业
    function update() {
        vm.classRoom = "中单";
    }
</script>
</html>
Vue快速入门详解：

Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。

let vm = new Vue({
	选项列表;
});

选项列表：

  • el选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
  • data选项：用于保存当前Vue对象中的数据。在视图中声明的变量需要在此处赋值。
  • methods选项：用于定义方法。方法可以直接通过对象名调用，this代表当前Vue对象。

数据绑定：

在视图部分获取脚本部分的数据：{{变量名}}

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>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</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>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my"
        }
    });
</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>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false
        }
    });
</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>
        <!--name in names  的意思就是 遍历names赋值给name-->
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["张三","李四","王五"],
            student:{
                name:"张三",
                age:23
            }
        }
    });
</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>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员"
        },
        methods:{
            change(){
                this.name = "传智播客"
            }
        }
    });
</script>
</html>
表单绑定：

  • 表单绑定
    v-model：在表单元素上创建双向数据绑定。

  • 双向数据绑定
    更新data数据，页面中的数据也会更新。
    更新页面数据，data数据也会更新。

  • MVVM模型(ModelViewViewModel)：是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>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</script>
</html>

Element 基本使用

  • Element：网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。

  • 使用Element前提必须要有Vue。

  • 组件：组成网页的部件，例如超链接、按钮、图片、表格等等~

  • Element官网：https://element.eleme.cn/#/zh-CN

Element快速入门：

开发步骤：

  1. 下载 Element 核心库。
  2. 引入 Element 样式文件。
  3. 引入 Vue 核心 js 文件。
  4. 引入 Element 核心 js 文件。
  5. 编写按钮标签。
  6. 通过 Vue 核心对象加载元素。
<!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="vue.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>

<body>¬
<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>
基础布局：

将页面分成最多 24 个部分，自由切分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
    <style>
        .el-row {
            /* 行距为20px */
            margin-bottom: 20px;
        }

        .bg-purple-dark {
            background: red;
        }

        .bg-purple {
            background: blue;
        }

        .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">
    <title>Title</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>
</head>
<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>
<body>
<div id="div">
    <el-container>
        <el-header>头部区域</el-header>
        <el-container>
            <el-aside width="200px">侧边栏区域</el-aside>
            <el-container>
                <el-main>主区域</el-main>
                <el-footer>底部区域</el-footer>
            </el-container>
        </el-container>
    </el-container>
</div>
</body>
<script>
    new Vue({
        el: "#div"
    });
</script>
</html>
表单组件：

由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="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="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: {
            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">
    <title>Title</title>
    <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
    <script src="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="vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>

</head>
<body>
<div id="div">
    <div class="line"></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="vue.js"></script>
    <script src="../element-ui/lib/index.js"></script>

</head>
<body>
<div id="div">
    <el-col :span="3">
        <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>

综合案例 学生列表：

头部区域的实现：

实现思路

  • 头部效果实现。
  • 侧边栏和主区域效果实现。
<!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>
  </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>
侧边栏区域的实现：
<!-- 侧边栏区域 -->
<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-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
                             label="操作"
                             width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
            </el-table-column>
        </el-table>
    </el-main>
</el-container>

在vue中定义data

<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>
itzhuzhu.
关注
  • 3
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue+Element 项目实战（一）
不愿意做鱼的小鲸鱼の博客
02-20 2万+
项目所用到的资源 点我下载 今日目标 初始化项目 基于Vue技术栈进行项目开发 使用Vue的第三方组件进行项目开发 理解前后端分离开发模式 1.电商业务概述 客户使用的业务服务：PC端，小程序，移动web，移动app 管理员使用的业务服务：PC后台管理端。 PC后台管理端的功能：管理用户账号（登录，退出，用户管理，权限管理），商品管理（商品分类，分类参数，商品信息，订单），数据统计 电商后台...
vue Element
qq_51476492的博客
03-24 3479
Vue Element Vue框架是对JS的封装，并没有封装进去CSS样式。Vue Element是基于Vue的框架，它封装了CSS样式，使用Vue需要样式的话就是用它。 官网（有很多可以利用的资源）：https://element.eleme.cn/#/zh-CN 项目实例： （1）首先要下载element-ui.js包 命令 npm install --save element-ui (2)修改main.js文件 （3）从官网上找到需要用到的组件的代码，赋值到项目中 效果如下： ....
【Element入门】3、Element UI 表单组件详解
最新发布
weixin_52938153的博客
05-22 1403
Element UI 是一款基于 Vue.js 的高效、简洁的前端组件库，专为开发者和设计师提供丰富的 UI 组件。它不仅易于上手，还具备高度的可定制性，能够满足多样化的项目需求。通过使用 Element UI，开发者可以快速构建高质量的现代 Web 应用，实现优雅且一致的用户界面，从而显著提升开发效率和用户体验。本系列文章深入探讨了 Element UI 的各项功能及最佳实践，帮助你在实际项目中更好地应用和优化这一强大的工具。
Vue中Element的使用
s_9527_s的博客
02-23 7103
这里介绍cdn和npm的方式。 一. cdn的方式 1.引入cdn <!-- 引入样式 --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <!-- 引入组件库 --..
Vue+Element-UI入门
qq_45660133的博客
12-05 5442
1.2 Vue 3.0 根据下面图片选择配置：空格是选择，回车是确认！！ 2 导入插件 2.1 Element-UI 插件 在main.js 里面引用element-ui 组件 2.2 Axios 2.2.1 简单 创建utils文件在api里面封装自己需要 get post put delete请求 2.2.2 封装 创建utils文件夹 request.js 创建api文件夹 login.js data为post请求的携带信息 params是get请求携带的参数 2.3 Vuex 状态管理模式
Vue引入并使用Element-UI组件库的两种方式
见证自己学习,成长的记录
01-10 1万+
在开发的时候，虽然我们可以自己写css或者js甚至一些动画特效，但是也有很多开源的组件库帮我们写好了。我们只需要下载并引入即可。vue和element-ui在开发中是比较般配的，也是我们开发中用的很多的，下面就介绍下如何在eue项目中引入element-ui组件库其他的组件库使用也是和上述步骤大同小异的。
vue-element-admin. vue入门教程源码
05-08
在vue-element-admin中，axios 用于与后端服务器通信，获取或提交数据。 7. **Webpack**：Vue 项目通常使用 Webpack 进行模块打包。Webpack 是一个强大的静态资源管理工具，可以将 Vue 组件、样式、图片等资源编译...
HelloAbp:ABP vNext + vue-element-admin入门级项目实战
04-13
HelloAbpABP vNext + vue-element-admin入门级项目实战运行环境：.netcore 3.1、sqlserver、nodejs、npm修改Xhznl.HelloAbp.HttpApi.Host、Xhznl.HelloAbp.DbMigrator项目的数据库连接字符串运行/run/db-migrator....
VUE3+Element-Plus入门代码
12-27
Vue3和Element-Plus是现代前端开发中的两个关键组件，Vue3是Vue.js框架的最新版本，它带来了许多性能优化和新特性，而Element-Plus则是一个基于Vue3的高质量UI组件库，提供了丰富的界面元素供开发者使用。...
spring-boot-vue:spring-boot-vue-element入门实战
05-14
Spring Boot Vue Element入门实战(完结)最近给朋友做一个大学运动会管理系统，用作教学案例，正好自己也在自学VUE，决定用spring boot vue做一个简单的系统。vue这个前端框架很火，他和传统的Jquery 编程思路完全不...
非常棒的 Vue3 Element 系统解决方案 vue3快速入门、vue3实用入门到熟练实例
08-26
非常棒的 Vue3 Element 统解决方案 vue3快速入门、vue3实用入门到熟练实例 学习了vue3官网、看了视频好像感觉知道了，但实际又不会建项目。这个项目就是上你从入门到熟练的实例。 该方案作为一套多功能的后台框架...
Vue+ele后台模板
03-05
高效的Vue+ElementUI后台模板，
html+CSS+js+VUE+element+java后台项目示例
08-20
包含html-CSS-javascript-vue-element等多项基础知识课件详解，为web开发提供基础技术。并包含一个web项目的示例代码，利于掌握Java后台和前端的程序设计流程。
vue+Element-UI 前端框架
02-15
有右键、栏目动态、封装http、表单验证，刷新状态栏为当前页面
UI素材|最全面的移动端 UI KIT 模板
awayaya1的博客
10-07 966
什么是UI组件 UI 设计组件（UI KIT），直译过来就是用户界面成套元件，是界面设计常用控件或元件，「组」是设计元素的组合方式，「件」由不同的元件组成。 组件的优势 1、保证一致性 Consistency 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。 2、反馈用户 Feedback 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；页面反馈：操作后，通过页面元素的变
1-element-ui创建项目
chencaw的专栏
05-11 1128
1、element-ui创建项目 vue create chenelementdemo 2、测试是否安装好 npm run serve
Element基本使用 (Vue项目打包部署)
xian2h的博客
01-20 1173
简要介绍Element的基本使用，以及Vue结合Element进行前端开发，以及前端项目的打包部署。
超详细.Vue源码解析之new Vue()初始化vue实例
weixin_43936284的博客
08-01 4573
触发原型上的_init函数 _init函数做了什么？？ 一、给vue实例一个递增的_uid 二、vm._isVue=true 三、配置处理 mergeOptions Ⅰ、resolveConstructorOptions函数 mergeOptions函数的两个参数分别为resolveConstructorOptions(vm.constructor)的返回值和options配置项所以我们先看看resolveConstructorOptions函数返回................
VUE框架 详解入门
热门推荐
晴天的博客
03-19 2万+
vue框架快速入门到实操
Vue-element-admin v4.4 完整指南：从入门到实战
Vue-element-admin v4.4 指南是一份详尽的文档，专为使用 Vue.js 和 Element-UI 构建管理后台系统的人士设计。这份文档涵盖了从基础配置到高级特性的深入讲解，旨在帮助开发者快速上手并掌握这个流行的前端框架。 *...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

itzhuzhu.

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值