著者は、 Write for DOnations プログラムの一環として、 Open Sourcing MentalIllnessを選択して寄付を受け取りました。

序章

Vue.js 開発では、クライアントのWebブラウザーがHTMLと JavaScript を読み取り、開発者が記述した指示に基づいてWebページをレンダリングします。 しかし、Webページまたはアプリケーションはデータを処理する必要があるだけではありません。 また、ユーザーの操作を処理する必要があります。 これを行うために、開発者は、ユーザーがHTML要素を操作したときにコードを実行するJavaScriptのイベントを使用します。

イベントは、ユーザーインターフェイスボタンまたは物理的なキーボードまたはマウスを使用したユーザーの操作をキャプチャできます。 JavaScriptでは、イベントリスナーを作成して、そのイベントが発生するのを待ってから、コードのブロックを実行します。 Vue.jsでは、イベントをリッスンする必要はありません。 それは自動的に行われます v-on: 指令。

このチュートリアルでは、Vueのイベントを使用して、空港コードのアプリケーションを作成します。 ユーザーが空港コードを選択すると、アプリはその空港を「お気に入り」コレクションに追加します。 このプロジェクトをフォローすることで、イベントとは何か、Vueの組み込みイベントの使用方法、および独自のカスタムイベントを作成する方法を学習します。

前提条件

このチュートリアルを完了するには、次のものが必要です。

ステップ1—プロジェクトの設定

このチュートリアルの最初のステップは、ビューに表示するデータを使用してデモプロジェクトを設定することです。 これには、空港データを含むJavaScriptオブジェクトのarray と、データを反復してレンダリングするためのVueコンポーネントが含まれます。

まず、VueCLIを使用してプロジェクトを生成します。

  1. vue create favorite-airports

これにより、という名前のプロジェクトが作成されます favorite-airports. このチュートリアルではVue3を使用するため、プロンプトが表示されたら、オプションを選択します Default (Vue 3) ([Vue 3] babel, eslint):

Output
Vue CLI v4.5.6
? Please pick a preset:
  Default ([Vue 2] babel, eslint)
❯ Default (Vue 3) ([Vue 3] babel, eslint)
  Manually select features

プロジェクトを作成したら、このプロジェクトのすべてのローカルデータを保持するディレクトリを作成します。 まず、新しいプロジェクトフォルダを作業ディレクトリにします。

  1. cd favorite-airports

次に、 data のディレクトリ src ディレクトリ：

  1. mkdir src/data

選択したテキストエディタで、というファイルを開きます src/data/airports.js. 次のデータをファイルに追加します。

お気に入り-airports/src / data / airports.js
export default [
  {
    name: 'Cincinnati/Northern Kentucky International Airport',
    abbreviation: 'CVG',
    city: 'Hebron',
    state: 'KY',
  },
  {
    name: 'Seattle-Tacoma International Airport',
    abbreviation: 'SEA',
    city: 'Seattle',
    state: 'WA',
  },
  {
    name: 'Minneapolis-Saint Paul International Airport',
    abbreviation: 'MSP',
    city: 'Bloomington',
    state: 'MN',
  },
  {
    name: 'Louis Armstrong New Orleans International Airport',
    abbreviation: 'MSY',
    city: 'New Orleans',
    state: 'LA',
  },
  {
    name: `Chicago O'hare International Airport`,
    abbreviation: 'ORD',
    city: 'Chicago',
    state: 'IL',
  },
  {
    name: `Miami International Airport`,
    abbreviation: 'MIA',
    city: 'Miami',
    state: 'FL',
  }
]

このデータは、米国内のいくつかの空港で構成されるオブジェクトの配列です。 次に、このデータを繰り返し処理して、次のカードで構成されるカードを生成します。 name , abbreviation, city、 と state プロパティ。 ユーザーがカードをクリックすると、アプリは親にイベントを送信します。これにより、お気に入りの空港を表すデータのコレクションにその空港が追加されます。

保存して閉じます airport.js ファイル。

データをレンダリングするには、名前を付けて単一ファイルコンポーネント（SFC）を作成します src/components/AirportCard.vue テキストエディタで開きます。 このコンポーネントには、エアポートカードのすべてのスタイルとロジックが含まれます。

次の内容をファイルに追加します。

お気に入り-airports/src / components / AirportCard.vue
<template>
  <div class="airport">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

<script>
export default {
  props: {
    airport: {
      type: Object,
      required: true
    }
  }
}
</script>

<style scoped>
.airport {
  border: 3px solid;
  border-radius: .5rem;
  padding: 1rem;
}

