close

Vue.js でのイベント処理: 構文と例

イベントの処理は、Vue.js でユーザーと対話し、アプリケーションの状態を変更する上で重要な部分です。 Vue.js は、インライン イベント ハンドラー、メソッド、イベント修飾子など、イベントを処理するさまざまな方法を提供します。

Vue.js の一般的なイベントをいくつか示します。

1. click イベント

このイベントは、ボタンやリンクなどのクリック可能な要素がクリックされたときにトリガーされます。 これは一般に、ユーザーが要素を操作するときにアクションを実行したり、関数をトリガーしたりするために使用されます。 

<button v-on:click="handleClick">Click me</button>
methods: {  
  handleClick() {  
    console.log('Button clicked!');  
  }  
}

 

2. input イベント

このイベントは、要素の値が input 変更されるとトリガーされます。 これは、 値を Vue のコンポーネントのデータ プロパティに v-model バインドするディレクティブとともによく使用されます。 input これにより、値を事後的に更新し、変更を追跡することができます input。 

<input v-model="message" v-on:input="handleInput" />
data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleInput() {  
    console.log('Input value:', this.message);  
  }  
}

 

3. change イベント

このイベントは、選択ドロップダウンやチェックボックスなどのフォーム要素の値が変更されたときにトリガーされます。 これは通常、選択されたオプションまたは要素のチェック状態に基づいてアクションを実行したり、データを更新したりするために使用されます。 

<select v-model="selectedOption" v-on:change="handleSelectChange">  
  <option value="option1">Option 1</option>  
  <option value="option2">Option 2</option>  
</select>
data() {  
  return {  
    selectedOption: ''  
  };  
},  
methods: {  
  handleSelectChange() {  
    console.log('Selected option:', this.selectedOption);  
  }  
}

 

4. submit イベント

submit このイベントは、ボタンをクリックするかフィールド内で Enter キーを押すこと によってフォームが送信されるときにトリガーされます input。 これは通常、フォーム送信の処理、 user の検証 input 、API リクエストの作成やデータの保存などのアクションの実行に使用されます。 

<form v-on:submit="handleSubmit">  
  <input type="text" v-model="name" />  
  <button type="submit">Submit</button>  
</form>
data() {  
  return {  
    name: ''  
  };  
},  
methods: {  
  handleSubmit(event) {  
    event.preventDefault();  
    console.log('Form submitted! Name:', this.name);  
  }  
}

 

5. keyup イベント

このイベントは、キーが押された後に放されたときにトリガーされます。 input これは、アイテムのリストのフィルタリングや検索機能のトリガーなど、 キーボードに応答してアクションを実行するためによく使用されます。 

<input v-model="message" v-on:keyup="handleKeyUp" />
data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyUp() {  
    console.log('Key up event triggered!');  
  }  
}

 

6. keydown イベント

このイベントは、キーが押されたときにトリガーされます。 これは、特定のキーの組み合わせをリッスンしたり、キーを押したままの操作(スライド ショーの移動やゲームの制御など) を実行したりするためによく使用されます。 

<input v-model="message" v-on:keydown="handleKeyDown" />
data() {  
  return {  
    message: ''  
  };  
},  
methods: {  
  handleKeyDown() {  
    console.log('Key down event triggered!');  
  }  
}

 

7. mouseover イベント

このイベントは、マウス ポインタが要素上に移動するとトリガーされます。 これは通常、要素の上にマウスを移動したときに追加情報を表示したり、視覚的なフィードバックを提供したりするために使用されます。 

<div v-on:mouseover="handleMouseOver">Hover over me</div>
methods: {  
  handleMouseOver() {  
    console.log('Mouse over event triggered!');  
  }  
}

 

8. mouseout イベント

このイベントは、マウス ポインターが要素の外に移動されるとトリガーされます。 これは、マウスが要素の上に置かれなくなったときに、要素を非表示にしたり変更したりするためによく使用されます。 

<div v-on:mouseout="handleMouseOut">Move mouse out</div>
methods: {  
  handleMouseOut() {  
    console.log('Mouse out event triggered!');  
  }  
}

 

9. scroll イベント

このイベントは、要素がスクロールされるとトリガーされます。 これは、無限スクロール、コンテンツの遅延読み込み、位置に基づいた UI 要素の更新などの機能を実装するためによく使用されます scroll。 

<div v-on:scroll="handleScroll">Scroll me</div>
methods: {  
  handleScroll() {  
    console.log('Scroll event triggered!');  
  }  
}

 

10. focus イベント

このイベントは、要素が を受信したとき focus 、通常は要素をクリックしたとき、またはユーザーがキーボードを使用して要素に移動したときにトリガーされます。 これは通常、アクションを実行したり、 input または 要素が得られたときに視覚的なフィードバックを提供したりするために使用されます focus。 

<input v-on:focus="handleFocus" />
methods: {  
  handleFocus() {  
    console.log('Input focused!');  
  }  
}

 

これらは、Vue.js のイベントの基本的な例のほんの一部です。 プロジェクトの特定のニーズに合わせてイベント処理関数をカスタマイズできます。