23-Vue和Element基础

最新推荐文章于 2022-12-06 13:48:18 发布
最新推荐文章于 2022-12-06 13:48:18 发布
阅读量283 收藏
点赞数
分类专栏： JavaWeb
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43296313/article/details/112613352
版权

Vue快速入门

Vue是一套构建用户界面的渐进式的前端框架

Vue的程序包含视图和脚本俩个核心部分

1.入门步骤

-1 导入js文件
-2 视图部分
-3 脚本部分

2.快速入门

<body>
    <!--视图-->
    <div id="div">
        {{msg}}
    </div>

<script src="../js/vue.js"></script>
<script>
    <!--脚本-->
    new Vue({
        el:"#div",   //表示Vue对象接管的区域
        data:{      //data用来封装变量，这里面定义的变量都可以使用vue对象来获
            msg:"hello Vue"
        }
    });
</script>
</body>

3.快速入门详解

  • Vue核心对象：每一个Vue程序都是从一个Vue核心对象开始的(注意V需要大写)

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

  • 选项列表

    • el选项：用于接收获取到页面中的元素(根据常用的选择器获取)
    • data选项：用来在vue中定义变量，这些变量的值将来会被展示到页面上
    • methods选项：用于定义方法，方法可以直接通过对象名调用，this代表当前Vue对象

  • 数据绑定

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

4.入门案例升级版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>入门案例升级</title>
</head>
<body>
    <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>

<script src="../js/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>
</body>
</html>

Vue常用指令

1.常用指令介绍

在这里插入图片描述

2.v-html指令

作用：设置标签的内容体，浏览器会解析内容体中的html代码。

<body>
    <div id="div">
        <div>{{msg}}</div>
        <!--需求2：使用指令展示数据，类似于innerHTML，浏览器会解析html标签-->
        <div v-html="name"></div>
    </div>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"百度一下",
            name:"<b>黑马</b>"
        }
    });
</script>
</body>

3.v-bind指令【重点】

作用：{{}}插值表达式只能用来操作内容体，不能用来操作属性，如果需要将vue中定义的变量值复制给标签的属性，那就就需要使用v-bind指令,也可以简写成[:属性名=“变量名”]。

<body>
<div id="div">
    <a v-bind:href="url">百度一下</a>
    <br>
    <!--简写-->
    <a :href="url">百度一下</a>
    <br>
    <!--动态绑定class属性-->
    <div :class="cls">黑马</div>
    <img :src="imgUrl">
    <br>
    <!--点击切换图片-->
    <input type="button" value="点你妹" @click="show()">
</div>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            url:"http://www.baidu.com",
            cls:"my",
            imgUrl:"../04-综合案例/img/qq_btn.jpg"
        }
        methods:{
            show:function () {
                this.imgUrl="../04-综合案例/img/logo.jpg";
            }
        }
    });
</script>
</body>

4 v-if、v-else-if、v-else、v-show指令

v-if、v-else-if、v-else作用：起到判断作用，符合条件的标签才展示，否则就没有标签。

v-show作用：是否展示标签，本质是操作display样式，标签是存在的只不过被隐藏了。

<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>

5 v-for指令[重要]

作用：用来遍历容器或者对象展示到页面上

<body>
    <div id="app">
        <div v-for="name in names">{{name}}</div>
        <hr>
        <input type="button" @click="show()" value="点我啊">
        <table>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="student in students">
                <td>{{student.id}}</td>
                <td>{{student.name}}</td>
                <td>{{student.age}}</td>
            </tr>
        </table>
    </div>

<script src="../js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            names:["张三","李四","王五"],
            students:[]
        },
        methods:{
            show:function () {
                this.students=[
                    {id:"1",name:"张三",age:"21"},
                    {id:"2",name:"李四",age:"22"},
                    {id:"3",name:"王五",age:"23"}
                ];
            }
        }
    });
</script>
</body>

6 v-on指令【重点】

作用：给标签绑定事件，v-on:click="“或者@click=”"都可以

<body>
  <div id="div">
    <!--需求1：展示vue中定义的name值-->
    <div>{{name}}</div>
    <!--需求2：传统方式绑定事件修改name的值-->
    <button onclick="changeName()">改变div的内容</button>

    <!--需求3：使用vue的方式绑定事件,要执行的方法需要定义在methods里面-->
    
    <button v-on:click="change()">改变div的内容</button>
    
    <!--需求4：绑定事件的简写方式,使用较多-->
    <button @click="change()">改变div的内容</button>
  </div>
</body>
<script src="js/vue.js"></script>
<script>
  let vue=new Vue({
    el:"#div",
    data:{
      name:"胡广"
    },
    methods:{
      change:function(){
          this.name="胡⛰️⛰⛰️⛰️"
      }
    }
  });
  function changeName() {
    vue.name="胡冰冰";
  }