.airport p:first-child {
  font-weight: bold;
  font-size: 2.5rem;
  margin: 1rem 0;
}

.airport p:last-child {
  font-style: italic;
  font-size: .8rem;
}
</style>

このコンポーネントにはpropが含まれています。これは、Vue.jsで、親コンポーネントから子コンポーネントにデータを渡す方法です。 The template 次に、セクションはこのデータをレンダリングします。 単一ファイルコンポーネントの詳細については、Vue単一ファイルコンポーネントを使用してコードの再利用可能なブロックを作成する方法チュートリアルを確認してください。

コードスニペットにCSSが含まれていることに気付くかもしれません。 の中に AirportCard.vue コンポーネント、ラッパー <div> のクラスが含まれています airport. このCSSは、各空港にカードの外観を与えるために境界線を追加することにより、生成されたHTMLにスタイルを追加します。 :first-child と :last-child 最初と最後に異なるスタイルを適用する疑似セレクターです p 内部のHTMLのタグ div のクラスで airport.

ファイルを保存して、テキストエディタを終了します。

次に、既存のを変更します App.vue 反復するコンポーネント airports.js データと一連のレンダリング AirportCards.vue コンポーネント。 開ける src/App.vue テキストエディタで、内容を次の強調表示されたコードに置き換えます。

お気に入り-airports/src / App.vue
<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    return { airports }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
}
</style>

これにより、データとSFCがインポートされ、 v-for データを反復処理するディレクティブ。 airport.js 配列。 また、を対象としたCSSを追加します wrapper クラス。CSSグリッドを使用してカードのレイアウトを管理します。

ファイルを保存して終了します。 プロジェクトがセットアップされたら、次のコマンドを使用してローカル開発サーバーを実行します。

  1. npm run serve

これにより、サーバーが起動します localhost、通常はポート :8080. 選択したWebブラウザを開き、次のWebサイトにアクセスします。 localhost:8080 以下を見つけるために：

サンプルプロジェクトを設定したので、次に、を使用して組み込みイベントを探索します。 v-on 指令。 このイベントが発生すると、アラートポップアップボックスが表示され、そのイベントに関連付けられている空港の空港コードが示されます。

ステップ2—でイベントをリッスンする v-on 指令

前述のように、イベントは、ユーザーが DOM（ドキュメントオブジェクトモデル）のHTML要素を操作するときに関数を実行する方法です。 バニラJavaScriptを作成する場合、イベントで関数を実行するには、イベントリスナーと呼ばれるものを作成できます。 イベントリスナーは、その相互作用が発生するのを待ってから、コードを実行する関数です。 ただし、Vueを使用すると、 v-on この目的のためのディレクティブ。 ディレクティブは、開発者がDOMを操作するために使用できる再利用可能なコードの一部です。 The v-on ディレクティブは、Vue.jsによってすぐに提供されます。

このステップでは、ユーザーがカードをクリックしたときに実行される関数をアプリケーションに作成します。 を開きます src/components/AirportCard.vue 選択したテキストエディタのコンポーネント。

次の強調表示されたコードを追加して、空港のユーザーにクリックしたことを警告する関数を作成します。

お気に入り-airports/src / components / AirportCard.vue
...
<script>
export default {
  props: {
    airport: {
      type: Object,
      required: true
    }
  },
  setup() {
    function selectAirport(airport) {
      alert(`You clicked on ${airport.abbreviation}. It's located in ${airport.city}, ${airport.state}.`)
    }

    return { selectAirport }
  }
}
</script>
...

Vue.js 3では、リアクティブ関数を定義して、 setup コンポーネントメソッド。 これは、Vueに実行できることを通知します selectAirport の機能 <template>.

関数を定義したら、それをHTML要素のイベントにアタッチします。 前に述べたように、あなたは使用することができます v-on ディレクティブと名前のイベントを添付します click; これはVue.jsによって提供されるイベントです。 の中に AirportCard.vue コンポーネント、追加 v-on ラッパーへのディレクティブ <div>:

お気に入り-airports/src / components / AirportCard.vue
<template>
  <div class="airport" v-on:click="selectAirport(airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>
...

このコードを追加したら、ファイルを保存して終了します。

これで、カードをクリックすると、提供されたメッセージとともにアラートがポップアップ表示されます。 クリックすると CVG たとえば、次のようになります。

The click Vue.jsによってすぐに提供されるイベントはイベントだけではありません。 実際、あなたは使うことができます v-on 次のようなネイティブJavaScriptイベント：

  • keyup
  • mouseover
  • focus
  • mouseenter
  • change

