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

フロントエンド開発では、ユーザーと頻繁に対話する必要があります。このとき、クリック、ドラッグ、キーボード イベントなどのユーザー イベントを監視する必要があります。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 id="点击我">点击我</h1>   
</div>

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

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

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:php;toolbar:false;'>&lt;!-- 方法处理器 --&gt; &lt;button v-on:click=&quot;clickMe&quot;&gt;&lt;/button&gt; &lt;!-- 对象语法 （v2.4.0版本以上才支持） --&gt; &lt;button v-on=&quot;{ mousedown: doThis, mouseup: doThat}&quot;&gt;&lt;/button&gt; &lt;!-- 内联语句 --&gt; &lt;button v-on:click=&quot;doThat(&amp;#39;Hello&amp;#39;, $event)&quot;&gt;&lt;/button&gt; &lt;!-- 缩写 --&gt; &lt;button @click=&quot;doThis&quot;&gt;&lt;/button&gt; &lt;!-- 停止冒泡 --&gt; &lt;button @click.stop=&quot;doThis&quot;&gt;&lt;/button&gt; &lt;!-- 阻止默认行为 --&gt; &lt;button @click.prevent=&quot;doThis&quot;&gt;&lt;/button&gt; &lt;!-- 阻止默认行为， 没有表达式 --&gt; &lt;form @submit.prevent&gt;&lt;/form&gt; &lt;!-- 串联修饰符 --&gt; &lt;button @click.stop.prevent=&quot;doThis&quot;&gt;&lt;/button&gt; &lt;!-- 键修饰符， 键别名 --&gt; &lt;input @keyup.13=&quot;onEnter&quot; /&gt; &lt;!-- 点击回调只会触发一次 --&gt; &lt;button v-on:click.once=&quot;doThis&quot;&gt;&lt;/button&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>on サブコンポーネント カスタム イベント (イベントサブコンポーネントがトリガーするときにハンドラーが呼び出されます

my-event

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

• .stop

  :event.stopPropagation()を呼び出す

• .prevent

  :イベントを呼び出す.preventDefault()

• .capture

  : イベント リスナーを追加するときにキャプチャ モードを使用します

• .self

  : コールバックは、リスナーがバインドされている要素自体からイベントがトリガーされた場合にのみトリガーされます。

• .{keyCode | keyAlias }

  :特定のキーからイベントがトリガーされた場合のみコールバック

#.native
• : コンポーネントのルート要素

  ## のネイティブ イベントをリッスンします。

  #.once
: コールバックを 1 回だけトリガーします。

• .left
: マウスの左ボタンがクリックされたときのみトリガーします ( v2.2.0 でのみ使用可能)

• .right
: マウスの右ボタンがクリックされた場合にのみトリガーされます (v2.2.0 でのみ使用可能)

• .middle
: マウスの中ボタンがクリックされたときにのみトリガーされます (v2.2.0 でのみ使用可能)

• .passive
:
• {passive: true}

  モードでリスナーを追加します (v2.3.0 でのみ利用可能)Vue の公式 Web サイトがイベントとカスタマイズを処理しますコンポーネントのイベントについて詳しく説明します。ご興味がございましたら、対応するコンテンツをご覧ください:

#イベント ハンドラー

• コンポーネントのカスタマイズ イベント

• #v-on example

カウンターである簡単なエフェクトを作成しましょう。エフェクトは次のとおりです:

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

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

- をクリックします。

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

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

let app = new Vue({
    el: '#app',
    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
  }
})

效果一样：

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

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

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