Web前端最全带你使用vue为女朋友编写一个旋转相册_vue 3d 相册，2024年最新前端面向对象

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

import Vue from 'vue'
import App from './App.vue'
//引入css
import './index.css'

Vue.config.productionTip = false

new Vue({
  render: h => h(App)
}).$mount('#app')

index.vue:

<template>
    <div class="wrap">
      <div class="cube">
        <div class="liang-one">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-two">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-three">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-four">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-five">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <div class="liang-six">
          <img
            src="./demo.jpg"
            class="photo"
          />
        </div>
        <span class="liang-front">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-back">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-left">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-right">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-top">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
        <span class="liang-bottom">
          <img
            src="./demo.jpg"
            class="liang-photo"
          />
        </span>
      </div>
    </div>
</template>

<script>
export default {
  name: 'wrap'
}
</script>

<style scoped>

</style>

index.css:

html {
	background: #000;
	height: 100%;
}

.wrap {
	position: relative;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 200px;
	height: 200px;
	margin: auto;
}

.cube {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	transform-style: preserve-3d;
	transform: rotateX(-30deg) rotateY(-80deg);
	animation: rotate 20s infinite;
	animation-timing-function: linear;
}

@keyframes rotate {
	from {
		transform: rotateX(0deg) rotateY(0deg);
	}
	to {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

.cube div {
	position: absolute;
	width: 200px;
	height: 200px;
	opacity: 0.8;
	transition: all .4s;
}


.photo {
	width: 200px;
	height: 200px;
}

.cube .liang-one {
	transform: rotateY(0deg) translateZ(100px);
}

.cube .liang-two {
	transform: translateZ(-100px) rotateY(180deg);
}

.cube .liang-three {
	transform: rotateY(90deg) translateZ(100px);
}

.cube .liang-four {
	transform: rotateY(-90deg) translateZ(100px);
}

.cube .liang-five {
	transform: rotateX(90deg) translateZ(100px);
}

.cube .liang-six {
	transform: rotateX(-90deg) translateZ(100px);
}


.cube span {
	display: bloack;
## Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…
![](https://img-blog.csdnimg.cn/img_convert/99471b08ff21de8f73b26ce9d4c72ad1.webp?x-oss-process=image/format,png)

## 算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    ...
    ![](https://img-blog.csdnimg.cn/img_convert/3153ec5705d98586c4a96cc94b3365a1.webp?x-oss-process=image/format,png)

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666



 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    ...
    [外链图片转存中...(img-hladJwYc-1715890351610)]

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666