Vue&Element

最新推荐文章于 2023-02-25 18:17:51 发布
最新推荐文章于 2023-02-25 18:17:51 发布
阅读量193 收藏 2
点赞数
文章标签： vue html javascript web css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xglfire/article/details/107040505
版权

Vue&Element

Vue 快速入门

Vue 介绍

  • Vue 是一套构建用户界面的渐进式前端框架。
  • 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。
  • 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。
  • 特点
    易用：在有 HTML CSS JavaScript 的基础上，快速上手。
    灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
    性能：20kb min+gzip 运行大小、超快虚拟 DOM、最省心的优化。

Vue 快速入门

  1. 下载和引入 vue.js 文件。
  2. 编写入门程序。
    视图：负责页面渲染，主要由 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:{
            msg:"hello vue"
        }
    });
</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>
</head>
<body>
    <!-- 视图 -->
    <div id="div">
        <div>姓名:{{name}}</div>
        <div>班级:{{classRoom}}</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:"张三",
            classRoom:314
        },
        methods:{
            study(){
                alert(this.name+"正在"+this.classRoom+"好好学习");
            }
        }
    });

    //定义打招呼方法
    function hi(){
        vm.study();
    }
    //定义修改班级方法
    function update(){
        vm.classRoom = 520;
    }
</script>
</html>

Vue 快速入门详解

  • Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
    在这里插入图片描述
  • 选项列表
    el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
    data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
    methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
  • 数据绑定
    在视图部分获取脚本部分的数据。
    {{变量名}}
  • 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>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>hello vue</b>"
        }

    });
</script>
</html>

效果:
在这里插入图片描述

  • 绑定属性
    v-bind：为 HTML 标签绑定属性值。

普通形式

<a v-bind:href="url">百度一下</a>

简写形式

<a :href="url">百度一下</a>

代码:

<!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">num=0</div>
        <div v-else-if="num % 3 == 1">num=1</div>

        <div v-else="num % 3 == 2">num=2</div>

        <div v-show="flag">v-show</div>

        <div v-if="isLogin">已登录</div>
        <div v-else="!isLogin">
            <div>请登录</div>
            <button @click="login()">点击登录</button>
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:true,
            isLogin:false
        },
        methods:{
            login(){
               this.isLogin=true; 
            }
        }
    });
</script>
</html>
  • 列表渲染
    v-for：列表渲染，遍历容器的元素或者对象的属性。
    写在对应元素上即可遍历生成多个该元素
<li v-for="name in names">{{name}}</li>

代码:

<!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 v-for="name in names">
            {{name}}
        </div>
        <div v-for="stu in student">
            {{stu}}
        </div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            names:["zhangsan","lisi","wangwu"],
            student:{
                name:"zhangsan",
                age:23
            }
        }
    })
</script>
</html>

效果:
在这里插入图片描述

  • 事件绑定
    v-on：为 HTML 标签绑定事件
    1.冒号/@之后的名称是事件名称
    2.值：是vue对象中methods的方法
<button v-on:click="change()">改变div的内容</button>

<button @click="change()">改变div的内容</button>

代码:

<!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">
        {{name}}<br>

        <button @click="tengxun()">腾讯</button>
        <button @click="ali()">阿里</button>
        <button @click="baidu">百度</button>

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"BAT"
        },
        methods:{
            tengxun(){
                this.name="腾讯"
            },
            ali(){
                this.name="阿里"
            },
            baidu(){
                this.name="百度"
            }
        }
    })
</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>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        }
    });
</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 快速入门

  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="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 常用组件

