Vue-02-笔记

Posted 寻7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-02-笔记相关的知识,希望对你有一定的参考价值。

Element 基本使用

1、Element介绍

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

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

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

  • Element官网:https://element.eleme.cn/#/zh-CN 里面有各种组件样例

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

  • Element 提供的按钮
    在这里插入图片描述

2、Element快速入门

  • 开发步骤

    1. 下载 Element 核心库。 element-ui文件夹下目录需整体复制到代码中
    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">  <!--引入element样式文件-->
        <script src="js/vue.js"></script>														<!--引入Vue核心文件-->
        <script src="element-ui/lib/index.js"></script>									<!--引入element核心js文件-->
    </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>
    

3、基础布局

  • 将页面分成最多 24 个部分,自由切分。 就是将页面分成24列,例如:下图中的12就代表一个部分占12列,也就将页面分成两个部分。
    在这里插入图片描述

  • 代码实现

    <!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">  <!--引入element样式文件-->
        <script src="js/vue.js"></script>														<!--引入Vue核心文件-->
        <script src="element-ui/lib/index.js"></script>									<!--引入element核心js文件-->
        <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>	<!--1行-->
                <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>	<!--1列-->
              </el-row>
              <el-row>
                <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>	<!--2列-->
                <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>	<!--3列-->
                <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>	<!--4列-->
                <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>	<!--6列-->
                <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>
    

4、容器布局

  • 将页面分成头部区域、侧边栏区域、主区域、底部区域。4个区域。
    在这里插入图片描述

  • 代码实现

    <!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-container>标签中包含<el-header>或者<el-footer>则垂直分布-->
                <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"
        })[原创]java WEB学习笔记61:Struts2学习之路--通用标签 property,uri,param,set,push,if-else,itertor,sort,date,a标签等(代码片段

    sh bash片段 - 这些片段大多只是我自己的笔记;我找到了一些,有些我已经找到了

    需要一种有效的方法来避免使用 Laravel 5 重复代码片段

    Oracle-常用数据库对象笔记(片段)

    如何使用导航组件处理片段内的向上按钮

    JSP笔记