</script>

7 v-model指令【重点】

作用：用来给表单中的数据进行双向绑定。

双向绑定：vue中变量的值发生变量了，页面就数据就变化。如果页面数据发生了变量，那么vue的变量值也跟着发生变量，这就是双向数据绑定。

在这里插入图片描述

<body>
  <div id="div">
    <!--需求2：展示填写或者选中的内容-->
    <div>输入的姓名是：{{user.username}}</div>
    <div>输入的年龄是：{{user.age}}</div>
    <div>选择的性别是：{{user.gender}}</div>
    <div>选择的爱好是：{{user.hobbies}}</div>

    <form>
      <!--需求1：将表单和vue进行双向数据绑定-->
      姓名：<input type="text" name="username" v-model="user.username"><br>
      年龄：<input type="number" name="age" v-model="user.age"><br>

      <!--当radio的value值和绑定的数据值相等，就表示选中-->
      性别：<input type="radio" name="gender" value="man" v-model="user.gender">男
      <input type="radio" name="gender" value="woman" v-model="user.gender">女<br>

      爱好：<input type="checkbox" name="hobbies" value="sing" v-model="user.hobbies">唱
      <input type="checkbox" name="hobbies" value="dance" v-model="user.hobbies">跳
      <input type="checkbox" name="hobbies" value="rap" v-model="user.hobbies">rap
      <input type="checkbox" name="hobbies" value="basketball" v-model="user.hobbies">篮球<br>
      <!--需求3：点击按钮，通过ajax把表单数据发送给服务器-->
      <input type="button" value="提交信息" @click="sendData()">

    </form>
  </div>
</body>
<script src="js/vue.js"></script>
<script>
  new Vue({
    el:"#div",
    data:{
      user:{
        username:"jack",
        age:20,
        gender:"woman",
        hobbies:["sing","dance"]
      }
    },
    methods:{
      sendData(){
        console.log("提交表单参数到服务器："+this.user);
      }
    }
  });
</script>

ElementUI基本使用

1 ElementUI介绍

​ 网站快速成型工具。是 饿了么公司 前端开发团队提供的一套基于Vue的网站组件库。Element官网：https://element.eleme.cn/#/zh-CN

2 入门案例【掌握】

【第一步】：将ElementUI相关的资源复制到mudule中

【第二步】：在页面引入css和js相关文件

<!--引入ElementUI的css文件-->
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<!--引入vue和ElementUI的js文件-->
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>

【第三步】：参考ElementUI官方提供的组件，复制代码即可展示

<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>

3 基础布局【了解】

Layout 布局：每一行分成24个格子，迅速简便地创建布局。

