vue3 は各シーンの過剰な読み込みの問題をどのように解決するか
vue3 Common Excess
1. ページを最初に開いたときにロードする
ページを最初に開いたときにコンテンツをロードするのが最も簡単です。ルート ディレクトリ index.html ファイル
を介して <div id='app'> にコンテンツを追加すると、過剰なコンテンツ
<body>
<div id="app">
<h2>加载中......</h2>
</div>
<script type="module" src="/src/main.js"></script>
</body> vue インスタンスが作成されると、.mount() メソッドと loading コンテンツを通じて id='app' の div にマウントされます。内部が置き換えられます;
2. ルーティングが切り替わると、非同期コンポーネントがロードされます
ルートが過度に切り替わる場合は、最初に 1 つ理解する必要があります。
vue3のコンポーネント内<Suspense>;##<Suspense>
は2を提供しますスロット??????;#default
: ロードされるコンテンツ;#フォールバック
: ロード後に表示されるコンテンツ;
<Suspense> <template #default> <router-view /> </template> <template #fallback> <h2>加载中......</h2> </template> </Suspense>
同様に: (非同期コンポーネントの切り替え)
<template>
<Suspense>
<template #default>
<AsyncComp v-if = 'vitblie' />
</template>
<template #fallback>
<h2>加载中......</h2>
</template>
</Suspense>
<button @click='open'> 切换 </button>
</template>
<script setup>
import { defineAsyncComponent , ref } from 'vue';
const asyncComp = defineAsyncComponent(()=>important('./asyncComp.vue));
const vitblie = ref(false);
function open(){
vitblie.value = !vitblie.value;
}
</script>vue3 組み込みコンポーネント<コンポーネント>#を理解する必要があります。 ## and<Transition> ????
: 非常に単純で、1 つの is だけがコンポーネントを表示します。これは、次のようなコンポーネントを切り替えるために使用できます: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'> <template>
<Component :is="visible ? TestComp : &#39;&#39; " />
</template></pre><div class="contentsignin">ログイン後にコピー</div></div>
: Show/Hide に挿入されたコンテンツ トランジション アニメーションを追加し、 # でつなぎ合わせます。 ##name 属性 class 例:
<template> <transition name='anime'> <TestComp v-if='visblte' /> </transition> </template>
スタイルを設定します ここに name 属性を渡します: 遷移状態 (設定hide=> show
遷移時間などのパラメータ)anime-leave-active: 遷移状態 (設定
show=> Hide遷移時間とその他のパラメータ)anime-enter -from
=>
anime-enter-toHide=>開始スタイルと終了スタイルを表示anime-leave-from = >
anime-leave-toShow=> Hide開始スタイルと終了スタイル組み合わせ??????<template> <router-view v-slot={ Component } > <transition name='anime'> <component :is="Component" /> <transition> </router-view> <template> <style scoped> .anime-enter-active, .anime-leave-active { transition: all 1s; } .anime-leave-from { transform: translateY(0); } .anime-leave-to { transform: translateY(-100%); } .anime-enter-from { transform: translateY(100%); } .anime-enter-to { transform: translate(0); } </style>ログイン後にコピー以上がvue3 は各シーンの過剰な読み込みの問題をどのように解決するかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7465
15
1376
52
77
11
18
19
vue3+vite: src に画像を動的にインポートするために require を使用するときのエラーを解決する方法
May 21, 2023 pm 03:16 PM
vue3+vite:src は、イメージとエラー レポートと解決策を動的にインポートするために require を使用します。vue3+vite は複数のイメージを動的にインポートします。vue3。TypeScript 開発を使用している場合、イメージを導入するために require のエラー メッセージが表示されます。requireisnotdefined は使用できません。 vue2 のような imgUrl:require(' .../assets/test.png') は、typescript が require をサポートしていないため、インポートされます。そのため、import が使用されます。解決方法は次のとおりです: awaitimport を使用します
vue3 プロジェクトで tinymce を使用する方法
May 19, 2023 pm 08:40 PM
tinymce はフル機能のリッチ テキスト エディター プラグインですが、tinymce を vue に導入するのは他の Vue リッチ テキスト プラグインほどスムーズではありません。tinymce 自体は Vue には適しておらず、@tinymce/tinymce-vue を導入する必要があります。外国のリッチテキストプラグインであり、中国語版を通過していないため、公式 Web サイトから翻訳パッケージをダウンロードする必要があります (ファイアウォールをバイパスする必要がある場合があります)。 1. 関連する依存関係をインストールします npminstalltinymce-Snpminstall@tinymce/tinymce-vue-S2. 中国語パッケージをダウンロードします 3. スキンと中国語パッケージを導入します. プロジェクトのパブリック フォルダーに新しい tinymce フォルダーを作成し、
Vue3 がマークダウンを解析し、コードのハイライトを実装する方法
May 20, 2023 pm 04:16 PM
Vue はブログ フロントエンドを実装しており、マークダウン解析を実装する必要があり、コードがある場合はコードのハイライトを実装する必要があります。 Vue には、markdown-it、vue-markdown-loader、marked、vue-markdown など、マークダウン解析ライブラリが多数あります。これらのライブラリはすべて非常に似ています。ここではMarkedが使用され、コード強調表示ライブラリとしてhighlight.jsが使用されます。 1. 依存ライブラリをインストールする vue プロジェクトの下でコマンド ウィンドウを開き、次のコマンド npminstallmarked-save//marked を入力して、マークダウンを htmlnpmins に変換します。
Vue3 でページの部分的なコンテンツを更新する方法
May 26, 2023 pm 05:31 PM
ページの部分的な更新を実現するには、ローカル コンポーネント (dom) の再レンダリングを実装するだけで済みます。 Vue でこの効果を実現する最も簡単な方法は、v-if ディレクティブを使用することです。 Vue2 では、v-if 命令を使用してローカル dom を再レンダリングすることに加えて、新しい空のコンポーネントを作成することもできます。ローカル ページを更新する必要がある場合は、この空のコンポーネント ページにジャンプしてから、再びジャンプします。 beforeRouteEnter ガードを空白のコンポーネントに配置します。元のページ。以下の図に示すように、Vue3.X の更新ボタンをクリックして赤枠内の DOM を再読み込みし、対応する読み込みステータスを表示する方法を示します。 Vue3.X の scriptsetup 構文のコンポーネントのガードには o しかないので、
vue3 プロジェクトをパッケージ化してサーバーに公開した後、アクセス ページが空白で表示される問題の解決方法
May 17, 2023 am 08:19 AM
vue3 プロジェクトがパッケージ化され、サーバーに公開されると、アクセス ページに空白の 1 が表示されます。vue.config.js ファイル内の publicPath は次のように処理されます: const{defineConfig}=require('@vue/cli-service') module.exports=defineConfig({publicPath :process.env.NODE_ENV==='production'?'./':'/&
Vue3 の再利用可能なコンポーネントの使用方法
May 20, 2023 pm 07:25 PM
はじめに vue であれ、react であれ、複数の繰り返しコードに遭遇した場合、ファイルを冗長なコードの束で埋めるのではなく、これらのコードを再利用する方法を考えます。実際、vue と React はどちらもコンポーネントを抽出することで再利用を実現できますが、小さなコードの断片に遭遇し、別のファイルを抽出したくない場合は、それに比べて、React は同じファイル内で対応するウィジェットを宣言して使用できます。または、次のような renderfunction を通じて実装します。 constDemo:FC=({msg})=>{returndemomsgis{msg}}constApp:FC=()=>{return(
Vue3 でアバターを選択してトリミングする方法
May 29, 2023 am 10:22 AM
最終的な効果は、VueCropper コンポーネントのyarnaddvue-cropper@next をインストールすることです。上記のインストール値は Vue3 用です。Vue2 の場合、または他の方法を参照したい場合は、公式 npm アドレス: 公式チュートリアルにアクセスしてください。また、コンポーネント内で参照して使用するのも非常に簡単です。必要なのは、対応するコンポーネントとそのスタイル ファイルを導入することだけです。ここではグローバルに参照しませんが、import{userInfoByRequest}from'../js/api を導入するだけです。 ' コンポーネント ファイルにインポートします。import{VueCropper}from'vue-cropper&
DefineCustomElement を使用して Vue3 でコンポーネントを定義する方法
May 28, 2023 am 11:29 AM
Vue を使用してカスタム要素を構築する WebComponents は、開発者が再利用可能なカスタム要素 (カスタム要素) を作成できるようにする一連の Web ネイティブ API の総称です。カスタム要素の主な利点は、フレームワークがなくても、任意のフレームワークで使用できることです。これらは、異なるフロントエンド テクノロジ スタックを使用している可能性のあるエンド ユーザーをターゲットにする場合、または最終アプリケーションを使用するコンポーネントの実装の詳細から切り離したい場合に最適です。 Vue と WebComponents は補完的なテクノロジであり、Vue はカスタム要素の使用と作成に対する優れたサポートを提供します。カスタム要素を既存の Vue アプリケーションに統合したり、Vue を使用してビルドしたりできます。
