Vue のイベント監視命令 v-on について話しましょう-Vue.js-php.cn

Vue のイベント監視命令 v-on について話しましょう

青灯夜游

リリース： 2022-08-10 15:30:09

転載

1971 人が閲覧しました

フロントエンド開発では、ユーザーと頻繁に対話する必要があります。このとき、クリック、ドラッグ、キーボードイベントなどのユーザーイベントを監視する必要があります。Vue でイベントを監視するにはどうすればよいですか? v-on ディレクティブを使用します。次の記事では、Vue のイベント監視コマンド v-on について説明します。

#v-on コマンドの紹介

機能: バインディング定義されたイベントリスナー:
#省略形: @
期待されるもの: 関数 (メソッド) | インラインステートメント (内部式) | オブジェクト (オブジェクト)
パラメータ:event

Vue でイベントリスナーをバインドします。イベントタイプはパラメータによって指定されます。式はメソッドの名前またはinline ステートメント。修飾子がない場合は省略できます。 (学習ビデオ共有:

vue ビデオチュートリアル)

v2.4.0 以降、v-on はパラメーターオブジェクトなしでイベント/リスナーのキーと値のペアをバインドすることもサポートします。。オブジェクト構文を使用する場合、修飾子はサポートされないことに注意してください。

通常の要素で使用すると、ネイティブ DOM イベントのみをリッスンできます。カスタム要素コンポーネントで使用すると、子コンポーネントによってトリガーされるカスタムイベントをリッスンすることもできます。

ネイティブ DOM イベントをリッスンする場合、メソッドはイベントを唯一のパラメーターとして受け取ります。インラインステートメントを使用する場合、ステートメントは $event 属性にアクセスできます: v-on:click="handle('ok', $event)"。

最初に簡単な例を見てみましょう

<!-- Template -->
<div id="app">
    <h1 v-on:click="clickMe">点击我</h1>   
</div>

// JavaScript
var app = new Vue({
    el: &#39;#app&#39;,
    methods: {
        clickMe: function() {
            alert("点击我，我就出来了!(^_^)")
        }
    },
    data: {
    }
})

ログイン後にコピー

表示される効果は次のとおりです:

Vue のイベント監視命令 v-on について話しましょう

Vue テンプレートでは、次を使用します。

v-on を実行し、click イベント (v-on:click) をバインドし、この click イベントをバインドします。イベント clickMe がトリガーされました。この clickMe は Vue では通常、methods: {} に配置します。つまり、clickMe 関数は methods# に記述されます。＃＃真ん中。

v-on:click="clickMe"

を参照してください。これは、HTML の on Clock="clickMe" とよく似ていますか?見た目から判断すると、書き方は違いますが、結果は同じです。 Vue では、v-on:click の代わりに @click を使用することもできます。その後、彼らは同じ役割を果たします。 Vue では、上記の例以外にも、

v-on

の次の使用方法があります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"> <button v-on:click="clickMe"></button>  <button v-on="{ mousedown: doThis, mouseup: doThat}"></button>  <button v-on:click="doThat(&#39;Hello&#39;, $event)"></button>  <button @click="doThis"></button>  <button @click.stop="doThis"></button>  <button @click.prevent="doThis"></button>  <form @submit.prevent></form>  <button @click.stop.prevent="doThis"></button>  <input @keyup.13="onEnter" />  <button v-on:click.once="doThis"></button></pre><div class="contentsignin">ログイン後にコピー</div></div>on サブコンポーネントカスタムイベント (イベントサブコンポーネントがトリガーするときにハンドラーが呼び出されます

my-event

): <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><my-component @my-event="handleThis"></my-component>  <my-component @my-event="handleThis(123, $event)"></my-component>  <my-component @click.native="onClick"></my-component></pre><div class="contentsignin">ログイン後にコピー</div></div> 上記の簡単な例から、Vue がイベント処理のプロセスにあることがわかります。それにはいくつかの修飾子が付いています。

.stop
:event.stopPropagation()を呼び出す
.prevent
:イベントを呼び出す.preventDefault()
.capture
: イベントリスナーを追加するときにキャプチャモードを使用します
.self
: コールバックは、リスナーがバインドされている要素自体からイベントがトリガーされた場合にのみトリガーされます。
.{keyCode | keyAlias }
:特定のキーからイベントがトリガーされた場合のみコールバック
: コンポーネントのルート要素
## のネイティブイベントをリッスンします。
#.once
.left
.right
.middle
.passive
{passive: true}
モードでリスナーを追加します (v2.3.0 でのみ利用可能)Vue の公式 Web サイトがイベントとカスタマイズを処理しますコンポーネントのイベントについて詳しく説明します。ご興味がございましたら、対応するコンテンツをご覧ください:

#イベントハンドラー

コンポーネントのカスタマイズイベント
#v-on example

この効果は非常に簡単です。数値を増やすには

をクリックし、数値を減らすには

- Vue のイベント監視命令 v-on について話しましょうをクリックします。

Vue では、テンプレートには 3 つの要素、2 つのボタン、および数値を表示するコンテナーが含まれています。最初のボタンは加算計算を実行し、2 番目のボタンは減算カウントを実行します。簡単な構造は次のとおりです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:html;toolbar:false"><div id="app"> <button v-on:click="increase">+</button> <span>{{ count }}</span> <button v-on:click="reduce">-</button> </div></pre><div class="contentsignin">ログイン後にコピー</div></div><p>两个按钮上都绑定了一个<code>click事件，点击按钮分别触发increase和reduce两个函数，前者做加法，后者做减法。另外一个元素中我们有一个值{{ count }}。每次点击按钮这个{{ count }}都会做相应的变化。

模板有了之后，需要添加对应的功能。

let app = new Vue({
    el: &#39;#app&#39;,
    methods: {
        increase: function() {
            this.count++
        },
        reduce: function() {
            this.count--
        }
    },
    data: {
        count: 0
    }
})

ログイン後にコピー

在Vue中，我们在methods中声明了两个函数，分别是increase（加法）和reduce（减法）。另外需要在数据源中声明count。

演示demo地址：https://codepen.io/airen/pen/PJbKNg

对于这么简单的效果，我们也可以直接在v-on中处理完：

<button v-on:click="count += 1">+</button>

ログイン後にコピー

比如我们前面的示例，修改下：


  <button v-on:click="count += 1">+</button>
  {{ count }}
  


// JavaScript
let app = new Vue({
  el: '#app',
  data: {
    count: 0
  }
})

ログイン後にコピー

效果一样：

Vue のイベント監視命令 v-on について話しましょう

演示demo地址：https://codepen.io/airen/pen/veyeLY

（学习视频分享：web前端开发、编程基础视频）

以上がVue のイベント監視命令 v-on について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。