布局方式
  • 基础布局：将页面分成最多 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 {
            /* 行距为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">
    <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-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">
    <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="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">
    <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。
  • 使用步骤
    1. 下载 Element 核心库。
    2. 引入 Element 样式文件。
    3. 引入 Vue 核心 js 文件。
    4. 引入 Element 核心 js 文件。
    5. 借助常用组件编写网页。
  • 常用组件
    网页基本组成部分，布局、按钮、表格、表单等等~~~
    常用组件不需要记住，只需要在 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
                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:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"李四",
              address:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"王五",
              address:"北京市昌平区"
            },
          ]
        }
    });
</script>
</html>
熊熊fire
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Asp.net+Vue+EmelentUI的实现(一)框架搭建
学而时习之
05-06 3万+
vue对于web端的开发优势是很明显的，特别是单页应用，响应、数据等都很明显，而且开发效率也高，又有很多资料可查、有社区的支持。但vue对于开发较大的项目时，则会显得笨重，因为编译成了单页应用，非常臃肿，首次加载变的很慢。而且在使用VS来开发时，虽然VS可以创建vue的项目，但是基于node.js来编译的，不好操作，而且经常出现卡死现象，于是就考虑有没有其他的方式来应用vue。 vue本质上是一...
Vue+ElementUI纯前端技术实现对表格数据的增删改查
老婆就是要败家
08-22 9276
一、页面结构 分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ; style 也可以定义在其中, 通过id选择器 ,还有类选择器进行 定义 script 标签体中引入的是一些常见的组件库 LIink 标签体中引入的是一些CSS样式 body中一般是书写页面的结构 , 也就是定义一个DIV , 然后在其中书写书写页面中的各种元素 最后就是script 这里首先通过ID选中DIV , new Vue({ }); 通过el 选中id
前端 cdn 方式使用 Vue + element-ui
Steve_v的博客
02-25 2213
【代码】前端 cdn 方式使用 Vue + element-ui。
Element基本使用
Major_S的博客
01-31 1373
Spring注解
vue中cdn引入element-ui 报错“vue-router.min.js:6 ReferenceError: ElementUI is not defined“解决
qq_39704803的博客
04-07 6050
index.html页面引入 <link rel="stylesheet" href="plug/element-ui/theme-chalk/index.css" rel="external nofollow" > <script src="js/vue.min.js"></script> <script src="js/vue-router.min.js"></script> <script src=
element-ui小白离线测试组件怎么引入js和css
lichao_qibu的博客
06-08 1911
学习目标： element-ui离线css，js文件的使用 学习内容： css,js的引入 学习产出： 在浏览器种直接访问路径，把路径访问结果复制全部，保存到本地并以 .js或 .css位文件后缀名 <!-- import CSS --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <!-- import Vue before Element --&g
青橙商城-day2 Element
QAQ
04-18 148
1.箭头函数
基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序
10-10
RuoYi-Vue 全新 Pro 版本，...基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序，支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城等功能
VUE&Element&综合案例1
08-03
VUE&Element 综合案例1 本文档将详细介绍 VUE 框架的基础知识，包括 VUE 概述、快速入门、条件判断指令等内容。同时，文章还将介绍 VUE 中的双向绑定思想、MVVM 模式、插值表达式、指令作用等重要概念。 VUE 概述 ...
Vue&Element学习资源，包含笔记，PPT，课程源码等完美资料
最新发布
06-11
Vue&Element学习资源，包含笔记，PPT，课程源码等完美资料Vue&Element学习资源，包含笔记，PPT，课程源码等完美资料Vue&Element学习资源，包含笔记，PPT，课程源码等完美资料Vue&Element学习资源，包含笔记，PPT，...
ElementUI的核心js.zip
09-16
网站快速成型工具，是饿了么公司前端开发团队提供的一套基于Vue的网站组件库，使用Element前提必须要有Vue
element-ui.rar element-ui核心库压缩包
12-20
element-ui.rar element-ui核心库压缩包
前端使用for循环展示所有后端数据
逍遥游的博客
03-03 1098
@{ this.Layout = null; } <title>IAS - PMTC - Molding</title> <script src="~/Scripts/vue.min.js"></script> <script src="~/Scripts/ElementUI/element-ui.js"></script> <link rel="stylesheet" href="~/Content/ElementUI...
element-ui核心库压缩包免费下载
m0_64626272的博客
12-20 768
element-ui.rarelement-ui核心库压缩包-Javascript文档类资源-CSDN下载
Vue与Element
weixin_44799642的博客
06-26 3127
1、Vue 快速入门 1.1、Vue的介绍 Vue是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 1.2、Vue的快速入门 开发步骤 下载和引入vue.js文件。 编写入门
Element的使用
учёба
10-24 4064
Element :网站快速成型工具。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。 使用Element前提必须要有Vue。 组件:组成网页的部件,例如超链接、按钮、图片、表格等等~ Element官网: https://element.eleme.cn/#/zh-CN 效果： Element入门 下载Element核心库。 引入element-ui这个文件夹，直接将这个文件夹复制到过程中 引入Element样式文件。 <link rel="stylesheet" hre
2022-02-02-Vue和Element
正在努力~
08-17 182
Vue和Element
elementUI组件库文件下载的问题
Memory的博客
03-21 2550
使用下面的网址查找想要的文件 右上角可以选择版本 https://unpkg.com/browse/element-ui@2.13.0/ 然后复制网址去掉browse就可以下载该文件了 例如下载字体 找到文件 复制网址 https://unpkg.com/browse/element-ui@2.13.0/lib/theme-chalk/fonts/element-icons.ttf 去...
vue-electron框架使用介绍
xiaxia0705的博客
09-05 4263
vue-electron框架搭建、与后端对接配置、打包配置，开发打包过程中遇到的问题分享
vue3 element
03-28
Vue 3 Element is a collection of UI components for Vue.js 3, built on top of the Element Plus design system. It provides a set of well-designed, reusable, and easy-to-use UI components that can help ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值