vue笔记

使用vue中使用动画vue-particles，完成粒子动画

<vue-particles
  color="#dedede"
  :particleOpacity="0.7"
  :particlesNumber="40"
  shapeType="star"
  :particleSize="4"
  linesColor="#FFFFFF"
  :linesWidth="2"
  :lineLinked="true"
  :lineOpacity="0.4"
  :linesDistance="150"
  :moveSpeed="3"
  :hoverEffect="true"
  hoverMode="grab"
  :clickEffect="true"
  clickMode="push"
  class="cash"
>
</vue-particles>

直接放入展示的div中使用,如果想让其当做背景，不影响页面其他的地方的效果，可以通过他的唯一id设置css样式进行编辑

#particles-js{
  width: 100%;
  height: calc(100% - 100px);
  position: absolute;
}

但是加了还行不想，只需要在有效果的地方加入

position: relative;

vue使用Echart来实现页面中折线图

官网地址：https://echarts.apache.org/zh/index.html

npm：npm install echarts --save

main中全局引入：

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

如果报错，则删除换版本

npm uninstall echarts //卸载

 npm install echarts@版本号

使用vue-lazyload实现项目中图片的懒加载

安装

npm i vue-lazyload -S

在main全局引入

Vue.use(VueLazyLoad, {
  error: require('./assets/img/error.jpg'),图片加载失败显示的图片
  loading: require('./assets/img/homePage_top.jpg'),加载中显示的图片
  attempt: 2, 尝试计数
})

在想要懒加载的地方将img的src换成v-lazy即可

动态绑定style，使用背景图片属性接后端动态数据
<div
  class="Rotation-img"
  :style="{ backgroundImage: 'url(' + item.img + ')' }"
>