案例
莫非C
这个作者很懒,什么都没留下…
展开
-
Vue.js案例 —— 课程管理系统三(Echars组件实现图表展示数据)
一、Echars组件介绍 Echarts组件就是JavaScript的图表库。使用折线图、饼图、柱状图来展示页面数据。 使用Echarts插件 1、安装 npm install echarts --save 2、使用 引入echarts插件 import echarts from 'echarts' 提供一个具备大小的容器(div) <div id="main" style="width: 600px;height:400px;"></div> 初始化echarts原创 2020-12-26 20:32:04 · 634 阅读 · 0 评论 -
Vue.js案例 —— 课程管理系统二
一、项目页面容器布局、侧边栏路由跳转 使用Element-UI的Container布局容器布局,NavMenu渲染侧边栏 在main.js中引入重置样式,消除默认样式 import './assets/scss/reset.scss' 安装element-ui npm i element-ui -S 在main.js中引入element-ui import ElementUI from 'element-ui'; //引入element-ui import 'element-ui/lib/th原创 2020-12-21 00:12:29 · 588 阅读 · 0 评论 -
Vue.js案例 —— 课程管理系统一
课程管理系统 一、项目部分效果图 登陆页面 主页面 项目的数据是通过Mock模拟后端返回的接口数据 二、项目介绍 项目技术选型 前端技术栈: vue + vuex + vue-router + ES6/5 + sass + Element-UI + Echarts + Axios 服务端技术栈: mock.js 三、功能实现 登陆 左侧栏 点击不同的菜单按钮跳转到不同的组件(显示不同的内容) 首页 可视化展示数据 视频的成交量 用户总量 订单总额 首页用来展示数据 使用Echarts柱状图,原创 2020-12-20 22:59:56 · 1041 阅读 · 1 评论 -
案例 —— H5模拟电脑中的 “回收站的效果”与实现图片拖拽上传功能
1、模拟电脑中的 “回收站的效果” 假设有六张图片,一个垃圾桶图片,拖动某一张图片放在垃圾桶上后,将图片直接从Dom节点中删除。 删除需要从DOM子节点中删除元素,需要阻止dragover默认事件 利用源对象(可以拖动的)和目标对象数据传递记录源对象的Id 思路: 1、获取元素,利用for循环为每个原对象添加事件,记录添加了哪个原对象 2、在for循环中,为每个元素设置自定义属性,方便后期操作 3、开始拖动某个图片时,利用 e.dataTransfer.setData()方法,将当前图片的id存储到d原创 2020-11-21 19:16:35 · 564 阅读 · 0 评论 -
案例 —— Html5实现列表拖放
需求:通过H5的拖放api,实现对列表的拖放替换效果。 HTML <ul class="ul-list"> <li draggable="true" class="item">葫芦娃</li> <li draggable="true" class="item">直到世界的尽头</li> <li draggable="true" class="item">如果当时</li> <li draggable="tru原创 2020-11-21 17:33:28 · 393 阅读 · 1 评论 -
Vue学习笔记 —— TodoList效果vue组件化实现
TodoList效果vue组件化实现 需求: 文本框输入计划事件,回车之后,事件会出现在“未完成”区域中,文本框清空。 点击事件前对应的复选框,事件会移至“已完成/未完成”区域中,反之取消复选框勾选,事件会返回 至“未完成”区域中。 点击删除按钮,对应事件将会被删除。 刷新页面,数据不会清空(本地存储)。 点击“清除本地存储”按钮,刷新页面,数据将会清空 CSS样式: <style> .box{ display: flex; flex-directi原创 2020-09-29 19:45:36 · 307 阅读 · 0 评论 -
Vue学习笔记 —— 走马灯(基于Vue.js)
HTML结构: <div id="app"> <button type="button" @click="handle1">浪起来</button> <button type="button" @click="handle2">低调</button> <button type="button" @click="handle3">字体变大</button> <button type="b原创 2020-08-30 19:16:00 · 290 阅读 · 0 评论 -
Vue学习笔记 —— 选项卡案例(基于Vue.js)
选项卡案例(基于vue.js) 使用v-for,v-on,v-bind,v-model完成 需求如下 : 把数据渲染到页面 利用 v-for将数据循环渲染到页面上 给每一个tab栏添加事件 选中的tab栏,更改背景颜色,其他未选中的不变 让tab栏 显示 对应的div(图片) 实现添加tab栏和div(图片)功能 点击添加时需要判断,id、名称是否为空,为空给出对应的提示 当没有填写图片路径时,给默认的图片路径 添加完成,清空输入框的内 效果图如下: HTML结构 <div i原创 2020-08-30 18:36:04 · 782 阅读 · 0 评论