2024 年の Vue.js での Web アプリ構築の概要 - E コマースプラットフォーム

現在、非常に多くのJavaScriptフレームワークが存在し、それらすべてを追跡するのは難しい場合があります。確かに、誰もが完全にそれらを習得することはまずありません。ほとんどの人にとってそれが意味することは、学習に時間を費やす予定の開発フレームワークを選択する必要があるということです。

この記事では、Vue.jsについて簡単に説明します。Vue.jsは、自分が取り組む傾向のあるプロジェクトの種類に適しているかどうか、自分に適しているかどうかを自分で判断できます。

Vue.jsとは何ですか？

従来は大文字ではありませんでしたが、「Vue」は実際にはVisualUnderstandingEnvironmentの頭字語です。その主な目的は、コードの複雑さを軽減することにより、Webアプリケーションの開発を容易にすることです。 React.jsと多くの共通点がありますが、現在のバージョンのVueはReactよりも高速にレンダリングされ、より効率的であるようです。

Vueを学ぶのは難しいですか？

すでに経験豊富なコーダーであれば、Vueを使い始めるのはそれほど難しくありませんが、初心者の言語として説明するのは適切ではありません。実用的なものを構築するには、HTML、CSS、JavaScriptの経験が必要です。

Vueの学習曲線は、Reactの場合より少し急ではなく、Angularの場合よりもかなり急ではありません。したがって、Vueは、他の一般的な開発フレームワークと比較して習得が比較的容易であることを正確に述べることができます。

Vueは目標の達成にどのように役立ちますか？

実際の目的によって多少異なりますが、一般に、コードブロックをHTML divにバインドします。この方法論により、通常のHTML、CSS、JavaScriptを使用する場合よりも、インタラクティブ機能や動的コンテンツを導入しやすくなります。

一方、Vueでは、従来の方法を使用するよりも多くのことを実際に行うことはできません。 Vueを使用することは、開発段階で物事をより簡単にすることの問題ですが、フレームワークコードの読み込みによるわずかなパフォーマンスへの影響を除いて、最終結果にはあまり影響しません。

VueのもうXNUMXつの利点は、モジュール性を提供することです。つまり、複数のプロジェクトで開発したコンポーネントを再利用できます。

Vueにはクールなトリックがありますか？

それは確かにそうです、そしてこれらの最高のものはあなたが他のものを制御することを可能にする組み込みの遷移効果ですwise XNUMX行かXNUMX行のコードを使用して、非常にコード集約的なCSSおよびJavaScript構造にします。これにより、アプリケーションを作成する際の時間と労力を節約できます。

もうXNUMXつの便利な機能は、AndroidやiOSなどの特定のデバイスタイプのネイティブレンダリングです。そのため、多くの余分な作業をせずに、アプリケーションが実行されているデバイスに合わせてアプリケーションを微調整できます。

始める

前述のように、Vueは簡単に習得できますが、初心者の言語ではありません。それでも、コードブロック内の方法を知る必要があります。

問題は、ほとんどのフレームワークと同様に、ドキュメントが非常に怠惰であり、主に使用するよう説得することに専念していることです。ドキュメントでは、すべてがどのように機能するか、または特定の方法で行う理由を説明することにあまり注意が払われていません。これまで作成された事実上すべての公式フレームワークの例は、format発見するために何時間も歩き回らなければならないイオン。これは、Vue のドキュメントとサンプルでも共有されている欠陥です。

このプロジェクトを再作成するために本当に何をする必要があるかを理解しやすくするために、これらは必要なステップです：

1. vue.jsを参照するスクリプトを追加します

速度を最適化するには、すべてのページコンテンツの後、HTMLソースのbody終了タグの直前にこれを含めるのが最適です。このセクションでは、他のページリソースの読み込みも可能であり、読み込みの優先順位によって、各リソースを挿入する順序が決まります。

CDNからvue.jsを含める例を次に示します。

そして、これはあなた自身のサーバーのディレクトリからvue.jsを含める例です：

このvue.jsへの参照がないと、Vueに関連することは何も起こりません。

2. VueコンポーネントをHTML本文に追加します

それがこのコードで起こっていることです：

今のところあまり意味がありませんが、Vue部分は空の「デモグリッド」要素であり、クエリ入力に「v-directive」が追加されています（この場合は「v-model」です）。」、Vueコードをバインドして入力を形成するために使用されます）。

3.プロジェクトにコンポーネントテンプレートが必要な場合は、これをHTML本文に追加します

このコードセクションは、ほとんどのHTML編集ソフトウェアを混乱させるスクリプトタグ内の通常のHTMLのように見えるため、異常です（インジケーターの色が一部の場所で間違っていることに注意してください）。

4. Vueインスタンスを追加する

これは動的レンダリングタスクを実行しているため、ページに最後に表示されるもののXNUMXつになるはずです。これにより、ページの前半に追加するよりも最適化の利点がいくつか得られます。

広告ⓘ

46行目は、ブラウザが「demo-grid」というページでコンポーネントを検索することを指定し、47行目は、「＃grid-template」をコンポーネントのテンプレートとして使用することを指定しています（これは、手順で追加したテンプレートコードです3行9から30行目）。
48行目から52行目までのブロックは、コンポーネントのプロパティを定義しています。
53行目から62行目は、テーブル内のデータをソートするための関数を定義しています。
63〜85行目は、データ（検索クエリの結果から）をフィルタリングするための関数を定義しています。
86行目から90行目は、データセット内の単語を大文字にする関数を定義しています。
91行目から97行目は、データのソート方法を定義しています。

5.終了スクリプトタグの前に起動コードを追加します

手順1〜4を完了し、ブラウザでファイルを開いた場合、表示されるのは検索ボックスだけで、それ以上はありません。これは、テーブルの作成に必要なすべてのものが定義されているが、作成されていないためです。したがって、ステップ5で、前のすべてのステップで定義されたテーブルを実際に作成するコードを追加します。

100行目は新しいVueオブジェクトを作成します。
101行目では、アクションをバインドする要素を指定しています。
102行目から111行目は、要素にバインドされるオブジェクトデータを提供します。

テスト

必要なオブジェクトを定義して作成したら、結果をテストする準備ができました。これはブラウザに表示されるはずなので、圧倒される準備をしてください。

どうしたの？なぜそんなにつまらないの？これは、スタイリングが適用されていないためです。 JSFiddleの例のデフォルトのスタイルを使用すると、テーブルは次のようになります。

検索ボックスに何かを入力すると（大文字と小文字は区別されません）、それに応じて結果がフィルタリングされます。

列ヘッダーをクリックすると、表示の順序を変更できます。たとえば、「電力」列のヘッダーをクリックすると、電力レベルの順に表示される結果が変更されます。

改善と適応

フレームワークの例に関するもう XNUMX つの問題は、通常はあまり含まれていないことです。formatコードベースに不慣れな人が、例で見たものをフィールドに適用する方法を理解するのに役立ちます。 Vue は、Bootstrap と比較して素晴らしい仕事をしますformative)、まだ多くの未回答の質問が残っています。

外観と機能を変更するために、このアプリケーションに加える可能性があるいくつかの変更を次に示します。