<style>
  .el-row {
    margin-bottom: 20px;
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
<body>
  <div id="div">
    <!--:gutter="20"每列元素直接的间隙-->
    <el-row :gutter="20">
      <!--:span="16"表示每列元素占的格子数量-->
      <el-col :span="16"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></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"></div></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
      <!--:offset="3" 表示该元素向有的偏移量-->
      <el-col :span="16" :offset="3"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
  </div>
</body>
<script>
  new Vue({
    el:"#div"
  });
</script>

4 容器布局【了解】

用于布局的容器组件，方便快速搭建页面的基本结构，说白了就是将整个页面分成几部分。

<!--省略了css样式，需要自己复制样式-->

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
    <el-footer>Footer</el-footer>
</el-container>

5 表单组件【了解】

<body>
  <div id="div">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm2" 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('ruleForm2')">立即创建</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>

6 表格组件【掌握】

<!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>

7 顶部导航栏组件

<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.itheima.com" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
  </div>
</body>
<script>
  new Vue({
    el:"#div",
    data:{
      activeIndex: '1',
      activeIndex2: '2-4-2'  //默认选中
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  });
</script>

8 侧边导航栏组件

<body>
  <div id="div">
    <el-row class="tac">
      <el-col :span="6">
        <el-menu
                 default-active="1-1"
                 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-menu"></i>
              <span>导航一</span>
            </template>
            <el-menu-item index="1-1">选项1</el-menu-item>
            <el-menu-item index="1-2">选项2</el-menu-item>
            <el-menu-item index="1-3">选项3</el-menu-item>
            <el-menu-item index="1-4">选项4</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">导航二</span>
            </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-menu-item index="2-4">选项4</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">导航三</span>
            </template>
            <el-menu-item index="3-1">选项1</el-menu-item>
            <el-menu-item index="3-2">选项2</el-menu-item>
            <el-menu-item index="3-3">选项3</el-menu-item>
            <el-menu-item index="3-4">选项4</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span slot="title">导航四</span>
            </template>
            <el-menu-item index="4-1">选项1</el-menu-item>
            <el-menu-item index="4-2">选项2</el-menu-item>
            <el-menu-item index="4-3">选项3</el-menu-item>
            <el-menu-item index="4-4">选项4</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</body>
<script>
  new Vue({
    el:"#div",
    methods: {
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      }
    }
  });
</script>

学生列表案例

1 案例效果

  • 效果图

在这里插入图片描述

  • 分析图

在这里插入图片描述

2 头部区域的实现

<!--头部分-->
<el-header style="background-color:#545c64">
  <el-row>
    <!--左边图片-->
    <el-col :span="2">
      <!--放图片-->
      <img src="img/export.png" style="margin-top: 20px"/>
    </el-col>

    <!--右边顶部导航栏-->
    <el-col :span="5" :offset="17">
      <el-menu
               :default-active="activeIndex"
               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"><a href="https://www.itheima.com" target="_blank">首页</a></el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</el-header>

3 侧边栏区域的实现

<!--侧边栏部分-->
<el-aside width="200px" style="height: 800px;background-color:#545c64">
  <el-col :span="24">
    <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-menu"></i>
          <span>学工部</span>
        </template>
<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-submenu>

      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>咨询部</span>
        </template>
<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-submenu>

      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-menu"></i>
          <span>教研部</span>
        </template>
<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-submenu>

    </el-menu>
  </el-col>
</el-aside>

4 主区域的实现

<!--主体部分-->
<el-main>
  <!--第一行：学生列表和按钮-->
  <el-row>
    <el-col :span="3"><font color="red" size="5">学生列表</font></el-col>
    <el-col :span="2" :offset="19">
      <el-button type="primary">添加学生</el-button>
    </el-col>
  </el-row>
  <!--第二行：表格数据-->
  <el-row>
    <el-col :span="24">
      <template>
        <el-table
                  :data="tableData"
                  style="width: 100%">
          <el-table-column
                           label="日期"
                           prop="date">
          </el-table-column>
          <el-table-column
                           label="姓名"
                           prop="name">
          </el-table-column>
          <el-table-column
                           label="地址"
                           prop="address">
          </el-table-column>
          <el-table-column align="right">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)">修改</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-col>
  </el-row>
