1月14-Element

Element-UI

常见的名词解释 UI: 用户界面(设计的网页界面) UE: 用户体验,指的用户访问网站,访问体验
ElementUI概述- 网站快速成型工具(通过ElementUI快速搭建网站)。是饿了么公司前端开发团队提供的一套基于Vue的网站组件库。特点:1. 它是一个前端框架,前端开发者使用它快速搭建网站2. 它的核心提供了丰富的组件库3. 它的组件是基于Vue框架定义的(所以使用elementui,一定要引用vue.js)
ElementUI入门官网地址: 总结: 1.link标签的href: 引入element-ui/lib/theme-chalk/index.css 2.script标签的src: 引入vue.js 3.script标签的src: 引入element-ui/lib/index.js
ElementUI常用的组件(非常丰富的组件库,基于Vue框架定义的) * 行组件: 基本语法:子组件1,子组件2,子组件N 特点: 让那子组件在一行显示注意: 子组件过多,会另一起一行显示. * 按钮组件基本语法:文本 type属性改变按钮的样式:info,danger,warning等等 icon属性: 在按钮上显示icon图标 * icon图标按钮: 基本语法: class属性值不同,图标样式不一样 * form表单组件基本语法: 文本输入框密码输入框单选输入框多选输入框提交按钮隐藏 * 容器组件(布局组件)
完整的案例: 教务管理系统后端页面的布局(UI) ============================================================= web开发中的路径书写

绝对路径: 通过http(https),引入网站上面的文件比如: “https://unpkg.com/element-ui/lib/index.js”
相对路径: 同一级目录(html网页和文件在一起): 文件的名称上一级目录(html网页在文件的上一级目录): 目录名称/文件名称下一级目录(html网页在文件的下一级目录): …/文件名称注意:1. 上多级目录的情况下(html网页在文件的上多级目录): 目录名称1/目录名称2/—/目录名称N/文件名称2. 下多级目录的情况下(html网页在文件的下多级目录) …/----/…/文件名称备注: ----表示多级目录的意思

入门案例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>element快速入门</title>
        <!--1引入elementui的css样式文件-->
        <link rel="stylesheet" type="text/css" 
            href="element-ui/lib/theme-chalk/index.css"/>
    </head>
    <body>
        
        <div id="app">
                <el-row>
                  <el-button type="info">信息按钮</el-button>
                  <el-button type="warning">警告按钮</el-button>
                  <el-button type="danger">危险按钮</el-button>
                </el-row>
        </div>
        <!--2.引入vue.js 放在element: index.js 上面-->
        <script src="js/vue.js"></script>
        <!--3.引入index.js-->
        <script src="element-ui/lib/index.js"></script>
        
        <script>
            new Vue({
                "el":"#app",
            });
        </script>
    </body>
</html>

按钮组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>element快速入门</title>
        <!--1引入elementui的css样式文件-->
        <link rel="stylesheet" type="text/css" 
            href="element-ui/lib/theme-chalk/index.css"/>
    </head>
    <body>
        
        <div id="app">
                <el-row>
                    <el-button>xxxxx</el-button>
                    <el-button type="info">xxxxx</el-button>
                    <el-button type="danger">xxxxx</el-button>
                </el-row>
        
        </div>
        <!--2.引入vue.js 放在element: index.js 上面-->
        <script src="js/vue.js"></script>
        <!--3.引入index.js-->
        <script src="element-ui/lib/index.js"></script>
        
        <script>
            new Vue({
                "el":"#app",
            });
        </script>
    </body>
</html>

图标组件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>element快速入门</title>
        <!--1引入elementui的css样式文件-->
        <link rel="stylesheet" type="text/css" 
            href="element-ui/lib/theme-chalk/index.css"/>
    </head>
    <body>
        
        <div id="app">
                <el-row>
                    <el-button>xxxxx</el-button>
                    <el-button type="info">xxxxx</el-button>
                    <el-button type="danger">xxxxx</el-button>
                </el-row>
        
        </div>
        <!--2.引入vue.js 放在element: index.js 上面-->
        <script src="js/vue.js"></script>
        <!--3.引入index.js-->
        <script src="element-ui/lib/index.js"></script>
        
        <script>
            new Vue({
                "el":"#app",
            });
        </script>
    </body>
</html>

标签： vue.js elementui 前端

本文转载自: https://blog.csdn.net/caozhisanguo/article/details/122499434
版权归原作者 小码哥的进阶 所有，如有侵权，请联系我们删除。

发表评论

“1月14-Element”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航