VUE 3の初心者ガイド3

このチュートリアルは、Vue.jsの基礎的理解を提供します。これは、Vue 3（この例で使用）と以前のバージョンの両方に適用されます。 以下を含む、Vueアプリケーションの構築の重要な側面について説明します。

Vue CLIを使用してVUEアプリケーションを作成します
• レンダリングリスト
。
• v-for
、
• 、およびv-if v-else-ifv-else指示で動的CSSを使用します ユーザーの入力とイベントの処理。
• メソッドと計算されたプロパティの採用。:class
• 重要な概念：
• v-bind

Vue CLIセットアップ：Vue CLIはプロジェクトの作成を合理化し、構成の簡素化、カスタマイズされた機能の選択を許可します。

リストレンダリング（）：

ダイナミックリストを効率的にレンダリングし、一意のキーでDOMパフォーマンスを最適化します（
• 属性を使用）。 条件付きレンダリング：
、
• 、、およびv-for。 :key2方向のデータバインディング（
）：ユーザー入力を処理し、リアルタイムのUIフィードバックを提供するために重要です。
• 計算されたプロパティ：元のデータを直接変更せずにデータ変換と計算を実行し、反応性を向上させます。 v-ifv-else-ifダイナミックCSS（v-elseコンポーネント状態に基づいてCSSクラスを条件付きで適用し、動的スタイリングを有効にします。
• vue cli：v-modelでアプリケーションを構築します
Vue CLIはプロジェクトのセットアップを簡素化します。 インストールしてみましょう：
• （あるいは、
。。）
• を使用します 新しいプロジェクトを作成します：:class
「手動で選択された機能」を選択し、このチュートリアルにBabelのみを選択します。 VUE 3を選択し、専用ファイルに構成を配置することを選択します。 プリセットを保存しないでください。

図1：Vue CLIウェルカム画面

図2：Vue Cli

<code class="language-bash">npm i -g @vue/cli</code>

を使用したVueプロジェクトの構成 yarn global add @vue/cli

図3：Vue cli

<code class="language-bash">vue create your-project-name</code>

でVueバージョンを選択します

これにより、プロジェクト構造が作成されます（図4を参照）。

から

。

図4：VUE 3プロジェクト構造

アプリケーションのセットアップ：

の内容を次のものに置き換えます

App.vueこれは簡単なタイトルを設定します。 次のセクションは、これに徐々に構築されます。 （さらにコードスニペットが後続のセクションで提供され、段階的に構築されます。）

<code class="language-bash">npm i -g @vue/cli</code>

リストレンダリング：

：

のメソッドに

配列を追加します tasks data()App.vue：

を使用してリストをレンダリングします

<code class="language-bash">vue create your-project-name</code>

v-for属性は、パフォーマンスに不可欠です。

<code class="language-vue"><template>
  <h1>{{ title }}</h1>
</template>

</code>

:key図5：VueでのレンダリングをV-for指令

（残りのセクションはこの増分スタイルで継続し、各機能のコードスニペットと説明を提供します - 条件付きレンダリング、ユーザー入力、メソッド、イベント、計算プロパティ、属性バインディング、および動的CSS - 元のものと同様入力ですが、長さが改善されているため、残りのすべてのコードをここに含めることはできません。 🎜>

以上がVUE 3の初心者ガイド3の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。