Home-theater-designers
ユーザー イベントをリッスンすることは、レスポンシブ Web アプリにとって不可欠な部分であり、Vue アプリも例外ではありません。 Vue は、v-on ディレクティブを使用してイベントを処理するシンプルかつ効率的な方法で構築されています。
Vue のイベント バインディングとは何ですか?
イベント バインディングは、イベント リスナーをイベント バインディングにアタッチできるようにする Vue.js の機能です。 ドキュメント オブジェクト モデル (DOM) エレメント。イベントが発生すると、イベント リスナーは Vue アプリでアクションまたは応答をトリガーします。
今日のメイクアップビデオ スクロールしてコンテンツを続けてください
Vue でイベント バインディングを実現するには、 ヴオン 指令。このディレクティブにより、アプリはクリック、Enter、キーアップ イベントなどのユーザー イベントをリッスンできるようになります。
を使用してイベント リスナーを要素にアタッチするには ヴオン 、イベント名をパラメーターとしてディレクティブに追加します。
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
})
app.mount('#app')
</script>
</body>
</html>
上記のコード ブロックは、 クリック イベント。コードブロックは ボタン を増やすには カウンター Vue インスタンスの data プロパティの値を 1 つ増やします。
上記のコード ブロックは JavaScript 式をバインドします。 カウンタ++ ボタンに クリック とのイベント ヴオン 指令。 Vue が使用するのは、 @ の代わりの短縮形としての文字 ヴオン ～による指令 ヴオン の頻繁な使用法:
<button @click="counter++">Click me</button>
Vue のイベント バインディングはクリック イベントに限定されません。 Vue は、キー押下イベント、マウスオーバー イベントなどの他のイベントを処理します。
Facebookでtbhはどういう意味ですか
これらのイベントのいずれかをバインドするには、 ヴオン ディレクティブの場合は、 クリック イベントを目的のイベントの名前に置き換えます。
<button @keydown.enter="counter++">Click me</button>
上記のコードは、 ボタン それは、 キーダウン イベント。ボタンにフォーカスがあるときにいずれかのキーが押されると、Vue は カウンタ++ 表現。
Vue でのイベントとメソッドのリンク
ほとんどの Vue アプリでは、発生する特定のイベントに基づいて、より複雑なロジックを処理できます。イベントとメソッドは連携して動作し、イベントに基づいてアプリのアクションを実行します。
のメソッドプロパティ Vue のオプション オブジェクト Vue アプリの反応性を高めるために必要な重要な機能が保持されています。 Vue のメソッド プロパティを使用すると、イベントに基づいて複雑なロジックを処理できます。
以下は、methods プロパティによって処理されるイベントを表示する Vue アプリの例です。
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
上記の Vue アプリは、イベントとメソッドをリンクする方法を示しています。アプリには、ユーザーがクリックしてデータ プロパティのカウンター値を増減できる 2 つのボタンがあります。
アプリはこれを実現します。 @クリック 指令。の @クリック ディレクティブは、カウンター値を操作するためのメソッド プロパティ内の関数を指します。
引数をクリック イベントにリンクする場合、increment メソッドとreduce メソッドをカスタマイズして、メソッドに渡す引数に基づいてカウンター値を追加または削減できます。
そのようです：
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
このコード ブロックは以前の Vue アプリを拡張して、ボタンのクリック イベント リスナーにリンクされたメソッドに引数を渡すことができるようにします。
Vue インスタンスの increment メソッドとreduce メソッドは引数 num を受け取り、カウンター プロパティを増減します。
この例では、Vue でメソッドをイベントにリンクするときに引数を操作する方法を示します。メソッドをイベントにリンクすると、Vue アプリをよりインタラクティブにするのに役立ちます。
Vue の Prevent 修飾子と Stop 修飾子を調べる
Vue のイベント修飾子を使用すると、アプリケーションの特定のニーズを満たす、より優れたイベント リスナーを作成できます。これらのイベント修飾子を利用するには、Vue で修飾子をイベントにチェーンします。
例えば：
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
上記のコード ブロックは、 防ぐ 送信イベントの修飾子。の 防ぐ modifier は、Vue でフォームを操作するときによく使用されます。
の 防ぐ 修飾子の目的は、ページをリロードするというフォーム送信のデフォルトの動作を防ぐことです。使用する 防ぐ , Vue は、 ハンドル送信 メソッドはフォームの送信を処理します。
非常に便利な修飾子のもう 1 つの例は、 ストップ イベント修飾子。の ストップ イベント修飾子は、イベントが DOM ツリーの上に伝播するのを阻止します。
通常、HTML 子要素のイベントは DOM ツリーを通じて発生し、親要素に関連付けられたイベント リスナーをアクティブにします。これを防ぐことができます イベントの伝播 とともに ストップ 修飾子を使用して、イベントがさらなるイベント リスナーをトリガーしないようにします。
どのようにして ストップ 修飾子は、DOM ツリーのさらに上位でイベントの伝播を停止します。以下のコード ブロックを考慮してください。
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
});
app.mount("#app");
</script>
</body>
上記のコード ブロックには、3 つの異なる要素にアタッチされた 3 つのイベント リスナーがあります。の ボタン 要素は div 内にあり、 内側 クラス、一方 div と 内側 クラスは div 内にあります 外側 クラス。
3 つの要素のそれぞれが、 クリック イベントとログがコンソールに記録され、クリックされた HTML 要素の名前が記録されます。以下は、上記のコード ブロックを理解しやすくするための追加のクラス CSS スタイルです。
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head>
プログラムを実行すると、作成された Vue アプリは次のようになります。
ボタンをクリックすると、プログラムが ボタンクリック メソッドを実行し、メッセージをコンソールに記録します。プログラムはまた、 内側クリック 方法。
ただし、プログラムは 外側クリック コードブロックが追加したため、メソッド ストップ の修飾子 内側クリック イベントリスナー。これにより、イベントが DOM ツリーの上に伝播するのが停止されます。
退屈したときにオンラインで行う生産的なこと
なしで ストップ 修飾子を使用すると、プログラムは ボタンクリック ボタンをクリックすると、イベントがツリーを伝播し続け、 内側クリック メソッド、そして 外側クリック 方法。
Web アプリでのイベントの処理
Vue でイベント バインディングを使用して要素にイベント リスナーをアタッチする方法と、イベントの発生時にメソッドを呼び出す方法を学習しました。また、イベント修飾子を使用してイベントの動作をカスタマイズする方法も理解しました。
Web アプリは、機能を実行するために何らかの形式のユーザー イベントに依存します。 JavaScript には、これらのさまざまなイベントをキャプチャして処理するための多くのメソッドが組み込まれています。これらのイベントは、インタラクティブなアプリの構築に役立ちます。