Vue燈光運動，是一種非常感性、驚艷的視覺傳達方式。它是一個通過Vue實現光線跟隨鼠標運動的動態效果，呈現出一種光束追蹤般的效果，帶給人一種恍如置身于星際般的視覺體驗。

Vue燈光運動的實現，需要用到Vue框架和JavaScript語言。

<template>
<div class="container">
<div class="light"></div>
</div>
</template>
<script>
export default {
name: 'VueLight',
data() {
return {
container: null,
light: null,
mouseX: null,
mouseY: null,
windowHalfX: window.innerWidth / 2,
windowHalfY: window.innerHeight / 2,
};
},
mounted() {
this.container = this.$el.querySelector('.container');
this.light = this.$el.querySelector('.light');
window.addEventListener('mousemove', this.onMouseMove);
window.addEventListener('resize', this.onWindowResize);
this.onWindowResize();
this.animate();
},
destroyed() {
window.removeEventListener('mousemove', this.onMouseMove);
window.removeEventListener('resize', this.onWindowResize);
},
methods: {
onMouseMove(event) {
this.mouseX = event.clientX - this.windowHalfX;
this.mouseY = event.clientY - this.windowHalfY;
},
onWindowResize() {
this.windowHalfX = window.innerWidth / 2;
this.windowHalfY = window.innerHeight / 2;
},
animate() {
requestAnimationFrame(this.animate);
this.render();
},
render() {
this.light.style.transform = `translate(${-this.mouseX / 15}px, ${-this.mouseY / 15}px)`;
},
},
};
</script>

上述代碼中，模板template里面是一個包含了一個container和light的div容器。data中聲明了鼠標x軸坐標mouseX、鼠標y軸坐標mouseY、窗口一半寬度windowHalfX、窗口一半高度windowHalfY、container和light。其中container是通過querySelector獲取并賦值的以便后面獲取容器的寬度和高度進行計算。light是通過querySelector獲取的方便后面進行樣式調整。mounted中會添加鼠標移動和窗口大小改變的監聽事件，執行onWindowResize初始化窗口半寬度和半高度。執行animated通過requestAnimationFrame方法實現渲染光線運動的效果，并調用render方法渲染。

在render方法中，通過計算出來的mouseX和mouseY的值，調整light的translate坐標，使其跟隨鼠標的移動而移動。

最后，Vue燈光運動的實現，具有代碼量小、易維護、可擴展、通用性高的特點，是一個非常值得推崇的技術。