</el-main>
yololee_
关注
专栏目录
Vue和Element基础
huanghai_fu的博客
07-04 417
Vue和Element基础 回顾： jquery变量选择器： $("#div :eq("+index+")") 一，Vue快速入门 1，Vue的介绍（面向数据编程） Vue是一套构建用户界面的渐进式前端框架。（面向数据编程，更多的是操作数据，而jquery是操作dom，这就是两者的区别） 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。 特点 易用：在有 HTML CSS JavaScript 的
关于VUE和Element
撒哈拉奔跑的蜗牛~的博客
03-07 480
1.vue是什么? 有什么特点? 是一套构建 用户界面的渐进式前端框架 易用,性能高,灵活 2.入门 (1).引入vue.js文件 (2).编写入门程序主要有两个部分 视图:页面渲染由HTML+css组成 脚本;负责业务数据模型以及逻辑处理 (3).Vue核心对象 let vm = new Vue({ 三个核心选项: el:用于接管获取到页面中的元素(通常通过id) data:保存vue对象中的数据,在视图中声明变量需要在此处赋值 methods:用于定义方法,方法可以通过对象名调用,this代表当前VUE
vue 和 elmentui开发后台系统项目总结
qq_38686150的博客
08-17 736
当我们用elment el-aside el-header 进行布局 组件和边框是有间距的 当你使用NavMenu 导航菜单 是无法全屏的 当你屏幕缩小时内容会被压缩 设置最小宽度 有滚动条保证内容完整显示 // 在mian.js global.css (全局的引入) html, body, #app { width: 100%; height: 100%; margin: 0; padding: 0; min-width: 1366px; } .
Vue和Element的基本使用
YINJOER的博客
07-03 1895
Vue和Element 今天给大家介绍以下几个内容： Vue介绍 Vue 快速入门 Vue 常用指令 Element 基本使用 Vue简单介绍 Vue 是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的 API 来实现响应数据的绑定和组合的视图组件。 特点 易用：在有 HTML CSS JavaScript 的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kb min+gzip 运
Vue和Element
ayu6_1的博客
09-27 1038
1、Vue 快速入门 1.1、Vue的介绍 Vue是一套构建用户界面的渐进式前端框架。 只关注视图层，并且非常容易学习，还可以很方便的与其它库或已有项目整合。 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件。 特点 易用：在有HTMLCSSJavaScript的基础上，快速上手。 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。 性能：20kbmin+gzip运行大小、超快虚拟DOM、最省心的优化。 1.2、Vue的快速入门 开发步骤 下载和引入vue.js文件。 编写入门
common-vue-element.zip
07-16
总之，"common-vue-element.zip"提供的这两个组件是Vue开发中的基础元素，理解和掌握它们的实现原理和使用方法对提升Vue项目开发技能至关重要。通过学习和使用这些组件，开发者不仅可以提升项目效率，还能进一步理解...
vue-element-admin中文版本
最新发布
07-20
Element UI 是一套为开发者、设计师和产品经理准备的基于 Vue.js 的组件库，它的设计风格简洁明了，组件丰富，包括表格、按钮、提示、通知、布局等多种常见的 UI 元素，旨在提升开发效率并保持界面的一致性。...
vue-element-admin_vue-element_vue-element-admin_elementadmin官网_v
10-02
Vue Element Admin 是基于 Vue.js 和 Element UI 构建的一个后台管理系统模板，它为快速开发企业级后台应用提供了便捷的解决方案。 Vue Element Admin 的设计理念是模块化和可复用性，这使得开发者能够快速搭建功能...
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
Vue-Element-Admin则是一个基于Vue.js和Element-UI的后台管理系统模板，它包含了一套完整的管理端页面结构和基础功能，如登录、权限控制、多语言支持等，大大简化了前端开发的工作量。在本项目中，Vue-Element-Admin...
vue-admin-template：基于element-vue-admin的框架进行改造的一个viue前端开发框架
02-14
cd vue-admin-template # 安装依赖 npm install # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # ...
span title效果设置_关于一个16px的span为什么占用21px的空间和空白节点
weixin_39756540的博客
12-18 536
前言不知道大家有没有注意到，我们在浏览器中，设置了一个16px的span标签，但实际却占用了21px的高度，比如下图：浏览器默认样式上述这个情况是由浏览器默认样式造成的，浏览器对于行级元素有默认的font-size和line-height，webkit的默认font-size:16px,line-height:1.32。所以我们只需要重置浏览器默认的line-height就可以设置这个span占多...
el-card多个卡片布局
00年女程序员分享自己的学习笔记
12-06 9942
Row AttributesCol Attributes <el-row :gutter="20"> <el-col :span="16"><el-card></el-card> <el-row :gutter="16" style="margin-top:10px;"> <el-col :span="12">
29. Element ownerDocument 属性
enlyhua的专栏
08-06 821
实例返回元素的 ownerDocument：document.getElementById("demo").ownerDocument;<!DOCTYPE html> <html> <body><p id="demo">请点击按钮来获得 <p> 元素的 ownerDocument 的节点类型。</p><button onclick="myFunction()">试一下</button><script
div中嵌套img与span标签出现多处空问题
weixin_44839328的博客
05-18 738
照片配文字展示的展示，前端页面出现下面这种情况 代码片段，使用vue的前端el-row与el-col标签页面布局 <el-col :span="16" class="demo-image"> <div v-for="fit in fits" :key="fit" style="width:15%;height:120px;float:left;font-size:3;"> <img :src="fit.url" style="width: 100px; h.
Element UI 基本组件
qq_37881565的博客
08-17 1365
Layout布局 基础布局 通过row和col组件，并通过col组件的span属性我们就可以自由地组合布局。 <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-co
element组件---基础组件
weixin_45343878的博客
08-07 211
Layout 布局 Container 布局容器 Color 色彩 Typography 字体 Border 边框 Icon 图标 Button 按钮 Link 文字链接 ’Layout 布局 基础布局 <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div...
element--布局
ZhangSir8的博客
07-02 303
Layout 布局 通过基础的 24 分栏，迅速简便地创建布局。 基础布局 <el-row> <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col> </el-row> <el-row> <el-col :...
Element el-row el-col 布局组件详解
热门推荐
程序员大阳
01-27 12万+
1. 背景 element的布局方式与bootstrap原理是一样的，将网页划分成若干行，然后每行等分为若干列，基于这样的方式进行布局，形象的成为栅栏布局。 区别是element可将每行划分为24个分栏，而bootstrap是划分为12个分栏，从使用角度，还是24个分栏更加精细。 2. 分栏布局 首先每行使用<el-row>标签标识，然后每行内的列使用<el-col>标识，至于每列整行的宽度比例，则使用:span属性进行设置。 如下代码，即为将1行等分为2列，为了便于区分列，我们为列
vue+ElementUI页面模板
Muchen灬
02-24 1万+
vue+elementUI的HTML页面模板，可以直接套用 引入 vue CDN: <!-- 引入vue组件库 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> 引入elementUI CDN: 官方文档地址：https://element.f...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值