如何給VUE 里的button綁定事件？@click=“btnclicked“

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Vue App 3.0"/>
    By @aaaa
  </div>
  <div class="home">
    <h4>Username : <input type="text" placeholder="用戶名"></h4>
    <h4>Password : <input type="password" placeholder="密碼"></h4>
    <h4><button @click="btnclicked">login</button></h4>
  </div>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  methods : {
    btnclicked : function(){
      console.log("正在登陸...跳轉新的頁面");
      //進行頁面跳轉；
      this.$router.push("/profile");
      //在這里進行用戶名、密碼校驗；

    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h4 {
  margin: 18px 0 0;
}
button {
  padding: 5px 30px;
}

</style>