Vue和Element

最新推荐文章于 2024-04-20 10:01:46 发布
最新推荐文章于 2024-04-20 10:01:46 发布
阅读量382 收藏 2
点赞数
文章标签： vue html css web 列表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xm_hello/article/details/107119733
版权

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:{
            mag:"hello vue"
        }
   });
</script>
</html>

Vue 快速入门详解

  • Vue 核心对象：每一个 Vue 程序都是从一个 Vue 核心对象开始的。
    在这里插入图片描述
  • 选项列表
    el 选项：用于接收获取到页面中的元素。(根据常用选择器获取)。
    data 选项：用于保存当前 Vue 对象中的数据。在视图中声明的变量需要在此处赋值。
    methods 选项：用于定义方法。方法可以直接通过对象名调用，this 代表当前 Vue 对象。
  • 数据绑定
    在视图部分获取脚本部分的数据。
    {{变量名}}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门升级</title>
</head>
<body>
    <!-- 视图 -->
    <!-- <div id="div">
        <div>姓名：{{name}}</div>
        <div>班级：{{classRoom}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div> -->


    <div id = "div">
        <div>姓名:{{name}}</div>
        <div>班级:{{classname}}</div>
        <button onclick="hi()">打招呼</button>
        <button onclick="update()">修改班级</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    // 脚本
    // let vm = new Vue({
    //     el:"#div",
    //     data:{
    //         name:"张三",
    //         classRoom:"黑马程序员"
    //     },
    //     methods:{
    //         study(){
    //             alert(this.name + "正在" + this.classRoom + "好好学习!");
    //         }
    //     }
    // });

    let vm = new Vue({
        el:"#div",
        data:{
            name:"古巨基",
            classname:"黑马24期"
        },
        methods:{
            study(){
                alert(this.name + "正在" + this.classname + "好好学习!" );
            }
        }
    })

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

    //定义修改班级
    function update(){
        vm.classname = "传智播客";
    }
</script>
</html>

快速入门小结

  • Vue 是一套构建用户界面的渐进式前端框架。
  • Vue 的程序包含视图和脚本两个核心部分。
  • 脚本部分
    Vue 核心对象。
    选项列表
    el：接收获取的元素。
    data：保存数据。
    methods：定义方法。
  • 视图部分
    数据绑定：{{变量名}}

Vue 常用指令

指令介绍

  • 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html，v-if，v-for。
  • 使用指令时，通常编写在标签的属性上，值可以使用 JS 的表达式。
  • 常用指令
    在这里插入图片描述

指令演示

  • 文本插值
    v-html：把文本解析为 HTML 代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文本插值</title>
</head>
<body>
    <div id="div">
        <div>{{msg}}</div>
        <div v-html="msg"></div>
        <div v-html="ismg"></div>
        <div v-html = "sds"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            msg:"<b>Hello Vue</b>",
            ismg : "<b> hello V</b>",
            sds:'<b>百度一下</b>'
        }
    });
</script>
</html>
  • 绑定属性
    v-bind：为 HTML 标签绑定属性值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>绑定属性</title>
    <style>
        .my{
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div id="div">
        <a v-bind:href="url">百度一下</a>
        <br>
        <a :href="url">百度一下</a>
        <br>
        <div :class="cls">我是div</div>
        <br>
        <a :href="mycl">点我有惊喜</a>
        <div :id ="myid"></div>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    
    new Vue({
        el:"#div",
        data:{
            url:"https://www.baidu.com",
            cls:"my",
            mycl:"https://www.baidu.com",
            myid:"username"
        }
    });
</script>
</html>
  • 条件渲染
    v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
    v-else：条件性的渲染。
    v-else-if：条件性的渲染。
    v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>条件渲染</title>
</head>
<body>
    <div id="div">
        <!-- 判断num的值，对3取余  余数为0显示div1  余数为1显示div2  余数为2显示div3 -->
        <div v-if="num % 3 == 0">div1</div>
        <div v-else-if="num % 3 == 1">div2</div>
        <div v-else="num % 3 == 2">div3</div>
        <div v-show="flag">div4</div>
        <div>
            <div v-if = "isLogin" >个人中心</div>
            <div v-else = "!isLogin">
                <a :href="myurl">注册</a>
                <a :href="myurl">登录</a>
            </div>
        </div>
        
       
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            num:1,
            flag:false,
            isLogin:false,
            myurl:"asdasdasd"
            
        }
    });
