Vue.js を学ぶ際に遭遇する落とし穴

順位は特に決まっていません

最近は生活や愚痴に関するブログばかり投稿しているようです。テクノロジー関係の更新がないと、また怠け者になっていると思われるかもしれません。

よし、じゃあふりを始めます。

クラス void のポイント

これは、ヌル ポインターに似た種類のエラーです。コンソールにエラーは報告されず、見つけるのが非常に困難です。

応答データユーザーアバター

//ユーザーが null の場合、この呼び出しはエラーを報告せず、それ以上実行されません。これは非常にトリッキーです。//アバターを判断したい場合は、次のようにします if (resp.data.user && resp.data.user.avatar) {
 //する...
}

ES6 矢印関数

矢印関数と非矢印関数の間にも大きな違いがある

//通常の無名関数の記述 api()
.then(関数(応答){
 このカウント()
 //これは通常のカウントではなく、未定義になることに注意してください
})


//ES6 矢印関数 api()
.then(応答 => {
 このカウント()
 //ここでは何も問題はありません})

ヴュートファイ

これは、Vue.js 上で実行できる、Google のマテリアル デザイン言語に基づいた UI フレームワークです。

ただ、インストール方法が少し特殊で、プラグインのインストール方法も特殊です。

例えば、vuetifyのダイアログ

'vuetify-dialog' から VuetifyDialog をインポートします。
'./plugins/vuetify' から vuetify をインポートします。

Vue.use(VuetifyDialog, {
 コンテクスト： {
 ヴュートファイ
 }
})

つまり、UI を書くときは、Google 向けにプログラミングする必要があるということです。 （他のバックエンド言語も同様ですが）

vue-cli

新しいプロジェクトを作成する場合、そのプロジェクトは特に大きくありません。

vue-cli を使用して作成することを強くお勧めします。簡単に言えば、これにより b スタイルが向上します。

ナンセンスな話はやめて、絵を見てください

vue プロジェクト名を作成します

ビューUI

vue ui は上記のような視覚化ページを開きます。

次に、vue-cli で作成されたプロジェクトをインポートすると、上の図と同じになります:)

非同期と同期

実は、以前とても馬鹿げた考えを持っていたんです。

ユーザーがフォームを完了すると、すぐにサーバーで検証され、結果が UI 上で更新されます。

ただし、UI を更新するには同期操作が必要です。

私は、axios の非同期操作を同期操作に変える方法を見つけようとし続けました。

以前の jQuery であれば、非常に簡単です。aysnc 属性を変更するだけです。

ただし、リクエストを送信するたびに、ブラウザのコンソールに XHR 同期リクエストは推奨されないというメッセージが表示されます。

なぜでしょうか? ブラウザのページはシングルスレッドであるためです。リクエストが同期されている場合、リクエストごとにページが一定時間停止します。

そこで最終的に、すべてのリクエストを非同期にするための段階的な検証方法に変更しました。

実行と展開

ローカルで開発する場合

serve (または一部のプロジェクトでは dev) を実行すると、ポート番号が開き、ユーザー インターフェイスにアクセスしてほぼリアルタイムで UI を調整できるようになります。

オンラインでデプロイする場合は、まずビルドを実行して、出力ディレクトリに静的ファイルを生成する必要があります。

これらのファイルを次のようにサーバーにデプロイします。

• nginx
• キャディー

ここで私が強くお勧めするのは、Golang をベースに開発されたサーバーである caddy です。軽量で導入でき、管理 API が付属しています。Http2 を非常によくサポートし、http3 もサポートしています。

ヒント

ここで紹介しているのは、私が最近始めたプロジェクトの一部です。今後の開発では、さらに多くの問題に遭遇するでしょう。
たとえば、ページ間の更新などです。

それで、もうすぐ次の章が始まります。

これが役に立つことを願っています。

以上が、Vue.js を学習する際に陥りやすい落とし穴の詳細です。Vue.js を学習する際に陥りやすい落とし穴の詳細については、123WORDPRESS.COM 内の他の関連記事もぜひご覧ください。