JS库中的Particles.js在vue上的运用案例分析

前端之家收集整理的这篇文章主要介绍了JS库中的Particles.js在vue上的运用案例分析前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

知乎的首页后面的粒子动效总觉得很炫酷,搜了一下,发现是用particles.js编写的。刚好目前的项目是利用vue框架的,两个凑在一起学了。

讲道理,这个用得好的话,页面是可以很酷的,譬如我现在写的项目

登录页

嘻嘻~

安装particles.js

npm install --save particles.js

配置particles.js

1.data

这个data是用于控制粒子在页面中所呈现的状态。

2.template

这个就是动态粒子要展示的位置。

3.script

因为涉及到dom树,所以必须在挂载结束后初始化particles.js。第一个参数id就是你在template上取得id名,像我要写的话就是particles。第二个参数是你的data存放的路径,个人建议使用相对路径。

4.style

讲到这里会发现,还有一个最重要的点没讲出来,恩,就是particles.js 的引入。当你的使用范围比较小时,可以直接在当前vue文件的script中引入,即

文件 import particles from 'particles.js'

又或者你觉得这样不好管理,一定要放在main文件中也可以

文件 import particles from 'particles.js' Vue.use(particles)

最后呈现的效果如下

总结

以上所述是小编给大家介绍的JS库中的Particles.js在vue上的运用案例分析。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的Vue相关文章