vue
vue基础及拓展
Winifred Wang
做一个平平无奇的码农
展开
-
在vue项目中使用datav
datavVue数据可视化组件库(类似阿里DataV,大屏数据展示),提供SVG的边框及装饰、图表、水位图、飞线图等组件,简单易用DataV是一个基于Vue的数据可视化组件库(当然也有React版本)提供用于提升页面视觉效果的SVG边框和装饰提供常用的图表如折线图等飞线图/轮播表等其他组件npm安装$ npm install @jiaminghi/data-viewyarn安装yarn add @jiaminghi/data-view使用import Vue from 'v原创 2021-07-23 10:29:34 · 3897 阅读 · 8 评论 -
vue倒计时插件(vue-flip-down)
vue-flip-down安装cnpm install vue-flip-down --save或者yarn add vue-flip-down使用import FlipDown from 'vue-flip-down';<FlipDown :endDate="1540212399971" // 结束的时间,即倒计时会从当前时间一直到endDate停止,可以是一个日期对象,也可以是毫秒数 @timeUp="func" // 当倒计时走到0时会触发原创 2021-06-02 14:23:12 · 4444 阅读 · 6 评论 -
vue循环滚动vue-seamless-scroll
安装npm||cnpm install vue-seamless-scroll --save或yarn add vue-seamless-scroll或<!-- https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js --><script src="vue-seamless-scroll.min.js"></script>使用注册组件原创 2021-04-12 11:39:23 · 205 阅读 · 0 评论 -
在Vue项目中获取当前日期的农历(阴历)
chinese-lunar-calendarnpm安装npm install --save chinese-lunar-calendar在vue中的使用<script>import { getLunar } from 'chinese-lunar-calendar'export default { data() { return { getLunarDay: '', year: new Date().getFullYear(), month: ne原创 2021-04-06 10:36:05 · 3682 阅读 · 1 评论 -
在Vue中使用v-show控制echarts图表显示但图表宽度为100px
在vue中使用v-show显示echarts,设置宽度为100%,但显示出来为100排序效果图:百度了下解决如下:resize() 个人看着有点麻烦将v-show改为v-if(我用了下报错)将v-show改成使用v-if即可。原因是v-show 本身是结构已经存在,当数据发生变化时,结构并未重新渲染使用this.$nextTick(() => {})用 Vue.nextTick(function () { // DOM 更新了 }) 主动触发一下图表,使之.原创 2021-03-31 10:23:54 · 1387 阅读 · 1 评论 -
EventBus
vue组件之间共享数据父向子传值:v-bind属性绑定子向父传值:v-on事件绑定兄弟组件之间共享数据:EventBus关于EventBus初始化新建一个eventbus.js的文件import Vue from 'vue'export const EventBus = new Vue()使用发送事件import { EventBus } from "../event-bus.js";EventBus.$emit("msg", 'msg');接收事件import原创 2021-03-17 11:03:01 · 111 阅读 · 0 评论 -
vue自定义拖拽指令v-drag
<template> <div class="drag" v-drag ref="drag"></div></template><script>export default { name: 'Home', data(){ return{ positionX:'', positionY:'' } }, mounted () { this.$refs.drag.style.to原创 2021-03-15 11:54:59 · 890 阅读 · 0 评论 -
关于React、Vue脚手架
npm、cnpm、yarn进入node官网node,下载node完成后,npm也会自行下载完成cnpm安装:安装淘宝镜像npm install -g cnpm -registry=https://registry.npm.taobao.orgyarn安装:npm install -g yarnReactcnpm install -g create-react-appcreate-react-app 项目名或者npx create-react-app 项目名Vuecnpm i原创 2021-02-22 15:02:39 · 137 阅读 · 0 评论 -
在Vue中使用中国天气插件
在Vue中使用中国天气插件中国天气网配置Vue组件效果图中国天气网链接: 天气插件平台.配置然后点击生成代码Vue组件注:此段代码为script标签中src链接中的内容效果图原创 2021-01-22 15:38:34 · 339 阅读 · 2 评论