VUE3 開発入門チュートリアル: Vue.js プラグインを使用して検索ボックス コンポーネントをカプセル化する

Vue.js は人気のある JavaScript フレームワークであり、VUE3 はその最新バージョンであり、より高速で強力な機能を提供します。この記事では、VUE3 および Vue.js プラグインを使用して単純な検索ボックス コンポーネントをカプセル化する方法を説明します。

1. Vue プロジェクトの作成

まず、VUE3 と Vue-cli をインストールする必要があります。 Vue-cli をインストールした後、コマンド

vue create search-box

を入力して新しい Vue プロジェクトを作成し、プロンプトに従ってインストールします。

2. 新しいプラグインの作成

プロジェクト フォルダーに新しいプラグインを作成する必要があります。 src フォルダーに、search-box.js というファイルを作成します。このファイルでは、検索ボックス コンポーネントとプラグインを定義します。

search-box.js では、最初に Vue をインポートする必要があります:

import Vue from 'vue'

次に、SearchBox という名前の新しい Vue コンポーネントを定義できます:

const SearchBox = Vue.component('SearchBox', {
  template: `
    <div>
      <input type="text" v-model="searchTerm" ref="searchInput" @keyup.enter="performSearch" placeholder="Search...">
      <button @click="performSearch">Search</button>
    </div>
  `,
  data() {
    return {
      searchTerm: ''
    }
  },
  methods: {
    performSearch() {
      this.$emit('search', this.searchTerm)
      this.$refs.searchInput.focus()
      this.searchTerm = ''
    }
  }
})

In 上記ではコードでは、単純な検索ボックス コンポーネントを定義しました。このコンポーネントには、入力ボックス、ボタン、および検索を処理できる関数が含まれています。ユーザーが検索ボタンをクリックするか Enter キーを押すと、searchTerm 値が Emit イベントを通じて親コンポーネントに送信されます。

3. プラグインのインストール

Vue プラグインを使用して、search-box.js を使用可能な Vue プラグインに変換する必要があります。 search-box.js ファイルの最後に、次のコードを追加します。

export default {
  install(Vue) {
    Vue.component('SearchBox', SearchBox)
  }
}

このようにして、使用可能な Vue.js プラグインが作成されました。このプラグインは Vue プロジェクトで使用できます。

4. プラグインの使用

次に、Vue プロジェクトで検索ボックス プラグインを使用する必要があります。これを行うには、プロジェクトの main.js ファイルに search-box.js プラグインをインポートし、Vue.use メソッドを使用してプラグインをインストールします。

import Vue from 'vue'
import SearchBox from './search-box'

Vue.use(SearchBox)

これで、検索ボックス プラグインがインストールされました。 Vue プロジェクトで使用できます。

5. コンポーネントでの SearchBox の使用

Vue プロジェクトでは、検索ボックス コンポーネントを使用できます。たとえば、App.vue という名前のコンポーネントに、search という名前のコンポーネントを追加できます。

<template>
  <div>
    <SearchBox @search="doSearch"></SearchBox>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    doSearch(searchTerm) {
      alert(searchTerm)
    }
  }
}
</script>

上記のコードでは、search という名前のコンポーネントを追加し、それに doSearch というメソッドを追加しました。ユーザーが検索するとメソッドが呼び出され、検索語を含むアラート ボックスが表示されます。

6. Vue プロジェクトを実行する

最後に、必要なのは Vue プロジェクトを実行することだけです。コマンド ライン ターミナルで、次のコマンドを入力します。

npm run serve

これにより、Vue プロジェクトが開始されます。ブラウザで http://localhost:8080 を開いて、検索ボックス コンポーネントを表示します。

結論

このチュートリアルでは、Vue.js プラグインを使用して単純な検索ボックス コンポーネントをカプセル化する方法を学習しました。私たちは、VUE3 プロジェクトでこのコンポーネントを使用する方法を学び、VUE3 がより高速で、より強力で、使いやすいことがわかりました。この知識を使用して、独自の Vue.js アプリケーションを構築できるようになりました。

以上がVUE3 開発入門チュートリアル: Vue.js プラグインを使用して検索ボックス コンポーネントをカプセル化するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。