案例
莫非C
这个作者很懒,什么都没留下…
展开
-
Vue.js案例 —— 课程管理系统三(Echars组件实现图表展示数据)
一、Echars组件介绍Echarts组件就是JavaScript的图表库。使用折线图、饼图、柱状图来展示页面数据。使用Echarts插件1、安装npm install echarts --save2、使用引入echarts插件import echarts from 'echarts'提供一个具备大小的容器(div)<div id="main" style="width: 600px;height:400px;"></div>初始化echarts原创 2020-12-26 20:32:04 · 676 阅读 · 0 评论 -
Vue.js案例 —— 课程管理系统二
一、项目页面容器布局、侧边栏路由跳转使用Element-UI的Container布局容器布局,NavMenu渲染侧边栏在main.js中引入重置样式,消除默认样式import './assets/scss/reset.scss'安装element-uinpm 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 · 645 阅读 · 0 评论 -
Vue.js案例 —— 课程管理系统一
课程管理系统一、项目部分效果图登陆页面主页面项目的数据是通过Mock模拟后端返回的接口数据二、项目介绍项目技术选型前端技术栈: vue + vuex + vue-router + ES6/5 + sass + Element-UI + Echarts + Axios服务端技术栈: mock.js三、功能实现登陆左侧栏 点击不同的菜单按钮跳转到不同的组件(显示不同的内容)首页可视化展示数据视频的成交量用户总量订单总额首页用来展示数据使用Echarts柱状图,原创 2020-12-20 22:59:56 · 1129 阅读 · 1 评论 -
案例 —— H5模拟电脑中的 “回收站的效果”与实现图片拖拽上传功能
1、模拟电脑中的 “回收站的效果”假设有六张图片,一个垃圾桶图片,拖动某一张图片放在垃圾桶上后,将图片直接从Dom节点中删除。删除需要从DOM子节点中删除元素,需要阻止dragover默认事件利用源对象(可以拖动的)和目标对象数据传递记录源对象的Id思路:1、获取元素,利用for循环为每个原对象添加事件,记录添加了哪个原对象2、在for循环中,为每个元素设置自定义属性,方便后期操作3、开始拖动某个图片时,利用 e.dataTransfer.setData()方法,将当前图片的id存储到d原创 2020-11-21 19:16:35 · 619 阅读 · 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 · 463 阅读 · 1 评论 -
Vue学习笔记 —— TodoList效果vue组件化实现
TodoList效果vue组件化实现需求:文本框输入计划事件,回车之后,事件会出现在“未完成”区域中,文本框清空。点击事件前对应的复选框,事件会移至“已完成/未完成”区域中,反之取消复选框勾选,事件会返回至“未完成”区域中。点击删除按钮,对应事件将会被删除。刷新页面,数据不会清空(本地存储)。点击“清除本地存储”按钮,刷新页面,数据将会清空CSS样式:<style> .box{ display: flex; flex-directi原创 2020-09-29 19:45:36 · 333 阅读 · 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 · 332 阅读 · 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 · 811 阅读 · 0 评论