次に、これを変更します v-on:click リスナー mouseover Vue.jsがイベントをリッスンする方法を説明します。 mouseover マウスカーソルがHTML要素上に移動するたびに発生するイベントです。

開く src/components/AirportCard.vue もう一度、次の強調表示されたコードでファイルを更新します。

お気に入り-airports/src / components / AirportCard.vue
<template>
  <div class="airport" @mouseover="selectAirport(airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

ここに示すように、Vueには次の省略構文もあります。 v-on: イベント。 省略構文を使用するには、 v-on と @. ファイルを保存して終了します。

今あなたが訪問するとき localhost:8080 カードにカーソルを合わせると、その関数が実行され、ネイティブアラートが表示されます。

この機能はテスト目的には適していますが、ユーザーがカーソルを合わせるたびにアラートが表示されるため、望ましくない場合があります。 より良いエクスペリエンスは、ユーザーがそのカードに初めてカーソルを合わせたときにのみ表示することです。 バニラJavaScriptでは、ユーザーがカードにカーソルを合わせた回数を追跡し、それ以上の実行を防ぐことができます。 Vue.jsにはイベント修飾子があり、これを利用してより少ないコードで同じことを実現できます。

次のセクションでは、イベント修飾子を調べて、ユーザーエクスペリエンスを向上させるためにそれらを使用します。

ステップ3—イベントおよびキー修飾子の使用

前のセクションでは、で関数を実行しました click と mouseover イベント。 また、Vue.jsの省略形についても学びました v-on イベント。 これに修飾子を付けることで、これをさらに拡張します mouseover イベントなので、関数は1回だけ実行されます。

Vue.jsは、いくつかのイベント修飾子を提供します。 これらのいくつかは次のとおりです。

  • .stop：イベントの伝播を停止します
  • .prevent：HTML要素のデフォルトの動作を防ぎます
  • .capture：選択した要素の前の内部要素を対象とするイベントを処理します
  • .self：次の場合にのみハンドラーをトリガーします event.target 要素自体です
  • .once：関数を1回だけ実行します
  • .passive：イベントを待つのではなく、要素のデフォルトの動作をすぐに実行できるようにします。これは、モバイルデバイスでのスクロールのパフォーマンスを最適化するために使用できます。

この場合、を使用します .once 修飾子。 テキストエディタで、 AirportCard.vue コンポーネントを作成し、既存の修飾子を追加します mouseover イベント：

お気に入り-airports/src / components / AirportCard.vue
<template>
  <div class="airport" @mouseover.once="selectAirport(airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

ファイルを保存します。 ブラウザでアプリケーションにアクセスすると、イベントは最初に1回だけ発生することがわかります。 mouseover イベント。

次に、キー修飾子を使用して修飾子の探索を続けます。 これらのキー修飾子は、次のようなキーストロークイベントに関連付けられています keyup. この次の部分では、このクリックアクションをもう少し明確にしたいことを想像してください。 これを行う1つの方法は、キー修飾子をに追加することです。 @click のイベント .airport <div> テンプレートで。

これを行うには、を変更します @mouseover に @click を追加します .shift 修飾子：

お気に入り-airports/src / components / AirportCard.vue
<template>
  <div class="airport" @click.shift="selectAirport(airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>

変更を保存して、ブラウザでアプリケーションを開きます。 を押さずにカードをクリックすると SHIFT キー、アラートは何もしません。 さて、を押し続けてみてください SHIFT カードをクリックするときにキーを押します。 これで関数が実行され、アラートが送信されます。

このセクションでは、Vueの組み込みイベントとそれらのイベントに関連する修飾子について学習しました。 これらの組み込みイベントで多くのことを成し遂げることができますが、カスタムイベントが必要になる場合があります。 次のセクションでは、カスタムイベントを使用して、親にアクションを発行し、関数を実行するようにします。

ステップ4—カスタムイベントの作成

Vue.jsでアプリケーションを開発する場合、カスタムイベントを介して親コンポーネントにデータを渡す必要がある場合があります。 プロップは読み取り専用のデータであり、親から子に渡されますが、カスタムアクションは $emit その反対です。 最も再利用可能なコンポーネントを作成するには、これらを関数と考えるのが最善です。 小道具（引数）を介してデータを渡し、親に値を返します（ return 価値）。

子コンポーネントから親にイベントを発行するには、 $emit 関数。 これを実装する前に、このチュートリアルでは、これがどのように機能するかを示す例を紹介します。

The $emit 関数は、アクション名（文字列）と親に渡す値の2つの引数を受け入れます。 次の例では、ユーザーがボタンをクリックすると、値が送信されます。 CVG アクションの下の親コンポーネントに favoriteAirport:

