Vue.jsチュートリアル：始めましょう。10のベストプラクティス

Vue.js（Vueとも呼ばれます）は、ユーザーインターフェイスを構築するための人気のあるJavaScriptフレームワークです。そのコアライブラリはビューレイヤーのみに焦点を当てているため、他のライブラリや既存のプロジェクトと簡単に統合できます。このチュートリアルでは、Vueの基本を紹介し、簡単なアプリケーションを作成するプロセスをガイドします。

キーポイント

• Vue.jsは、ビューレイヤーに焦点を当てた人気のJavaScriptフレームワークであり、他のライブラリや既存のプロジェクトと簡単に統合できます。 node.jsとvue CLIを使用して新しいVUEプロジェクトを作成できます。これは、アプリケーションに構造化されたテンプレートを提供します。
• コンポーネントは、複雑なユーザーインターフェイスを作成するために使用できるVUEアプリケーションのビルディングブロックです。 Vueは、インタラクティブ性、条件付きレンダリング、およびコンポーネントへの配列を介したループを追加するための指示も提供します。ベストプラクティスには、アプリケーションを小規模で再利用可能なコンポーネントに分解し、応答性のあるデータに依存する計算に計算されたプロパティを使用することが含まれます。
• 同じ要素のV-IFおよびV-Forの過剰使用、子どものコンポーネントの小道具を直接変更し、グローバルミックスの過剰使用など、Vueの一般的な落とし穴を避けてください。 v-forでキー属性を常に使用して、Vueが各ノードのIDを追跡できるようにします。生産環境向けにアプリケーションを構築するときは、パフォーマンスに最適化してください。

環境を設定します

VUEの使用を開始するには、コンピューターにnode.jsをインストールする必要があります。公式ウェブサイトからダウンロードできます。 Node.jsをインストールした後、Node Package Manager（NPM）を使用してVUEをインストールできます。

端末またはコマンドプロンプトを開いて、次のコマンドを実行します。

<code>npm install -g vue</code>

これにより、システムに最新バージョンのVUEがグローバルにインストールされます。

新しいVUEプロジェクトを作成

Vueインストールを行ったので、新しいプロジェクトを作成しましょう。 Vue CLIを使用して、新しいプロジェクトテンプレートを生成します。まず、次のコマンドを実行してVue CLIをインストールします。

次に、次のコマンドを実行して新しいプロジェクトを作成します。

<code>npm install -g @vue/cli</code>

My-Vue-Appをプロジェクトに指定する名前に置き換えます。 CLIは、プリセットを選択するように求めます。このチュートリアルでは、デフォルトのプリセットを選択してシンプルに保ちます。

<code>vue create my-vue-app</code>

プロジェクトが作成されたら、プロジェクトフォルダーに移動します：

次のコマンドを実行して、開発サーバーを開始します。

<code>cd my-vue-app</code>

これにより、http：// localhost：8080/でローカルサーバーが開始されます。ブラウザでこのURLを開いて、新しいVueアプリを表示します。

Vueプロジェクトの構造を理解<code>npm run serve</code>生成されたプロジェクトの構造を理解しましょう。使用するメインフォルダーとファイルは次のとおりです。

• public：静的資産とindex.htmlファイルが含まれています。
• SRC：コンポーネント、アセット、主要なapp.vueファイルなど、アプリケーションのソースコードが含まれています。
• src/main.js：アプリケーションのエントリポイント。これは、Vueが輸入され、Root Vueインスタンスが作成される場所です。
• src/app.vue：メインアプリケーションコンポーネント。そこでは、アプリケーションのレイアウトと構造を構築します。

最初のVueコンポーネントを作成します

コンポーネントは、VUEアプリケーション用のビルディングブロックです。それらは、複雑なユーザーインターフェイスを作成するために組み合わせることができる再利用可能なコードスニペットです。メッセージを表示するシンプルなコンポーネントを作成しましょう。

<code>npm install -g vue</code>

このコンポーネントには、メッセージと呼ばれる単一のデータ属性があります。テンプレートには、この属性の値が段落要素内に表示されます。

次に、メインApp.vueファイルでこのコンポーネントを使用しましょう。まず、スクリプトセクションの上部にメッセージコンポーネントをインポートしてください：

<code>npm install -g @vue/cli</code>

次に、コンポーネントをコンポーネントオブジェクトに追加して登録してください。

最後に、メッセージコンポーネントをテンプレートに追加します：

<code>vue create my-vue-app</code>

app.vueファイルは次のようになります

<code>cd my-vue-app</code>

変更を保存して、ブラウザを確認します。 「こんにちは、Vue！」というメッセージが表示されます。

VUEディレクティブを使用してインタラクティブ性を追加します

<code>npm run serve</code>

Vueは、コンポーネントにインタラクティブ性を追加できる一連の指示を提供します。簡単なカウンターアプリケーションを作成して、手順の使用方法を実証しましょう。

次のコードでmessage.vueコンポーネントを更新します

Counterと呼ばれる新しいデータ属性とIncrementと呼ばれるメソッドを追加しました。増分方法により、カウンターの値が1増加します。テンプレートに、カウンター値を表示するための段落とインクリメントメソッドをトリガーするボタンを追加しました。

@Clickディレクティブは、インクリメントメソッドをボタンのクリックイベントに添付するために使用されます。ボタンをクリックすると、増分方式が呼び出され、カウンター値が増加します。

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<🎜>

変更を保存して、ブラウザを確認します。カウンターアプリケーションが期待どおりに機能することを確認する必要があります。

条件付きレンダリングとループを使用します

Vueは、配列を介した条件付きレンダリングとループの指示を提供します。 message.vueコンポーネントを更新して、これらの機能を実証しましょう。

次のコードをmessage.vueコンポーネントに追加します：

整数の配列である番号と呼ばれる新しいデータ属性を追加しました。また、V-IFディレクティブを使用して、カウンター値が5以上の場合にのみ表示される段落を追加しました。

v-forディレクティブは、番号アレイをループし、各番号のリスト項目を作成するために使用されます。 ：キー属性は、各リスト項目に一意のキーを提供するために使用されます。これは、パフォーマンス上の理由で必要です。

import Message from './components/Message.vue';

変更を保存して、ブラウザを確認します。予想通り、新機能が機能する必要があります。

VUEのベストプラクティスと一般的なトラップ、および結論とFAQセクションでは、スペースの制限のために拡張しなくなりますが、コンテンツは元のテキストと一致しています。 必要に応じて補ってください。

以上がVue.jsチュートリアル：始めましょう。10のベストプラクティスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。