element-ui 的使用教程

最新推荐文章于 2024-09-22 16:58:37 发布

向明天的美好出发

最新推荐文章于 2024-09-22 16:58:37 发布

阅读量2.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_46232064/article/details/113777288

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

element-ui 经常与 vue 结合使用
那么就需要引入三个组件库
	-- css 样式: 用来对标签元素进行渲染美化
		<link rel="stylesheet" href="../plugins/elementui/index.css">
        <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="../plugins/css/style.css">
	-- js 样式: 用来将数据进行动态展示
		<script type="text/javascript" src="../plugins/js/jquery.min.js"></script>
	-- element-ui 组件: 大佬写好的功能组件
		<script src="../plugins/elementui/index.js"></script>
	-- vue 组件: 用来实现实现响应数据的绑定和组合的视图组件
		<script src="../plugins/js/vue.js"></script>
这些组件需要进行下载, 光写标签是没用的,这几个标签是我在测试 element-ui 表格组件时使用的

复制这段内容后打开百度网盘手机App，操作更方便哦
链接：https://pan.baidu.com/s/1UVq3YoamvjBo0ZyeXITI7A 
提取码：k0js

在这里插入图片描述

文件代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>晶</title>
    <style>
        div1 {
            border: 1px solid gold;/*显示边框*/
            width: 30%;/*边框宽度*/
            height: 300px;/*边框高度*/
            margin: auto;/*页面中边框位置*/
        }
        .left {
            border: 1px solid gold;/*显示边框*/
            width: 24%;/*边框宽度*/
            height: 300px;/*边框高度*/
            float: left;
        }
        .center {
            border: 1px solid gold;/*显示边框*/
            width: 51%;/*边框宽度*/
            height: 300px;/*边框高度*/
            float: left;
        }
        .right {
            border: 1px solid gold;/*显示边框*/
            width: 24%;/*边框宽度*/
            height: 300px;/*边框高度*/
            float: left;
        }
        .a{
            text-align: center;
            background: #9ad5ff;
            text-decoration:none
        }
        .el-dropdown-link {
            cursor: pointer;
            color: #409EFF;
        }
        .el-icon-arrow-down {
            font-size: 12px;
        }
    </style>
</head>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css"> <!-- 引入样式 -->
<script src="js/vue.js"></script> <!--vue 的核心文件-->
<script src="element-ui/lib/index.js"></script> <!-- 引入组件库 -->
<body>
    <div id="app">
        <el-dropdown>
            <span class="el-dropdown-link">
                搜索引擎<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <a href="http://www.baidu.com" target="_blank">百度一下</a> <br/>
                <a href="https://cn.bing.com/" target="_blank">必应</a> <br/>
                <a href="http://www.chinaso.com/" target="_blank">中国搜索</a> <br/>
                <a href="https://www.asklib.com/" target="_blank">问答库</a> <br/>
                <a href="https://mijisou.com/" target="_blank">秘迹搜索</a> <br/>
            </el-dropdown-menu>
        </el-dropdown><br/>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: function() {
            return { visible: false }
        }
    })
</script>
</html>