1. はじめに当然ですが、長時間座ったり立ったりしていると腰にかなりの負担がかかります。はっきり言って、私は腰が脱臼しているわけではなく、穿刺手術を受けたばかりで、体に縫合した跡がまだよく治っていないので、お腹や腰に一定の負担がかかります。 前回の記事ではレイアウトの開発について書きましたので、「Vue3 (III) ウェブサイトのホームページレイアウト開発」を参照してください。ただし、コードを書く際には、優れたコードスタイルとカプセル化特性を継承する必要があるため、ここでは再度コードを修正し、公開部分の 2. コンポーネント開発
1. コンポーネントの構成
これは、 2. ヘッダーコンポーネントの開発上図の赤丸で示したように、これが抽出したい共通部分、つまりコンポーネントの展開になります。 コンポーネントの下にコンポーネントを作成します。ヘッダーのコンポーネント コードは次のとおりです。 html <テンプレート> <a-layout-headerクラス="header"> <div class="logo" /> <a-メニュー テーマ="ダーク" モード="水平" v-model:selectedKeys="選択されたキー1" :style="{ 行の高さ: '64px' }" > <a-menu-item key="1">ナビゲーション 11122</a-menu-item> <a-menu-item key="2">ナビゲーション 2</a-menu-item> <a-menu-item key="3">ナビゲーション 3</a-menu-item> </a-メニュー> </a-レイアウト-ヘッダー> </テンプレート> <script lang="ts"> 'vue' から defineComponent をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'TheHeader', }); </スクリプト> 3. フッターコンポーネントの開発上の図に示すように、フッター コンポーネントを開発する必要があります。サンプル コードは次のとおりです。 html <テンプレート> <a-layout-footer スタイル="text-align: center"> ソフトウェアテスター©2021 Liuge20211017作成 </a-レイアウト-フッター> </テンプレート> <script lang="ts"> 'vue' から defineComponent をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'TheFooter', }); </スクリプト> 4. App.vueを変更するサンプルコードは次のとおりです。 html <テンプレート> <a-レイアウト> <ヘッダー></ヘッダー> <ルータービュー/> <フッター></フッター> </a-レイアウト> </テンプレート> <スタイル> #コンポーネントレイアウトデモトップサイド2.ロゴ{ フロート: 左; 幅: 120ピクセル; 高さ: 31px; マージン: 16px 24px 16px 0; 背景: rgba(255, 255, 255, 0.3); } .ant-row-rtl #components-layout-demo-top-side-2 .logo { フロート: 右; マージン: 16px 0 16px 24px; } .サイトレイアウト背景 { 背景: #fff; } </スタイル> <スクリプト> "@/components/the-header" から TheHeader をインポートします。 "@/components/the-footer" から TheFooter をインポートします。 エクスポートデフォルト{ コンポーネント: ヘッダー、 フッター } } </スクリプト> 5. Hellowordコンポーネントと関連コードを削除するホームは次のように変更されます。 html <テンプレート> <a-レイアウト> <a-layout-sider width="200" style="background: #fff"> <a-メニュー モード="インライン" v-model:selectedKeys="selectedKeys2" v-model:openKeys="openKeys" :style="{ 高さ: '100%', 右境界線: 0 }" > <a-サブメニューキー="sub1"> <テンプレート #タイトル> <span> <ユーザーによるアウトライン /> サブナビ1 </span> </テンプレート> <a-menu-item key="1">オプション1</a-menu-item> <a-menu-item key="2">オプション2</a-menu-item> <a-menu-item key="3">オプション3</a-menu-item> <a-menu-item key="4">オプション4</a-menu-item> </a-サブメニュー> <a-サブメニューキー="sub2"> <テンプレート #タイトル> <span> <ラップトップのアウトライン /> サブナビ2 </span> </テンプレート> <a-menu-item key="5">オプション5</a-menu-item> <a-menu-item key="6">オプション6</a-menu-item> <a-menu-item key="7">オプション7</a-menu-item> <a-menu-item key="8">オプション8</a-menu-item> </a-サブメニュー> <a-サブメニューキー="sub3"> <テンプレート #タイトル> <span> <通知の概要 /> サブナビ3 </span> </テンプレート> <a-menu-item key="9">オプション9</a-menu-item> <a-menu-item key="10">オプション10</a-menu-item> <a-menu-item key="11">オプション11</a-menu-item> <a-menu-item key="12">オプション12</a-menu-item> </a-サブメニュー> </a-メニュー> </a-layout-sider> <レイアウトコンテンツ :style="{ 背景: '#fff', パディング: '24px', マージン: 0, 最小高さ: '280px' }" > コンテンツ </a-レイアウトコンテンツ> </a-レイアウト> </テンプレート> <script lang="ts"> 'vue' から defineComponent をインポートします。 エクスポートデフォルトdefineComponent({ 名前: 'ホーム'、 }); </スクリプト> 6. サービスを再起動して表示する再コンパイルしてページに再度アクセスします。結果は次のようになります。 3. 最後にVue3 (IV) コンポーネントの開発に関するこの記事はこれで終わりです。Vue3 コンポーネント開発に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
目次Docker イメージ鏡とは何ですか? Dockerイメージの読み込み原理コミットミラーDock...
背景社内に新しいサーバーが追加され、2Tのハードディスクがマウントされました。sshでログイン後、マ...
説明 ソリューションVMware 15 仮想マシン ブリッジ モードではインターネットにアクセスでき...
Nginx は、IP ベースの仮想ホスト構成、ポート ベースの仮想ホスト構成、ドメイン名ベースの仮想...
以下の質問はすべて InnoDB ストレージ エンジンに基づいています。 1. 最も大きな ID を...
最近、リンク データについていくつか調査していて、rdf データベースを使用する必要があったため、v...
1. ユーザーとパスワードの作成方法1. MySQLデータベースに入る mysql> mysq...
背景色の点滅効果を実現するには、次のコードを <body> 領域に追加するだけです。コー...
目次1. データベース論理バックアップとはどのようなバックアップですか? 2. よく使われる論理バッ...
この記事では、ブレッシングカルーセルを実装するためのjQueryの具体的なコードを参考までに共有しま...
CentOS 8 が利用可能になりました! CentOS 8 と RedHat Enterprise...
序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...
私はプロジェクトを実行するために react を使い始めたばかりで、非常に未熟で完全な初心者です。私...
目次序文プロトタイプ継承アドバンテージ欠点コンストラクタの継承アドバンテージ欠点組み合わせ継承寄生的...
1 はじめにデータベースを設計する場合、画像や音声ファイルをデータベースに挿入することは避けられませ...