讨论社区  /   日志  /   帖子详情
Vue-02-笔记
2022-10-08 17:22:18
100
{{single.collect_count}}

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"});</script></html>

5、表单组件

  • 由输入框、下拉列表、单选框、多选框等控件组成，用以收集、校验、提交数据。

  • 代码实现

    <!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="region"><el-select v-model="ruleForm.region" placeholder="请选择活动区域"><!--下拉列表v-model进行了双向数据绑定--><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('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: '',date1: '',date2: '',delivery: false,type: [],resource: '',desc: ''},rules: {//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></html>

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-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column><el-table-columnlabel="操作"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、顶部导航栏组件

  • 顶部导航栏
    在这里插入图片描述

  • 代码实现

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

8、侧边导航栏组件

  • 侧边导航栏
    在这里插入图片描述

  • 代码实现

    <!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"> <!--span宽度调节--><el-menudefault-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>

9、小结

  • Element：网站快速成型工具。是一套为开发者、设计师、产品经理准备的基于Vue的桌面端组件库。
  • 使用Element前提必须要有Vue。
  • 使用步骤
    1.下载Element核心库。
    2.引入Element样式文件。
    3.引入Vue核心js文件。
    4.引入Element核心js文件。
    5.借助常用组件编写网页。
  • 常用组件
    网页基本组成部分，布局、按钮、表格、表单等等~~~
    常用组件不需要记住，只需要在Element官网中复制使用即可。
回帖
全部回帖（{{commentCount}}）
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}
发帖
加入PHP技术QQ群
一个专属于OneKeyAdmin的技术交流平台，记录OneKeyAdmin开发者的成长与进步。
主题帖
6221
回帖数
143
{{userInfo.nickname}} {{userInfo.group_title}}
{{userInfo.describe}}
文章
{{blog_count}}
回帖
{{blog_comment_count}}
收藏
{{blog_collect_count}}
登陆  /   注册
文章
-
评论
-
粉丝
-
热门帖子
1  WordPress Rest API 入门详解
2766
2  Thinkphp5.0 获取新增数据的ID
2743
3  thinkphp5 解决跨域问题
2296
4  Yandex企业邮箱注册
1982
5  Thinkphp6 的 where 查询条件 and 和 or 的 操作
1843
6  PHP的exec()函数用法详解
1839
7  thinkphp5使用数据库表锁
1624
8  Thinkphp如何查看当前是哪个版本?查看thinkphp当前版本号的三种方法
1622
9  thinkphp6 如何输出json数据
1580
10  h5网站模板_超全超实用的80个模板网站，我全部整理在这里了
1577

Copyright © 2021-2024 onekeyadmin.com All rights reserved 温州市万旗信息科技有限公司 版权所有  网站备案/许可证号：浙ICP备2022028513号-1