</script>
</html>
  • 列表渲染
    v-for：列表渲染，遍历容器的元素或者对象的属性。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
</head>
<body>
    <div id="div">
        <ul>
            <li v-for="name in names">
                {{name}}
            </li>
            <li v-for ="n in namess" >
                {{n}}
            </li>
            <li v-for="value in student">
                {{value}}
            </li>
        </ul>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            //names:["张三","李四","王五"],
            // student:{
            //     name:"张三",
            //     age:23
            // },
            namess:["张三","李四","王二","麻子"]
        }
    });
</script>
</html>
  • 事件绑定
    v-on：为 HTML 标签绑定事件。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定</title>
</head>
<body>
    <div id="div">
        <div>{{name}}</div>
        <button v-on:click="change()">改变div的内容</button>
        <button v-on:dblclick="change()">改变div的内容</button>

        <button @click="change()">改变div的内容</button>
        <button @click = "dianji()">改变name</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            name:"黑马程序员",
            

        },
        methods:{
            change(){
                this.name = "传智播客"
            },
            dianji(){
                this.name = "黑马24期"
            }
        }
    });
</script>
</html>
  • 表单绑定
    v-model：在表单元素上创建双向数据绑定。
  • 双向数据绑定
    更新 data 数据，页面中的数据也会更新。
    更新页面数据，data 数据也会更新。
  • MVVM模型(Model View ViewModel)：是 MVC 模式的改进版
    在前端页面中，JS 对象表示 Model，页面表示 View，两者做到了最大限度的分离。
    将 Model 和 View 关联起来的就是 ViewModel，它是桥梁。
    ViewModel 负责把 Model 的数据同步到 View 显示出来，还负责把 View 修改的数据同步回 Model。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单绑定</title>
</head>
<body>
    <div id="div">
        <form autocomplete="off">
            姓名：<input type="text" name="username" v-model="username" >
            <br>
            年龄：<input type="number" name="age" v-model="age">
        </form>
        <button @click = "getUsername()">getUsername</button>
    </div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#div",
        data:{
            username:"张三",
            age:23
        },
        methods:{
            getUsername(){
                console.log(this.username)
            }
        }
    });
</script>
</html>

常用指令小结

  • 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。
  • 文本插值
    v-html：把文本解析为 HTML 代码。
  • 绑定属性
    v-bind：为 HTML 标签绑定属性值。
  • 条件渲染
    v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。
    v-else：条件性的渲染。
    v-else-if：条件性的渲染。
    v-show：根据条件展示某元素，区别在于切换的是 display 属性的值。
  • 列表渲染
    v-for：列表渲染，遍历容器的元素或者对象的属性。
  • 事件绑定
    v-on：为 HTML 标签绑定事件。
  • 表单绑定
    v-model：在表单元素上创建双向数据绑定。

Element 基本使用

Element 介绍

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

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

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

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

  • 自己完成的按钮
    在这里插入图片描述

  • Element 提供的按钮

在这里插入图片描述
- 使用Element 之前一定要先导入element-ui包

 <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
 <script src="js/vue.js"></script>
 <script src="element-ui/lib/index.js"></script>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>快速入门</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <button>我是按钮</button>
    <br>
    <div id="div">
        <el-row>
            <el-button>默认按钮</el-button>
            <el-button type="primary">主要按钮</el-button>
            <el-button type="success">成功按钮</el-button>
            <el-button type="info">信息按钮</el-button>
            <el-button type="warning">警告按钮</el-button>
            <el-button type="danger">危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button plain>朴素按钮</el-button>
            <el-button type="primary" plain>主要按钮</el-button>
            <el-button type="success" plain>成功按钮</el-button>
            <el-button type="info" plain>信息按钮</el-button>
            <el-button type="warning" plain>警告按钮</el-button>
            <el-button type="danger" plain>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button round>圆角按钮</el-button>
            <el-button type="primary" round>主要按钮</el-button>
            <el-button type="success" round>成功按钮</el-button>
            <el-button type="info" round>信息按钮</el-button>
            <el-button type="warning" round>警告按钮</el-button>
            <el-button type="danger" round>危险按钮</el-button>
          </el-row>
          <br>
          <el-row>
            <el-button icon="el-icon-search" circle></el-button>
            <el-button type="primary" icon="el-icon-edit" circle></el-button>
            <el-button type="success" icon="el-icon-check" circle></el-button>
            <el-button type="info" icon="el-icon-message" circle></el-button>
            <el-button type="warning" icon="el-icon-star-off" circle></el-button>
            <el-button type="danger" icon="el-icon-delete" circle></el-button>
          </el-row>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