ChildComponent.vue
<template>
  <button @click="$emit('favoriteAirport', 'CVG')">A button</button>
</template>

親コンポーネントでは、 v-on ディレクティブとリッスン favoriteAirport イベント。 このカスタムイベントが発生すると、コードは次の値で何かを実行します。

ParentComponent.vue
<template>
  <child-component @favoriteAirport="favoriteAirport = $event" />
</template>

<script>
import { ref } from 'vue'
export default {
  setup() {
    const favoriteAirport = ref('')

    return { favoriteAirport }
  }
}
</script>

イベントの価値は $event. この場合、 $event 実は CVG、次に、と呼ばれるリアクティブデータプロパティに保存します favoriteAirport.

カスタムイベントがどのように見えるかがわかったので、このカスタムイベントをアプリケーションに実装することで、それを実践します。

を開きます AirportCards.vue テキストエディタのコンポーネント。 の中に @click イベントの場合、関数への参照を削除して、次のように置き換えます $emit("favoriteAirport", airport). 最初のarugmentはイベントの名前であり、2番目はあなたが放出している値であることを忘れないでください。

お気に入り-airports/src / components / AirportCard.vue
<template>
  <div class="airport" @click="$emit('favoriteAirport', airport)">
    <p>{{ airport.abbreviation }}</p>
    <p>{{ airport.name }}</p>
    <p>{{ airport.city }}, {{ airport.state }}</p>
  </div>
</template>
...

ファイルを保存します。 これで、ユーザーが空港カードをクリックすると、カスタムイベントが発生し、それが渡されます。 airport 物体。

次に、開く src/App.vue テンプレートにHTMLを追加します。 すでに存在する6枚のカードの後にお気に入りの空港リストを表示します。

お気に入り-airports/src / App.vue
<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
    </div>
    <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
    <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
   </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import allAirports from '@/data/airports.js'
import AirportCard from '@/components/AirportCard.vue'

export default {
  components: {
    AirportCard
  },
  setup() {
    const airports = ref(allAirports)
    const favoriteAirports = ref([])

    return { airports, favoriteAirports }
  }
}
</script>
...

このコードスニペットでは、と呼ばれるリアクティブデータプロパティを作成しています favoriteAirports、これは空の配列です。 の中に <template>、空の配列を反復処理してレンダリングします <airport-card /> 前の手順で行ったように、コンポーネント。

次に、を追加する必要があります v-on カスタムイベントのイベント：

お気に入り-airports/src / App.vue
<template>
  <div class="wrapper">
    <div v-for="airport in airports" :key="airport.abbreviation">
      <airport-card :airport="airport" @favoriteAirport="favoriteAirports.push($event)" />
    </div>
    <h1 v-if="favoriteAirports.length">Favorite Airports</h1>
    <div v-for="airport in favoriteAirports" :key="airport.abbreviation">
      <airport-card :airport="airport" />
   </div>
  </div>
</template>
...

の中に @favoriteAiport カスタムイベントでは、JavaScript push（）メソッドを使用して、子から空港を追加しました（$event）に favoriteAirports リアクティブデータプロパティ。

ブラウザを開き、次の場所でプロジェクトに移動します。 localhost:8080. 空港カードの1つをクリックすると、そのカードがお気に入りの空港の下に表示されます。

このセクションでは、カスタムイベント、それらが何であるか、およびそれらの使用方法について学習しました。 カスタムイベントは、データを親コンポーネントに渡す方法です。 $emit Vueが提供する機能。 そのデータが出力されたら、配列に追加するなど、親コンポーネントでさらに操作できます。

結論

このチュートリアルでは、Vue.jsが次のような多くの組み込みイベントをリッスンする方法を学びました。 click と mouseover. それに加えて、イベントとキー修飾子、追加機能を提供するためにイベントに追加した小さなコードを試してみました。 これで、関数を1回実行するようにアプリを設定します。 .once モディファイアとを押したときにのみ発砲する SHIFT キーを使用して .shift 修飾子。

Vueは、イベントリスナーを手動で設定するよりも、データの操作に集中できるイベントをリッスンする効率的な方法を提供します。 それに加えて、Vueではコンポーネントを関数として考えることができます。それらはデータを受け入れます props で値を返すことができます $emit.

Vueコンポーネントの詳細については、Vueドキュメントを読むことをお勧めします。 Vueのその他のチュートリアルについては、Vue.jsシリーズページを使用してWebサイトを開発する方法を確認してください。