# 与 Vue 集成使用
URL: https://caijiao.org/animejs/6-integration/1-vue
Source: docs/animejs/6-integration/1-vue.md
Description: 本节讲解如何在 Vue 项目中集成使用 Anime.js，实现在组件生命周期、事件响应中调用动画效果，构建动态交互组件。
Anime.js 非常适合与 Vue 组件配合使用，常见用法包括：
- 在组件 `mounted` 钩子中初始化动画
- 在事件（如点击、鼠标悬停）中触发动画
- 与 `ref` 或 `v-bind:class` 等 Vue 特性结合使用
## 示例：点击按钮让方块移动
在 Vue 中使用 Anime.js 时，只需通过 `ref` 获取 DOM 元素，并在事件或生命周期中调用动画函数即可。
```html
Anime.js 与 Vue 集成示例
````
## 小结
Anime.js 可以无缝用于 Vue 2/3 项目中，建议结合 Vue 的响应式和生命周期特性，实现灵活的组件动效。