Vue.js

`@click` in Vue.js 3 is a directive that executes a specific method or process when an HTML element is clicked.

@click

　@clickは、Vue.js 3においてボタンやリンクなどの要素がクリックされた際に特定のメソッドを実行するために使うディレクティブです。

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

HTML

<div id="app">
	<button @click="handleClick">Click me!</button>
	<p>{{ message }}</p>
</div>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const { createApp } = Vue;

createApp({
	data() {
		return {
			message: 'Hello, World!'
		}
	},
	methods: {
		handleClick() {
			this.message = 'Button clicked';
		}
	}
}).mount('#app');

@clickディレクティブ: <button @click="handleClick">Click me!</button> のように、ボタンがクリックされた際に handleClickメソッドが実行されます。
メソッド: methodsオブジェクト内に handleClick というメソッドを定義しています。このメソッドでは、クリック時に message というデータの値が Button clicked! に変更されます。
データバインディング: {{ message }} というテンプレート式で message の内容が表示されています。ボタンがクリックされると、表示されるメッセージも更新されます。

　このように、Vue.js 3の @clickを使用すると、クリックイベントに対する処理を簡単に実装できます。