Vue.js

In Vue.js 3, methods is a mechanism to define functions within a component and execute actions through events or other triggers from the template.

methods

　Vue.js 3の methodsは、コンポーネント内で関数を定義するために使用されます。これにより、テンプレート内でユーザー操作に応じた処理を実行することができます。たとえば、クリックイベントでメソッドを呼び出す場合などに便利です。

{{ message }}

HTML

<div id="app">
	<button @click="updateMessage">Message update</button>
	<p>{{ message }}</p>
</div>

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
	<!-- JavaScript code here -->
</script>

JavaScript

const app = Vue.createApp({
	data() {
		return {
			message: 'Heelo, Vue.js!'
		}
	},
	methods: {
		updateMessage() {
			this.message = 'Message has been updated!';
		}
	}
});

app.mount('#app');
data()
コンポーネントのデータ（message）を定義します。
methods
コンポーネント内のメソッドを定義します。上記の例では、updateMessageメソッドがボタンをクリックしたときに呼び出され、messageの値を更新します。
@click
テンプレート内のイベントハンドリングに使用されます。この場合、ボタンがクリックされると updateMessageメソッドが実行されます。

　これにより、動的な動作を簡単に追加できるのが Vue.jsの強力な特徴です。