使用 Vue.js 組件绑定原生事件 (v-on:click)

Vue.js 是一個輕量級的 JavaScript 框架，它可以讓開發者快速開發出高品質的 Web 應用程式。Vue.js 提供了一個簡單的方法來綁定原生事件，只需要使用 v-on:click 指令即可。

在 Vue.js 中，可以使用 v-on:click 指令來綁定原生事件，例如：

<div id="app">
  <button v-on:click="handleClick">Click me!</button>
</div>

new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      alert('You clicked me!');
    }
  }
});

上面的程式碼中，我們使用 v-on:click 指令來綁定 handleClick 方法，當使用者點擊按鈕時，就會觸發 handleClick 方法，並顯示一個警告框。

除了 v-on:click 之外，Vue.js 還提供了許多其他的指令，例如 v-on:mouseover、v-on:keyup 等，可以用來綁定不同的原生事件。

另外，Vue.js 還提供了一個 $emit 方法，可以用來觸發自定義事件，例如：

<div id="app">
  <button v-on:click="handleClick">Click me!</button>
</div>

new Vue({
  el: '#app',
  methods: {
    handleClick: function() {
      this.$emit('my-custom-event');
    }
  }
});

上面的程式碼中，我們使用 $emit 方法來觸發一個名為 my-custom-event 的自定義事件，然後可以在其他組件中使用 v-on:my-custom-event 來綁定該事件。

總結來說，Vue.js 提供了一個簡單的方法來綁定原生事件，只需要使用 v-on:click 指令即可，並且還提供了 $emit 方法來觸發自定義事件，可以讓開發者更加輕鬆地開發出高品質的 Web 應用程式。

學習如何使用Vue.js組件綁定原生事件