Vue.js 按钮抖动动画：实现与常见问题解决

在 Vue.js 中，我们可以使用 ref 和 @keyframes 来实现按钮抖动动画效果。

代码示例：

<template>
  <button ref='btn' @click='shakeButton'>点击我</button>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const btn = ref(null);

    const shakeButton = () => {
      btn.value.style.animation = 'shake 0.8s';
    };

    return {
      btn,
      shakeButton
    };
  }
};
</script>

<style>
@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(0); }
  75% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}
</style>

常见问题：

点击按钮样式没有改变：

这是因为缺少事件监听器来触发这段代码。你需要在模板中添加一个事件监听器，例如 @click='shakeButton'。

然后在组件的方法中定义 shakeButton() 方法，并在其中设置 btn 的样式：
```
methods: {
  shakeButton() {
    this.$refs.btn.style.animation = 'shake 0.8s';
  }
}
```
这样，当用户点击按钮时，shakeButton() 方法将被调用，并且按钮将开始抖动。

其他注意事项：

可以根据需求调整动画的持续时间、位移等参数。
还可以使用其他 CSS 动画库来实现更复杂的效果。