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中引入，即

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

最后呈现的效果如下

总结

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!