Element 快速入门

  1. 下载 Element 核心库。
  2. 引入 Element 样式文件。
  3. 引入 Vue 核心 js 文件。
  4. 引入 Element 核心 js 文件。
  5. 编写按钮标签。
  6. 通过 Vue 核心对象加载元素。

布局方式

  • 基础布局：将页面分成最多 24 个部分，自由切分。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-row {
            /* 行距为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="2"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
            <el-col :span="6"><div class="grid-content bg-purple-dark"></div></el-col>
          </el-row>
          
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>
  • 容器布局：将页面分成头部区域、侧边栏区域、主区域、底部区域。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>容器布局</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
    <style>
        .el-header, .el-footer {
            background-color: #d18e66;
            color: #333;
            text-align: center;
            height: 100px;
        }
        .el-aside {
            background-color: #55e658;
            color: #333;
            text-align: center;
            height: 580px;
        }
        .el-main {
            background-color: #5fb1f3;
            color: #333;
            text-align: center;
            height: 520px;
        }
    </style>
</head>
<body>
    <div id="div">
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-container>
              <el-header>Header</el-header>
              <el-main>Main</el-main>
            </el-container>
          </el-container>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

表单组件

  • 表单：由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单组件</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="请输入姓名" prop="name">
              <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>
            <el-form-item label="请输入年龄" prop="age">
              <el-input v-model="ruleForm.age"></el-input>
            </el-form-item>
            <el-form-item label="请输入住址" prop="ctiy">
              <el-input v-model="ruleForm.ctiy"></el-input>
            </el-form-item>
           
            <el-form-item label="请选择性别" prop="region">
              <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
                <el-option label="男" value="nan"></el-option>
                <el-option label="女" value="nv"></el-option>
              </el-select>
            </el-form-item>
      
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            ruleForm: {
                name: '',
                region: '',
                age:"",
                ctiy:''
                
                },
        rules: {
          name: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          // age:[
          //     required : true,message: '请输入年龄'
          // ],
          region: [
            { required: true, message: '请选择性别', trigger: 'change' }
          ]       
        }
        },
        methods:{
            submitForm(formName) {
                this.$refs[formName].validate(validfunc);
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    });

    function validfunc(valid)  {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                }
</script>
</html>

表格组件

  • 表格：用于展示多条结构类似的数据，可对数据进行编辑、删除或其他自定义操作。

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格组件</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
        <template>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column
                prop="date"
                label="日期"
                width="180">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="180">
              </el-table-column>
              <el-table-column
                prop="address"
                label="地址">
              </el-table-column>

              <el-table-column
                label="操作"
                width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </el-table-column>
            </el-table>
          </template>
    </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }, {
                date: '2016-05-01',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1519 弄'
            }, {
                date: '2016-05-03',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1516 弄'
            }]
        }
    });
</script>
</html>

导航栏组件

  • 顶部导航栏
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>顶部导航栏</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
      <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-menu-item index="1">处理中心</el-menu-item>
      <el-submenu index="2">
        <template slot="title">我的工作台</template>
        <el-menu-item index="2-1">选项1</el-menu-item>
        <el-menu-item index="2-2">选项2</el-menu-item>
        <el-menu-item index="2-3">选项3</el-menu-item>
        <el-submenu index="2-4">
          <template slot="title">选项4</template>
          <el-menu-item index="2-4-1">选项1</el-menu-item>
          <el-menu-item index="2-4-2">选项2</el-menu-item>
          <el-menu-item index="2-4-3">选项3</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="3" disabled>消息中心</el-menu-item>
      <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
    </el-menu>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>
  • 侧边导航栏
    在这里插入图片描述
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>侧边导航栏</title>
    <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
    <script src="js/vue.js"></script>
    <script src="element-ui/lib/index.js"></script>
</head>
<body>
    <div id="div">
      <el-col :span="6">
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </div>
</body>
<script>
    new Vue({
        el:"#div"
    });
</script>
</html>

Element 小结

  • Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于 Vue 的桌面端组件库。
  • 使用 Element 前提必须要有 Vue。
  • 使用步骤
  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 prop="age" label="年龄" >
              </el-table-column>
              <el-table-column
                label="操作"
                width="180">
                <el-button type="warning">编辑</el-button>
                <el-button type="danger">删除</el-button>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
  </div>
</body>
<script>
    new Vue({
        el:"#div",
        data:{
          tableData:[
            {
              date:"2088-08-08",
              name:"张三",
              address:"北京市昌平区",
              age:"3"
            },{
              date:"2088-08-08",
              name:"李四",
              address:"北京市昌平区"
            },{
              date:"2088-08-08",
              name:"王五",
              address:"北京市昌平区"
            },
          ]
        }
    });
</script>
</html>
xm_hello
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue和ElementUI
辰伏的博客
01-27 1738
1. Vue 1.1 Vue介绍 Vue是一套构建用户界面的渐进式前端框架 只关注视图层，并且非常容易学习，还可以很方便的与其他库或已有项目整合 通过尽可能简单的API来实现响应数据的绑定和组合的视图组件 特点 易用：在有HTML CSS JavaScript的基础上，快速上手 灵活：简单小巧的核心，渐进式技术栈，足以应付任何规模的应用 性能：20kbmin + gzip运行大小、超快虚拟DOM、最省心的优化 1.2 Vue快速入门 下载和引入vue.js文件 编写程序 视图：负责页面渲染，主
vue+ele 使用及demo
qq_28190039的博客
08-31 2246
vue+ele+axios demo 项目配置、前后端交互、组件申明使用、路由 1>项目目录 2>安装axios cnpm install axios 完成后，main.js引用 3>选择布局 官方布局https://element.eleme.cn/#/zh-CN/component/container page下index.vue <template> <div class="home"> <el-conta..
推荐开源项目：Vue-Ele-Import - 简化Element UI组件导入
gitblog_00016的博客
04-20 306
推荐开源项目：Vue-Ele-Import - 简化Element UI组件导入 项目地址:https://gitcode.com/dream2023/vue-ele-import 项目简介 在前端开发中，我们常常会使用到Element UI这样的流行UI库，但默认情况下，全量引入会导致页面加载速度变慢。Vue-Ele-Import 是一个针对Vue和Element UI的插件，它旨在解决这个问题...
Electron vue使用详解
Mr_TianChen的博客
12-01 1万+
Electron+node.js+vue Electron是什么？ Electron 是一个框架，可以让您使用 JavaScript, HTML 和 CSS 创建桌面应用程序。 然后这些应用程序可以打包在macOS、Windows和Linux上直接运行，或者通过Mac App Store或微软商店分发。 通常，您使用每个操作系统特定的本地应用程序框架为操作系统 (OS)创建一个桌面应用程序。 Electron 可以在使用您已经知道的技术后写入您的应用程序。 前提条件 在使用 Elect
解读Element-UI 和 VUE 技术
king220022的博客
04-12 560
是一种前端框架，免除JavaScript中的dom操作，简化书写，实现数据双向绑定。ElementUI提供了很多优美的组件，表单，表格，按钮什么的。是一种前端框架，免除JavaScript中的dom操作，简化书写，实现数据双向绑定。ElementUI提供了很多优美的组件，表单，表格，按钮什么的。是一种前端框架，免除JavaScript中的dom操作，简化书写，实现数据双向绑定。ElementUI提供了很多优美的组件，表单，表格，按钮什么的。
Vue.js(一) Vue.js + element-ui 扫盲
热门推荐
人不风流枉少年
12-09 5万+
一：node.js是什么 我们知道javascript代码只能在浏览器上运行，只有浏览器能够解析js代码，如果想要javascript代码能够在服务器端运行就必须提供一个Javascript的运行环境(runtime environment)，这就是node.js。 node.js是对Chrome V8引擎进行了封装，是一个能让JavaScript运行在服务端的开发平台，它让JavaScript成...
基于Vue和Element的低代码平台设计源码
最新发布
05-31
低代码平台项目源码，共821个文件，采用Javascript、Vue、CSS和HTML等语言开发。该平台基于Element UI组件库，旨在提供一种快速、高效的开发方式，让开发者能够更专注于业务逻辑而非技术实现。
基于 vue 和 element-ui 实现的可视化表单设计器
04-19
基于Vue的可视化表单设计器，让表单开发简单而高效；高级版本目前已支持 Vue3。MakingForm 表单设计器（基于可视化操作快速设计出表单页面）。GenerateForm 表单生成器（根据设计器中获取的配置 json 数据，快速渲染...
vue-element-table-edit:基于vue和element ui的table,在table内部进行每条数据编辑保存和删除 https
05-12
`vue-element-table-edit` 是一个基于 Vue.js 和 Element UI 的扩展项目，它专门针对表格数据操作进行了增强，允许用户在表格内部直接对每一条数据进行编辑、保存和删除操作，大大提升了数据管理的便利性。...
vue + element
11-23
使用vue+element-ui 实现商城后台...学习前端vue+element-ui ，后端代码没有，不过不影响前端使用和学习 学习vue+element-ui还是不错，里面的空间可以代码复用 启动前：进入根目录 npm install 启动命令 npm run dev
基于Vue和Element的电商后台管理系统前端设计源码
04-10
本项目是一个基于Vue和Element的电商后台管理系统前端设计源码，共包含231个文件，其中包括73个Vue文件、61个JavaScript文件等。系统提供了丰富的功能模块，包括商品管理、订单管理、会员管理、促销管理、运营管理、...
VUE UI框架对比 element-ui 与 iView
weixin_33948416的博客
06-20 4631
element VS iview(最近项目UI框架在选型 ，做了个分析， 不带有任何利益相关）主要从以下几个方面来做对比使用率（npm 平均下载频率，组件数量，star, issue…)API风格打包优化与设计师友好性 1，使用率（npm 平均下载频率，组件数量，star, issue…)element-ui npm 下载次数 以及iss...
ElementUi——适合于Vue的UI框架
绝圣弃智-零的博客
12-26 3068
简介 element-ui是一个ui库，它不依赖于vue。但是却是当前和vue配合做项目开发的一个比较好的ui框架。 Layout布局（el-row、el-col） element-ui借用了bootstrap框架的思想，使用了栅格布局。它把单一的分栏分为24列。基本的使用方式如下 &lt;el-row&gt;         &lt;el-col :span="6"&gt;&lt;div c...
把vue等同于elementUI，那你还不到新兵蛋子级别。
贝格前端工场的博客
01-19 409
再举个例子，Element UI好比设计师，Vue.js好比前端工程师，二者是分离的，你搞你的，我搞我的，互不冲突，双方配合亲密无间。因此，Vue.js和Element UI是两个不同的概念，Vue.js是一个JavaScript框架，而Element UI是基于Vue.js的UI组件库。Vue.js和Element UI是相互关联的，使用Vue.js可以方便地开发和管理Element UI的组件。但是不用担心，任何工具都是做取舍的，强化一定的功能，舍弃一定的功能，用来贴合特定场景，
Vue UI 组件库大起底 element VS iview VS ...
qq_32614411的博客
12-20 3958
最近接触了几个开源项目，发现大家都在用iview框架，趁机整理一下自己接触过的几个基于Vue.js的UI组件库 Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库。由饿了么前端开源的UI框架。主要用于开发PC端的后台产品。维护率高/大厂开发 iView，是一套基于 Vue.js 的开源 UI 组件库，主要用于开发PC端的后台产品。较为小众但ui丰富 VU...
Element UI 和 Layui 的使用区别
m0_74935740的博客
12-28 2674
Element UI 和 Layui 都是非常流行的前端 UI 框架，用于构建用户界面。它们有一些共同之处，但也有一些明显的区别。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值