有時候，讓按鈕在用戶點擊時晃動可以增加一些有趣的互動效果。在Vue中，我們可以通過添加一些class來實現這個功能。

<style>
.shake {
animation: shake 0.5s;
}
@keyframes shake {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(20deg);
}
50% {
transform: rotate(-20deg);
}
75% {
transform: rotate(10deg);
}
100% {
transform: rotate(0deg);
}
}
</style>

上面的代碼定義了一個名為"shake"的animation。這個animation會在0.5秒內執行一次，通過rotate（旋轉）來讓按鈕看起來晃動。

接下來，我們需要在Vue組件的template中添加這個class。我們可以利用Vue提供的class綁定來實現。首先，在data中定義一個名為"shaking"的變量，并將其初始值設為false：

data() {
return {
shaking: false
}
}

接下來，我們可以在button的class中使用這個變量，例如：

<button class="shake" :class="{ shaking: shaking }">注冊</button>

在上面的代碼中，我們定義了一個名為"shake"的class，然后使用:class指令將"shaking"變量綁定到class中。我們使用了"shaking"變量，是因為我們希望按鈕被點擊后晃動，而在Vue中，我們可以通過改變數據來控制頁面的顯示效果。

接下來，我們需要在Vue組件的methods中添加一個名為"register"的方法：

methods: {
register() {
this.shaking = true;
setTimeout(() => {
this.shaking = false;
}, 500);
}
}

在上面的代碼中，我們定義了一個"register"方法，當用戶點擊按鈕時，這個方法會被觸發。在方法中，我們首先將"shaking"變量設為true，然后使用setTimeout函數將"shaking"變量重新設為false，這樣按鈕就會晃動0.5秒。

最后，我們需要將"register"方法綁定到button的@click事件中：

<button class="shake" :class="{ shaking: shaking }" @click="register">注冊</button>

到此為止，我們就已經成功地實現了Vue注冊按鈕晃動的效果。當用戶點擊按鈕時，按鈕會晃動0.5秒，增加了一些有趣的互動效果。