ヴューへの浅い深い：イベント処理

左の最後の1オンv-on：この章の主題である考えを、イベント処理

なぜ我々は、イベントハンドラが必要なのか

多くの場合、フォーム、各種ボタンに直面しているフロントエンド開発、で。そしてそこには、イベントに家である：（クリック）をクリックします。

フロントエンド子供用の靴は、できるだけ頻繁に発生し、確かにそれには見知らぬ人ではありません。例えば：

フォームの送信
ボタンのすべての種類
マルチレベルのメニューを折りたたみ一覧

v-onサポートネイティブの監視DOMされているイベント、vueジャストでも、時間の広い範囲で、前の純粋なJSの文言によってサポートされ、vue書き込みをする方法を真ん中に。

イベント処理を使用することの利点は、私たちができるイベントを通じてなり、データを制御します。

MVVMはポイントは、その後、データ駆動型ということで強調しvueたデータの使用は、それを見るの記事駆動する場合には、双方向バインディングを。アップバインドし、データを操作する方法はありませんならば、それはレンダリングの方法になります。この問題については、問題を解決するには、次のとおりです。イベント処理、そしてデータビューの変化によって駆動イベントデータの変更、の使用を制御します。

イベントハンドラとは何ですか

これは、答えは上記与えられた質問です。

文字通り、それはDOMイベントですが、中にvue使用されているさまざまな方法。
深いそれは、制御データが変更されることが理解コントローラに接続されている表示データブリッジ。

使い方

ボタンのラベルは、イベント処理の文言に目を通します。

<button v-on:需要响应的事件名="处理事件的函数名"></button>

これは、ことに留意すべきです。

イベントを扱う機能しなければならない書かれたmethods中には、現在のコンポーネントのインスタンスがアクセス可能であるしましょう。

それとも昨日の例を続け、私たちはここに最後の質問を解決してみましょう：

変更するには、ボタンのClickイベントを使用してisDark値を。

最初のページにあるプラスボタン：

<template>
  <div>
    <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>
    <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>
    <br/><button v-on:click="change">改变背景</button>
  </div>
</template>

ここでは、応答指定clickイベント関数名をchange、その後、私たちは関数を定義する必要があります。

  methods: {
    change: function() {
      this.isDark = !this.isDark
    }
  }

コードこれはブール値であり、我々は直接だけで罰金否定するので、非常に簡単です。

効果を確認するには：

それは白である、のは、どの時点を見てみましょう：

暗く完成し、再び〜白に戻す]をクリックした後のポイントは非常に完全に我々の要求を満たしていました。

また、他のイベントの数によって達成することができる特殊効果など、：

それがフォーカスを失ったとき、入力ボックスが自動的に検証します
テキスト要素にマウスを移動するように求められたら

などなど。

イベント修飾子

私達はちょうど行う方法を有効にするには、一度ボタンをできるようにしたい場合は？

ポイントの後、それはもはや変化しなかっいきます。

vueこれは、中に利便性を提供し、イベント修飾子、目的は手動でいくつかのロジックネイティブのイベントを処理するために、開発者を避けるためです。

構文は次のとおりです。

<button v-on:事件名.事件修饰符="处理函数"></button>

すべての修飾子は次のとおりです。

.stop
.prevent
.capture
.self
.once
.passive

修飾子は複数使用することができます。

<button v-on:事件名.事件修饰符1.事件修饰符2.事件修饰符3="处理函数"></button>

我々は再びブログの、いくつかの修飾子が出ても、十分な長さ内容を特定薄いを説明するために使用される時には、上記の修飾子が戻ってきました。

ここでは、修飾子が使用します。

.once

コード：

<template>
  <div>
    <h1 v-bind:class="isDark ? 'dark' : 'light'">{{ formatTime(time) }}</h1>
    <a v-for="(item, index) in urlList" v-bind:key="index" v-bind:href="item.url">{{item.text}}</a>

    <!-- 在click后面添加 once 修饰符 -->
    <br/><button v-on:click.once="change">改变背景</button>
  </div>
</template>

前に効果を見るにはクリックしてください：

それは黒で、[Next]をクリックします

これは間違いなく次のクリック1に白、焦点となっては間違いありません！：

まだ白、その後、一度ポイント、または白の変更はありません。.once修飾子たちのニーズに良い解決策。

テキストの最後に書かれました

このように、のためにvue基本的な文法のいくつかは、我々はすでに理解して使用するための予備的なイベントがあります。

次は一緒に学びますルーティングおよびコンポーネントこれら二つのボスのを、そして彼らと、vue開発がより興味深く、多様になります。