Web前端最全【前端】在Vue2中使用Vanta(1)，2024年最新前端面试题整理2024简书

结束

一次完整的面试流程就是这样啦，小编综合了腾讯的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析，分享给小伙伴们，有没有需要的小伙伴们都去领取！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

<div ref="vantaRef"></div>

导包

import \* as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'

方法

  mounted() {
    this.vantaEffect = BIRDS({
      el: this.$refs.vantaRef,
      THREE: THREE
    })
  },
  beforeDestroy() {
    if (this.vantaEffect) {
      this.vantaEffect.destroy()
    }
  },

4. 实例1

完整代码：

<template>
<div>
   <div ref="vantaRef" style="width:100%;height:100vh"></div>
   <div class="my\_title">Hello,World</div>
</div>

</template>

<script>
import \* as THREE from 'three'
import BIRDS from 'vanta/src/vanta.birds'

export default { 
 name: "hello",
 data() {
 return {
 
 };
 },
 mounted() {
 this.vantaEffect = BIRDS({
 el: this.$refs.vantaRef,
 THREE: THREE
 })
 },
 beforeDestroy() {
 if (this.vantaEffect) {
 this.vantaEffect.destroy()
 }
 },
 methods: {
 
 },

};
</script>

<style>
.my\_title{
 z-index: 999;
 position: fixed;
 top: 40%;
 left: 10%;
 color: aquamarine;
 font-size: 100px;
 font-weight: bolder;
}
</style>

5. 实例2

完整代码：

<template>
<div>
   <div ref="vantaRef" style="width:100%;height:100vh"></div>
   <div class="my\_title">Hello,World</div>
</div>

</template>

<script>
import \* as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default { 
 name: "hello",
 data() {
 return {
 
 };
 },
 mounted() {
 this.vantaEffect = Net({
 el: this.$refs.vantaRef,
 THREE: THREE
 })
 },
 beforeDestroy() {
 if (this.vantaEffect) {
 this.vantaEffect.destroy()
 }
 },
 methods: {
 
 },

};
</script>

<style>
.my\_title{
 z-index: 999;
 position: fixed;
 top: 40%;
 left: 10%;
 color: aquamarine;
 font-size: 100px;
 font-weight: bolder;
}
</style>

6. 实例3 添加颜色参数等

参加颜色参数

<template>
<div>
   <div ref="vantaRef" style="width:100%;height:100vh"></div>
   <div class="my\_title">Hello,World</div>
</div>

</template>

<script>
import \* as THREE from 'three'
import Net from 'vanta/src/vanta.net'
export default { 
 name: "hello",
 data() {
 return {
 
 };
 },
 mounted() {
 this.vantaEffect = Net({
 el: this.$refs.vantaRef,
 THREE: THREE
 })

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。



这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

《前端开发四大模块核心知识笔记》  

![](https://img-blog.csdnimg.cn/img_convert/b6ecb2c71421efff2a0cd1db5a9d4251.png)



最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。



我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。