Vueのイベントでユーザーインタラクションを作成する方法

投稿日: 2022-04-20 2022-04-20
タグ: Development, javascript, Vue.js

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

序章

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

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

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

前提条件

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

コンピューターにインストールされているNode.jsバージョン14.17.0以降。これをmacOSまたはUbuntu20.04にインストールするには、Node.jsをインストールしてローカル開発環境を作成する方法またはNode.jsのインストール方法のPPAを使用したインストール」の手順に従います。 Ubuntu20.04で。
Vue CLI は、 VueCLIを使用してVue.jsシングルページアプリを生成する方法のステップ1に従ってマシンにインストールされます。このチュートリアルの最初のステップでは、これを使用してVueアプリケーションを作成します。
また、JavaScript、HTML、およびCSSの基本的な知識も必要です。これは、 HTMLを使用してWebサイトを構築する方法シリーズ、CSSを使用してWebサイトを構築する方法シリーズにあります。、およびJavaScriptでコーディングする方法。

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

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

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

vue create favorite-airports

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

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

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

cd favorite-airports

次に、srcディレクトリにdataディレクトリを作成します。

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ファイルを保存して閉じます。

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

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

お気に入り-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で、親コンポーネントから子コンポーネントにデータを渡す方法です。次に、templateセクションがこのデータをレンダリングします。単一ファイルコンポーネントの詳細については、Vue単一ファイルコンポーネントを使用してコードの再利用可能なブロックを作成する方法チュートリアルを確認してください。

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

getdocs

8684