Vue.js入門 - イベントハンドリング
イベントハンドリング
Vue.jsのイベントハンドリング機能を学びます。
タスク
基本的なイベントハンドリング
クリックイベントを使ってカウンターを実装します
マウスイベントの処理
マウスオーバーで色が変わるボックスを実装します
フォームイベントの処理
フォーム入力の検証機能を実装します
ヒント
v-onディレクティブ（@）を使って、様々なイベントを処理しましょう。
参考コード
// アプリケーションの作成
const app = Vue.createApp({
data() {
return {
// カウンター
count: 0,
// カラーボックス
boxColor: '#42b883',
// フォーム
username: '',
email: '',
usernameError: '',
emailError: ''
}
},
methods: {
// カウンターのメソッド
incrementCount() {
this.count++
},
// カラーボックスのメソッド
changeColor() {
this.boxColor = '#ff4444'
},
resetColor() {
this.boxColor = '#42b883'
},
// フォームのメソッド
validateUsername() {
if (this.username.length < 3) {
this.usernameError = 'ユーザー名は3文字以上必要です'
} else {
this.usernameError = ''
}
},
validateEmail() {
const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/
if (!emailRegex.test(this.email)) {
this.emailError = '有効なメールアドレスを入力してください'
} else {
this.emailError = ''
}
}
}
})
// マウント
app.mount('#app')