1. プロパティを型リストに制限する
エクスポートデフォルト{ 名前: '画像', 小道具: { ソース: { タイプ: 文字列、 }, スタイル: { タイプ: 文字列、 バリデータ: s => ['square', 'rounded'].includes(s) } } }; この 2. デフォルトのコンテンツと拡張ポイントVue のスロットにはデフォルトのコンテンツを設定できるため、より使いやすいコンポーネントを作成できます。 <button class="button" @click="$emit('click')"> <スロット> <!-- スロットが指定されていない場合に使用されます --> クリックしてください </スロット> </ボタン> 基本的に、コンポーネントの任意の部分を取得して <テンプレート> <button class="button" @click="$emit('click')"> <!-- 最初は何もしないスロットタグを追加します --> <!-- スロットにコンテンツを提供することでこれを上書きできます --> <スロット> <div class="formatting"> {{ 文章 }} </div> </スロット> </ボタン> </テンプレート> このコンポーネントをさまざまな方法で使用できるようになりました。 シンプルなデフォルト メソッドまたは独自のカスタム メソッド: <!-- コンポーネントのデフォルト機能を使用する --> <ButtonWithExtensionPoint text="書式設定されたテキスト" /> <!-- 拡張ポイントを使用してカスタム動作を作成する --> <拡張ポイント付きボタン> <div class="異なるフォーマット"> ここで何か違うことをする</div> </ButtonWithExtensionPoint> 3. ネストされた値を確認するには引用符を使用するご存知ないかもしれませんが、引用符を使用するだけで、ネストされた値を簡単に直接確認できます。 時計 { '$route.query.id'() { // ... } } これは、深くネストされたオブジェクトを処理する場合に非常に便利です。 4. v-if を使うべきとき(そして避けるべきとき)を知る場合によっては、 <ComplicatedChart v-show="chartEnabled" />
切り替える必要があるコンポーネントのレンダリングにコストがかかる場合は、これがより効率的である可能性があります。一方、そのコンポーネントをすぐに使用する必要がない場合は、v-if を使用してレンダリングをスキップし、ページをより速く読み込みます。 5. 単一スコープ スロットの省略形 (テンプレート タグは不要です) これを回避するショートカットがありますが、単一のスコープ 次のように書く代わりに: <データテーブル> <テンプレート #header="テーブル属性"> <TableHeader v-bind="tableAttributes" /> </テンプレート> </データテーブル> 次のように書くことができます: <データテーブル #header="tableAttributes"> <TableHeader v-bind="tableAttributes" /> </データテーブル> これはより単純で直接的です。 6. 条件付きでスロットをレンダリングするすべての 定数$スロット = { デフォルト: <デフォルトスロット>, アイコン: <アイコンスロット>, ボタン: <ボタンスロット>, }; ただし、この 複数の名前付きスロットを含む複数のスロットを定義する次のコンポーネントを考えてみましょう。 <!-- スロット.vue --> <テンプレート> <div> <h2>ここにいくつかのスロットがあります</h2> <スロット /> <スロット名="秒" /> <スロット名="3番目" /> </div> </テンプレート> コンポーネントにスロットを 1 つだけ適用すると、そのスロットだけが $slots オブジェクトに表示されます。 <テンプレート> <スロット> <テンプレート #2> これは2番目のスロットに適用されます </テンプレート> </スロット> </テンプレート> $slots = { 2番目: <vnode> } これをコンポーネントで使用して、どの たとえば、 <テンプレート> <div> <h2>パッケージスロット</h2> <div v-if="$slots.default" class="styles"> <スロット /> </div> </div> </テンプレート> これで、スタイルが適用された 6.1 スロットを条件付きでレンダリングできるようにする必要があるのはなぜですか?条件スロットを使用する主な理由は 3 つあります。
たとえば、デフォルトのスタイルを追加するときは、 <テンプレート> <div> <h2>これはかなり素晴らしいコンポーネントですよね?</h2> <div class="default-styling"> <スロット> </div> <button @click="$emit('click')">クリックしてください!</button> </div> </テンプレート> ただし、親コンポーネントがそのスロットにコンテンツを適用しない場合は、ページに空の div がレンダリングされることになります。 <div> <h2>これは本当にクールなコンポーネントです</h2> <div class="default-styling"> <!-- スロットにはコンテンツはありませんが、この div はレンダリングされます --> </div> <button @click="$emit('click')">クリックしてください!</button> </div> ラッピング div に v-if を追加すれば問題は解決するはずです。スロットにコンテンツが適用されていませんか?このような:\ <div> <h2>これは本当にクールなコンポーネントです</h2> <button @click="$emit('click')">クリックしてください!</button> </div> 7. スロットの変更を観察する方法スロットの内容がいつ変更されたかを知る必要がある場合があります。 <!-- 残念ながらこのイベントは存在しません--> <スロット @change="更新" /> 残念ながら、Vue にはこれを検出する組み込みの方法はありませんが、ミューテーション オブザーバーを使用してこれを実行する非常に優れた方法があります。 エクスポートデフォルト{ マウント() { // 変更があったら `update` を呼び出す const オブザーバー = 新しい MutationObserver(this.update); //このコンポーネントの変更を監視する observer.observe(this.$el, { 子リスト: true、 サブツリー: true }); } }; 8. ローカルスタイルとグローバルスタイルの融合多くの場合、スタイルを使用する場合は、そのスコープを単一のコンポーネントに限定する必要があります。 <スタイルスコープ> 。成分 { 背景: 緑; } </スタイル> 必要に応じて、スコープ指定のないスタイル ブロックを追加してグローバル スタイルを追加することもできます。 <スタイル> /*グローバルアプリケーション*/ .コンポーネントp{ 下部マージン: 16px; } </スタイル> <スタイルスコープ> /*この特定のコンポーネントにスコープ設定*/ 。成分 { 背景: 緑; } </スタイル> 9. 子コンポーネントのスタイルをオーバーライドする - 正しい方法
Vue には、この目的専用のディープ セレクターがあります。 <スタイルスコープ> /* スタイルのスコープを維持しながら子コンポーネントの CSS をオーバーライドします */ .my-component >>> .child-component { フォントサイズ: 24px; } </スタイル>
10. コンテキスト認識コンポーネントで魔法を生み出すコンテキスト認識コンポーネントは「魔法」です。周囲で起こっていることに自動的に適応し、エッジケースを処理し、状態を共有するなど、さまざまな機能を備えています。コンテキスト認識コンポーネントには主に 3 つの種類がありますが、その中でも構成が最も興味深いと思います。 10.1 状態の共有大きなコンポーネントを複数の小さなコンポーネントに分割する場合でも、多くの場合、それらのコンポーネント間で状態を共有する必要があります。この作業をコンポーネントを使用するユーザーに押し付けるのではなく、「舞台裏で」行うことができます。 <!-- 簡潔にするために単一のコンポーネントとして使用します --> <ドロップダウン v-model="選択済み" :options="[]" /> <!-- 柔軟性を高めるために分割 --> <v-model="selected"> を選択 <Option value="mustard">マスタード</Option> <Option value="ketchup">ケチャップ</Option> <div class="relish-wrapper"> <Option value="relish">レリッシュ</Option> </div> </選択> 10.2 構成場合によっては、アプリケーションの残りの部分の状況に基づいてコンポーネントの動作を変更する必要があることがあります。これは通常、問題が発生する可能性のあるエッジケースを自動的に処理するために行われます。ポップアップまたは 10.3 モデリングコンテキスト対応 .統計 { 色: 黒; フォントサイズ: 24px; フォントの太さ: 太字; } /* 隣り合う統計情報の間に間隔を空ける */ .統計 + .統計 { 左マージン: 10px; } CSS の変数を使用すると、ページのさまざまな部分に異なる値を設定できるため、さらに一歩前進できます。 11. Vue の外部で作成された変数をレスポンシブにするにはどうすればよいですか? オプション API を使用する場合は、コンポーネントのデータ セクションに次のコードを追加するだけです。 const 外部変数 = getValue(); エクスポートデフォルト{ データ() { 戻る { 反応変数: 外部変数、 }; } };
'vue' から { ref } をインポートします。 // Vue コンポーネントの外部で完全に実行できます const externalVariable = getValue(); const リアクティブ変数 = ref(外部変数); // .value を使用してアクセスします console.log(reactiveVariable.value); 代わりにリアクティブを使用してください: 'vue' から { reactive } をインポートします。 // Vue コンポーネントの外部で完全に実行できます const externalVariable = getValue(); // Reactive はオブジェクトと配列でのみ機能します const anotherReactiveVariable = reactive(externalVariable); // 直接アクセス console.log(anotherReactiveVariable); まだ 12. v-for での構造分解
<li v-for="{ ユーザー内の name, id }" :key="id" > {{ 名前 }} </li> ご存知のとおり、次のようなタプルを使用して v-for からインデックスを取得できます。 <li v-for="(値, キー) in [ 「海勇」 '凍った'、 「ウェブ初心者」 ]"> {{ インデックス + 1 }} - {{ 値 }} </li> オブジェクトを使用する場合、キーを取得することもできます。 <li v-for="(値, キー) in { 名前:「海勇」 公開: 2021年、 監督:「ブロガー」 }"> {{ キー }}: {{ 値 }} </li> これらの 2 つの方法を組み合わせて、プロパティのキーとインデックスの両方を取得することもできます。 <li v-for="(値、キー、インデックス) in { 名前:「海勇」 公開: 2021年、 監督:「ブロガー」 }"> #{{ インデックス + 1 }}。{{ キー }}: {{ 値 }} </li> 13. Vue で範囲をループするv-for ディレクティブを使用すると、配列を反復処理できますが、範囲を反復処理することもできます。 <テンプレート> <ul> <li v-for="n in 5">アイテム #{{ n }}</li> </ul> </テンプレート> 表示効果:
14. コンポーネント内の何かを観察するコンポーネントからの応答はすべて観察できます。 エクスポートデフォルト{ 計算: { いくつかの計算されたプロパティ() { // 計算プロパティを更新}, }, 時計: いくつかの計算されたプロパティ() { // 計算されたプロパティが更新されたときに何かを行う } } }; 視聴できるもの:
コンポジション API を使用する場合、 15. アイテム盗難タイプ親コンポーネントで使用するために、子コンポーネントから たとえば、このコンポーネントでは Icon コンポーネントを使用します。 <テンプレート> <div> <h2>{{ 見出し }}</h2> <アイコン :type="アイコンタイプ" :size="アイコンサイズ" :colour="アイコンの色" /> </div> </テンプレート> これを機能させるには、Icon コンポーネントからコピーした正しいプロパティ タイプを追加する必要があります。 './Icon' から Icon をインポートします。 エクスポートデフォルト{ コンポーネント: { アイコン }, 小道具: { アイコンタイプ: { タイプ: 文字列、 必須: true、 }, アイコンサイズ: { タイプ: 文字列、 デフォルト: '中'、 バリデータ: サイズ => [ '小さい'、 '中くらい'、 '大きい'、 「特大」 ].includes(サイズ)、 }, アイコンカラー: タイプ: 文字列、 デフォルト: '黒'、 }, 見出し: タイプ: 文字列、 必須: true、 }, }, };
だから私たちはそれらを盗むのです: './Icon' から Icon をインポートします。 エクスポートデフォルト{ コンポーネント: { アイコン }, 小道具: { ...アイコン.props、 見出し: タイプ: 文字列、 必須: true、 }, }, }; ただし、この例では各プロパティ名の先頭に './Icon' から Icon をインポートします。 アイコンプロパティを定数に設定する // 事前に何らかの処理を行う Object.entries(Icon.props).forEach((key, val) => { iconProps[`icon${key[0].toUpperCase()}${key.substring(1)}`] = val; }); エクスポートデフォルト{ コンポーネント: { アイコン }, 小道具: { ...アイコンプロップ、 見出し: タイプ: 文字列、 必須: true、 }, }, }; これで、 しかし、 16. 要素の外側(または内側)のクリックを検出する場合によっては、クリックが特定の要素の内側で発生したか外側で発生したかを検出する必要があることがあります。私たちが通常使用するアプローチは次のとおりです。 window.addEventListener('mousedown', e => { // クリックされた要素を取得します。const clickedEl = e.target; // `el` は外部クリックを検出する要素です if (el.contains(clickedEl)) { // "el" 内をクリック } else { // `el` の外側をクリック} }); 17. 再帰スロットテンプレートのみを使用してコンポーネント コンポーネントは次のようになります。 <!-- VFor.vue --> <テンプレート> <div> <!-- 最初の項目をレンダリングします--> {{リスト[0]}} <!-- 他にも処理すべき項目があるが、レンダリングした項目はそのままにしておく必要がある場合 --> <v-for v-if="リストの長さ > 1" :list="リスト.スライス(1)" /> </div> </テンプレート> スコープ付きスロットでこれを実行したい場合、なぜ実行しないのでしょうか? ! — 少し調整が必要です: < テンプレート> <div> <!-- レンダリングするアイテムをスロットに渡します --> <スロット v-bind:item="リスト[0]"> <!-- デフォルト --> {{リスト[0]}} </スロット> <v-for v-if="リストの長さ > 1" :list="リスト.スライス(1)" > <!-- スコープ スロットを再帰的に渡します --> <テンプレート v-slot="{ アイテム }"> <スロット v-bind:item="item" /> </テンプレート> </v-for> </div> </テンプレート> このコンポーネントの使用方法は次のとおりです。 <テンプレート> <div> <!-- 一般的なリスト --> <v-for :list="リスト" /> <!-- 太字項目のリスト --> <v-for :list="リスト"> <テンプレート v-slot="{ アイテム }"> <strong>{{ アイテム }}</strong> </テンプレート> </v-for> </div> </テンプレート> 18. コンポーネントメタデータコンポーネントに追加するすべての情報が状態であるとは限りません。他のコンポーネントにさらに情報を提供するために、メタデータを追加する必要がある場合があります。
レイアウトで各ウィジェットが占める列数を把握したい場合は、コンポーネントにメタデータとして直接追加できます。 エクスポートデフォルト{ 名前: 'LiveUsersWidget', // 👇 追加プロパティとして追加するだけです columns: 3, 小道具: { // ... }, データ() { 戻る { //... }; }, }; このメタデータはコンポーネントのプロパティとして見つかります。 './LiveUsersWidget.vue' から LiveUsersWidget をインポートします。 const { columns } = LiveUsersWidget; 特別な $options プロパティを介してコンポーネント内からメタデータにアクセスすることもできます。 エクスポートデフォルト{ 名前: 'LiveUsersWidget', 列: 3, 作成された() { // 👇 `$options` にはコンポーネントのすべてのメタデータが含まれます console.log(`Using ${this.$options.metadata} columns`); }, }; このメタデータはコンポーネントのすべてのインスタンスに対して同じであり、応答性がないことに注意してください。 その他の用途には以下が含まれます (ただし、これらに限定されません)。
19. 複数ファイル単一ファイルコンポーネントこれは SFC のあまり知られていない機能です。通常の HTML ファイルと同じようにファイルをインポートできます。 <!-- "単一" ファイル コンポーネント --> <テンプレート src="./template.html"></テンプレート> <script src="./script.js"></script> <スタイル スコープ src="./styles.css"></style> これは、スタイル、ドキュメント、その他を共有する必要がある場合に便利です。スクロールで指が疲れてしまうような非常に長いコンポーネントファイルにも最適です。 20. 再利用可能なコンポーネントはあなたが思っているものとは違う再利用可能なコンポーネントは、大きくて複雑なものである必要はありません。私は、小さくて短いコンポーネントを再利用可能なものにすることがよくあります。このコードをどこでも書き直すわけではないので、更新が非常に簡単になり、すべての <!-- オーバーフローメニュー.vue --> <テンプレート> <メニュー> <!-- メニューをトリガーするカスタム ボタンを追加します --> <テンプレート #button v-slot="bind"> <!-- クリック ハンドラー、a11y 属性などを渡したい場合は、bind を使用します。 --> <ボタン v-bind="bind"> <!-- 独自の「...」アイコンを使用します。このボタンにはテキストはありません --> <テンプレート #アイコン> <svg src="./ellipsis.svg" /> </テンプレート> </ボタン> </テンプレート> </メニュー> </テンプレート> ここでは <テンプレート> <オーバーフローメニュー :menu-items="項目" @click="ハンドルメニュークリック" /> </テンプレート> 21. コンポーネント外からのメソッドの呼び出しref を指定することで、コンポーネントの外部からメソッドを呼び出すことができます。 <!-- 親.vue --> <テンプレート> <子コンポーネント ref="子" /> </テンプレート> // Parent.vue のどこか this.$refs.child.method(); 通常、コンポーネント間の通信には、プロパティとイベントを使用します。プロパティは子コンポーネントに送信され、イベントは親コンポーネントに送り返されます。 <テンプレート> <子コンポーネント :tell-me-what-to-do="いくつかの指示" @something-happened="hereIWillHelpYouWithThat" /> </テンプレート> しかし、親コンポーネントが子コンポーネントのメソッドをトリガーする必要がある状況に遭遇することがあります。ここでは、単に小道具を渡すだけでは機能しません。 ブール値を渡して、子コンポーネントにそれを監視させることができます。 <!-- 親.vue --> <テンプレート> <ChildComponent :trigger="メソッドを呼び出すべき" /> </テンプレート> // 子.vue エクスポートデフォルト{ プロパティ: ['トリガー'], 時計: shouldCallMethod(newVal) { if (newVal) { // このメソッドはトリガーが `true` に設定されている場合に呼び出されます this.method(); } } } } これは正常に動作しますが、最初の呼び出しのみです。このアクションを複数回トリガーする必要がある場合は、状態をクリーンアップしてリセットする必要があります。ロジックは次のようになります。
代わりに、子コンポーネントに ref を設定すると、メソッドを直接呼び出すことができます。 <!-- 親.vue --> <テンプレート> <子コンポーネント ref="子" /> </テンプレート> // Parent.vue のどこか this.$refs.child.method(); 私たちは「 時には「最善」の解決策が最悪の解決策になってしまうこともあります。 22. 配列とオブジェクトの監視オブザーバーを使用する上で最も難しいのは、オブザーバーが正しく機能しないことがある点です。これは通常、 エクスポートデフォルト{ 名前: 'ColourChange', 小道具: { 色: タイプ: 配列、 必須: true、 }, }, 時計: // メソッドの代わりにオブジェクト構文を使用する colours: { // これにより、Vue は配列の内側を見るよう通知されます deep: true, // メソッドをハンドラーフィールド handler() に移動する必要があります console.log('カラーリストが変更されました!'); } } } } Vue 3 のリアクティブ API を使用すると次のようになります。 時計( 色、 () => { console.log('カラーリストが変更されました!'); }, { 深い:本当、 } ); さらに詳しく知りたい場合は、Vue 3 および Vue 2 のドキュメントを参照してください。 23. Vue RouterによるディープリンクURL に (何らかの) 状態を保存して、ページ上の特定の状態に直接ジャンプすることができます。 たとえば、日付範囲フィルターを選択したページを読み込むことができます。 someurl.com/edit?date-range=last-week これは、ユーザーが多数のリンクを共有する可能性のあるアプリケーションの部分、サーバーでレンダリングされるアプリケーション、または通常のリンクで通常提供されるよりも多くの情報を 2 つの別々のアプリケーション間で渡す場合に役立ちます。 フィルター、検索値、モードのオン/オフ、リスト内でスクロールした位置などを保存できます。無限ページングに最適です。 vue-router を使用して次のようにクエリを取得します (これは Nuxt や Vuepress などのほとんどの Vue フレームワークでも機能します)。 定数 dateRange = this.$route.query.dateRange; これを変更するには、RouterLink コンポーネントを使用してクエリを更新します。 <ルーターリンク:to="{ クエリ: { 日付範囲: 新しい日付範囲 } }"> 24. テンプレートタグの別の使い方
私は v-if ロジックを簡素化するためにこれを使用するのが好きですが、時には v-for も使用します。 この例では、すべて同じ v-if 条件を使用する要素がいくつかあります。 <テンプレート> <div class="カード"> <img src="画像パス" /> <h3> {{ タイトル }} </h3> <h4 v-if="展開"> {{ サブ見出し }} </h4> <div v-if="expanded" class="card-content"> <スロット/> </div> <ソーシャルシェア v-if="expanded" /> </div> </テンプレート> 最初は少し扱いにくく、わかりにくいですが、これらの要素の多くは一緒に表示され、非表示になります。より大規模で複雑なアセンブリでは、状況はさらに悪化する可能性があります。 しかし、これを修正することは可能です。 テンプレート タグを使用してこれらの要素をグループ化し、v-if をテンプレート タグ自体に組み込むことができます。 <テンプレート> <div class="カード"> <img src="画像パス" /> <h3> {{ タイトル }} </h3> <テンプレートv-if="展開"> <h4> {{ サブ見出し }} </h4> <div class="カードコンテンツ"> <スロット/> </div> <ソーシャルシェア/> </テンプレート> </div> </テンプレート> 25. エラー(および警告)を処理するためのより良い方法Vue では、エラーと警告のカスタム ハンドラーを提供できます。 // ビュー3 const app = createApp(App); app.config.errorHandler = (エラー) => { 警告(エラー); }; // ビュー2 Vue.config.errorHandler = (err) => { 警告(エラー); };
たとえば、エラーが処理されない場合、アプリケーションはクラッシュするだけでなく、全ページにわたるエラー画面を表示して、ユーザーに更新または別のアクションを試行させる可能性があります。 Vue 3 では、エラー ハンドラーはテンプレート エラーとウォッチャー エラーにのみ適用されますが、Vue 2 のエラー ハンドラーはほぼすべてをキャッチします。どちらのバージョンの警告ハンドラも開発専用です。 これで、知っておくべき 25 の Vue のヒントに関するこの記事は終了です。さらに関連性の高い Vue のヒントについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: クエリプロファイラを使用して MySQL ステートメントの実行時間を表示する方法
この記事では、フロントエンドページのスライド検証を実装するためのJavaScript + HTMLの...
1. 参照整合性参照整合性とは、主に外部キー制約を使用した複数のテーブル間の設計を指します。複数テ...
今回は、コンピューターや携帯電話用の rtmp ライブ ブロードキャスト サーバーを設定し、ライブ ...
とあるサイトからレンタルした仮想マシンの有効期限が近づいており、更新料が200元以上かかります。Al...
1. リストクエリインターフェースの効果コード処理ロジックを紹介する前に、まずは感覚的に理解し、レン...
1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...
タイトルで提起された問題は、段階的に分解して解決することができます。 MySQL では KEY と ...
まず、Webフロントエンドエンジニアの価値についてお話ししましょう。現在、Web製品のインタラクショ...
この記事では、MySQL データベースでよく使用される SQL ステートメントを例を使用して説明しま...
VMに慣れた後、BOXに切り替えるのは少し異なります。たとえば、コピーネットワークカードを2枚使って...
ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...
目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...
境界範囲間のmysql間の範囲は両側の境界値を含む例: 3 から 7 までの id は、id >...
私は、デスクトップ バージョンとサーバー バージョンの両方で、仮想マシンにさまざまなイメージを何度も...
目次1. 画像を取得する2. ブローカーサーバーを作成する3. ブローカーを作成する4. Rocke...