ホームページ  >  記事  >  ウェブフロントエンド  >  vuejs は API ですか?

vuejs は API ですか?

青灯夜游
青灯夜游オリジナル
2021-09-27 19:15:381588ブラウズ

vuejs は API ではありません。 vuejs は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークであり、Web 開発をより適切に整理して簡素化するように設計されています。 API はアプリケーション プログラミング インターフェイスを指します。これは、アプリケーションや開発者が特定のソフトウェアまたはハードウェアに基づいたルーチンのセットにアクセスできるようにする、事前定義された関数のセットです。

vuejs は API ですか?

このチュートリアルの動作環境: Windows7 システム、vue2.9.6 バージョン、DELL G3 コンピューター。

vuejs は API ではありません。

Vue (/vjuː/ と発音、ビューに似ています) は、ユーザー インターフェイスを構築するための進歩的な JavaScript フレームワークであり、Web 開発をより適切に整理して簡素化することを目的としています。他の大きなフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。

Vue のコア ライブラリはビュー レイヤーのみに焦点を当てており、開始が簡単であるだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、最新のツール チェーンやさまざまなサポート ライブラリと組み合わせると、Vue は複雑なシングル ページ アプリケーション (SPA) 用のドライバーを提供することができます。

Vue.js は、シンプルで柔軟な API を備えた MVVM データ バインディングとコンポーザブル コンポーネント システムも提供します。その目標は、可能な限りシンプルな API を通じて応答性の高いデータ バインディングとコンポーザビリティを実現することです。ビュー コンポーネント。

および API (アプリケーション プログラミング インターフェイス、アプリケーション プログラミング インターフェイス) はいくつかの事前定義関数です 。目的は、アプリケーションと開発者が特定のソフトウェアまたはハードウェアの機能に基づいた一連のルーチンにアクセスできるようにすることです。ソース コードにアクセスしたり、内部動作の詳細を理解したりする必要はありません。

vuejs の一部の API

vm は新しい Vue で取得したインスタンスを参照します

(1) dom タグの場合in 値が data の値にバインドされた後、data に対応する値を変更すると、タグ内の値をリアルタイムで更新できます;

しかし、その後に追加された値は無効です (バインドは失敗します)。

(2) オブジェクトはデータの属性として直接使用でき、これは有効です (オブジェクトは値によって渡されるため);

したがって、属性とオブジェクトは一致します;

(3) vm のインターフェースは次のとおりです:

vm.$data は vm のデータ属性、

vm.$el は el が指す dom ノードです。属性;

vm.$watch は属性の変化(データの値など)を監視するものです((9)参照)

(4) vue インスタンスの宣言サイクル、

created: イベント バインディングが完了した後、関数は vue インスタンスの宣言時に vue インスタンスの属性として直接使用されます (以下同様)。

vm.$mount: dom ノードをマウントします;

beforeCompile: テンプレートをロードする前;

compiled: テンプレートをロードした後;

ready: completed 後 (おそらく);

beforeDestroy: 破壊前;

destroyed: 破壊後;

(5) vm.$mount (マウントされた ID またはクラス名)

新しい Vue インスタンスを追加する際、el を付けないとマウントされずに生成されるだけになりますが、生成後にこの方法を使うと手動で任意の場所にマウントできます。条件を満たすものが複数ある場合は先頭にマウントします;

(6) v-for は配列やオブジェクトを横断し、複数のタグを作成できます; たとえばテーブルの作成に使用されます;

(7) エスケープ: {{}} 2 つの中括弧は値の html タグをエスケープしません;

{{{}}} 3 つの中括弧は値の html タグをエスケープします値を取得して HTML テキストに変換します;

バインドされたデータを値に入れることはできません (部分を使用しない限り、方法はまだわかりません);

(8)補間の中括弧内に式を入れることができます (関数は配置できません);

(9) 補間の中括弧内にパイプ記号 | を追加すると、フィルターを使用できます;

大文字にする最初の文字を大文字にするフィルタです。

フィルタは式の末尾にのみ配置でき、式の一部にすることはできません。

フィルタはパラメータを追加できます。

フィルタはカスタマイズ可能です (ただし、カスタマイズ方法はまだわかりません。定義されたメソッド);

(10) 命令:

v-if="変数名"値が true の場合に存在します;

v-bind:attribute Name = "変数名" 等号の後の変数名 (vm の data 属性内の同じ名前の属性を指す) を、タグのhtml属性。

v-on: イベントタイプ = "関数名" イベントタイプがトリガーされると、メソッド内の関数が実行されます;

v-on の略称は @、v の略称です-bind は: ( コロン);

(11) 計算された属性 computed

ここの属性はデータ属性として使用できます。利点は、データの値が変更されたときに、一緒に変更;

より複雑な式を使用できます (補間では単純な式のみ使用できます);

(12) 計算されたプロパティのセッターとゲッター

デフォルトは getter (オブジェクトの属性の取得) です。つまり、特定の値が変更されると、コールバック関数 (または get メソッド) がトリガーされます。

計算されたプロパティが変更されると、特定の値がトリガーされます。変更する必要がある場合 (10 個の値を変更するなど、この値を他の場所に監視することを記述するのは良くありません)、その場合はセッター (オブジェクトの属性を設定) を設定する必要があります。つまり、計算された属性が変更されると、設定メソッドがトリガーされる;

(13) 監視属性 vm.$watch (監視対象属性、コールバック関数)

監視されるのはデータ属性です;

最初のパラメータコールバック関数は変更された値、2 番目のパラメータは変更された値です 以前の値;

属性の値が変更されたときにトリガーされます;

(14) クラス バインディング:

v-bind:class を使用します。

クラスの使用オブジェクト形式では、キーはクラス名で、値はこのクラスを表示するかどうかを示します。

オブジェクトを直接配置できます。 v-bind:class の値に object を指定し、data 属性にこのオブジェクトを配置する このようにこの object オブジェクトのプロパティを設定するだけです;

クラス配列の書き方: 配列内のメンバーは可変です変数がオブジェクト オブジェクトでない場合、変数の値はクラス名です。変数がオブジェクトである場合、オブジェクト キーはクラス名で、値は表示するかどうかを示します。

(15) スタイル バインディング:

v-bind:style

を使用します。 フォームはオブジェクトであり、オブジェクトのキーです。 スタイル名です (fontSize など。スタイル名には次の必要があることに注意してください)。 CSS ではなくキャメルケースにする必要があります)、値はスタイルの値です;

v-bind:style の方程式の右側にオブジェクト名を直接置くことができます;

オブジェクトの値の変更は、リアルタイムでインライン スタイルに影響します;

一部のスタイルでは、ブラウザのプレフィックスを追加できます (ただし、一部のスタイルはすべてのブラウザと互換性があるわけではありません);

関連する推奨事項: 「vue.js チュートリアル

以上がvuejs は API ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。