Vue3 methods プロパティ
Vue3 オプションAPIVue3 では、methodsプロパティはオブジェクトであり、コンポーネント内で使用可能なメソッドを定義するために使用されます。これらのメソッドは、コンポーネントのテンプレート内でイベントバインディングやその他の方法で呼び出すことができます。
methodsプロパティは通常、ユーザーのインタラクションの処理、特定の論理操作の実行、コンポーネントの動作のトリガーに使用されます。
methods プロパティを使用する基本構文
Vue3 コンポーネントでは、methodsプロパティは通常、setup関数の外部で定義されます。それはオブジェクトを含み、オブジェクト内の各キーと値のペアはメソッドを表し、キーはメソッド名、値はそのメソッドの実装です。
サンプル
export default {
methods: {
methodName() {
// メソッドのロジック
},
anotherMethod() {
// 別のメソッドのロジック
}
}
}
methods: {
methodName() {
// メソッドのロジック
},
anotherMethod() {
// 別のメソッドのロジック
}
}
}
例：ボタンをクリックしたときにメソッドをトリガーする
以下は簡単な例で、Vue3 でmethodsプロパティを使用してボタンのクリックイベントを処理する方法を示しています。
サンプル
<template>
<div>
<button @click="handleClick">クリックして</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '你好，Vue3！'
};
},
methods: {
handleClick() {
this.message = 'ボタンがクリックされました！';
}
}
};
</script>
<div>
<button @click="handleClick">クリックして</button>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
data() {
return {
message: '你好，Vue3！'
};
},
methods: {
handleClick() {
this.message = 'ボタンがクリックされました！';
}
}
};
</script>
コードの解説
テンプレート部分：
- 使用して
@clickイベントバインディングでhandleClickメソッドをボタンのクリックイベントに関連付けます。 - ユーザーがボタンをクリックすると、
handleClickメソッドが呼び出されます。
- 使用して
スクリプト部分：
data関数は、あるmessageプロパティを含むオブジェクトを返します。そのプロパティは、表示されるメッセージを格納するために使用されます。methodsオブジェクト内ではhandleClickメソッドが定義されており、このメソッドがmessageの値を変更します。
methods プロパティの役割
ユーザーインタラクションの処理：
methodsプロパティは、ユーザーのクリックや入力などのインタラクション操作に応答するためによく使用されます。
論理操作の実行：
- メソッド内に、データ計算や条件判断などの複雑なロジックコードを記述することができます。
コンポーネントの動作のトリガー：
- メソッド呼び出しを通じて、コンポーネントの状態更新やデータリクエストなどの動作をトリガーできます。
methods と computed の違い
methods：
- 呼び出しのたびにメソッド本体のコードが実行されます。
- イベント処理や手動トリガーが必要な操作に適しています。
computed：
- 依存するデータが変更された場合にのみ再計算されます。
- データに基づいて動的に結果を計算する必要があるシーンに適しています。
練習
- 試しに
methodsに新しいメソッドを追加し、messageの内容をクリアします。 - サンプルコードを変更して、ボタンをクリックしたときに現在の時刻を表示するようにしてみましょう。
その他の拡張