Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明

Vue3 シングルファイルコンポーネントのスタイル機能の詳細な説明

スタイルスコープ

注意事項:

  • スタイルは他のコンポーネントには影響せず、現在のコンポーネントにのみ有効になります。
  • 子コンポーネントのルート要素は、親コンポーネントのスコープ スタイルと子コンポーネントのスコープ スタイルの両方の影響を受けます。これにより、親コンポーネントが子コンポーネントのレイアウトを調整できるようになります。
  • 特別なセレクターが 3 つあります。

1. ディープセレクター: 子コンポーネントに影響を与える可能性があります。疑似クラス => :deep(cls: 影響を受けるセレクター) を使用します。

    .a :deep(.b) {
        ...
    }

2. スロットセレクター: スロットコンテンツのスタイルに影響を与えます。疑似クラスを使用する => :slotted(selector)

    :sloted(.a) {
        ...
    }

3. グローバルセレクター: スタイルはグローバル環境に影響します。 疑似クラスを使用する => :global(selector)

    :sloted(.a) {
        ...
    }

スコープ付きスタイルはスタイルとともに存在できる

スタイルモジュール

スタイル タグにはモジュールが含まれています。そのスタイルは、スタイル スコープと同様に、現在のコンポーネントにのみスコープできます。

このメソッドは、CSS を CSS モジュールにコンパイルし、CSS スタイルを使用するためにコンポーネントの $styles オブジェクトに公開します。

<テンプレート>
  <p :class="$style.red">
    これは赤であるべきだ
  </p>
</テンプレート>

<スタイルモジュール>
。赤 {
  色: 赤;
}
</スタイル>

モジュールに値を割り当てて、公開されるオブジェクトの名前をカスタマイズできます

<テンプレート>
  <p :class="style.red">
    これは赤であるべきだ
  </p>
</テンプレート>

<スタイル モジュール = 'スタイル'>
。赤 {
  色: 赤;
}
</スタイル>

useCssModule() API を使用して、結合された API で cssModule を使用できます。

// デフォルトでは、<style module> useCssModule() のクラスを返します

// 名前を付けて、<style module="classes"> でクラスを返す useCssModule('classes')

状態駆動型動的CSS

v-bind() を使用して、CSS 値を動的コンポーネントの状態と関連付けることができます。

<テンプレート>
  <div class="text">こんにちは</div>
</テンプレート>

<スクリプト>
エクスポートデフォルト{
  データ() {
    戻る {
      色: 「赤」
    }
  }
}
</スクリプト>

<スタイル>
。文章 {
  色: v-bind(色);
}
</スタイル>

要約する

これで、vue3 シングルファイル コンポーネントのスタイル機能に関するこの記事は終了です。vue3 シングルファイル コンポーネントのスタイル機能に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vite2+Vue3を使用してMarkdownドキュメントをレンダリングする練習
  • Vue3ナビゲーションバーコンポーネントのカプセル化実装方法
  • Vue3 Vue イベント処理ガイド
  • vue3.0+echarts は 3 次元の縦棒グラフを実現します
  • この記事では、Vue 3.0 レスポンシブの使い方を説明します。
  • vue3.2 で追加された defineCustomElement の基本原理の詳細な説明
  • Vue3 + TypeScript 開発の概要
  • Vue3+TypeScriptは再帰メニューコンポーネントの完全な例を実装します
  • Vue3はToDoリストを実装する
  • Vue3+スクリプト設定+ts+Vite+Volarプロジェクト
  • Vue3 コンポジション API でロジックの再利用を実装する方法
  • Vue3は画像拡大鏡効果を実現します
  • vue3.0+vant3.0の迅速なプロジェクト構築の実装
  • Vue3 ドキュメント クイックスタート

<<:  Windows 10 での MySQL 8.0.20 のインストールと設定方法のグラフィック チュートリアル

>>:  CentOS 7 に MySQL 8.0.20 データベースをインストールするための詳細なチュートリアル

推薦する

テーブルを作成するための MySQL SQL ステートメントの詳細な概要

mysql テーブル作成 SQL ステートメントMySQL テーブルを作成するための一般的な SQL...

MySQL データベースの集計クエリと結合クエリ操作

目次1. クエリ結果を挿入する2. 集計クエリ2.1 はじめに2.2 集計関数2.3 group b...

Vue 親コンポーネントが子コンポーネント関数の実装を呼び出す

Vue親コンポーネントは子コンポーネントの関数を呼び出す親コンポーネントはイベントを通じて子コンポー...

WeChatミニプログラムはuni-appを通じて世界中に共有されます

実際の使用では、ミニプログラムを友人や友人サークルと共有する必要があることが多く、通常は一度に 1 ...

MySql における特殊演算子の使用の概要

序文MySQL には次の 4 種類の演算子があります。算術演算子比較演算子論理演算子ビット演算子これ...

Dockerイメージの作成Dockerfileとコミット操作

イメージを構築するイメージを構築するには、主に 2 つの方法があります。実行中のコンテナをイメージに...

MySQL レプリケーションの原理と実際のアプリケーションの詳細な説明

この記事では、例を使用して、MySQL レプリケーションの原理と実際のアプリケーションについて説明し...

vue $setは配列コレクションオブジェクトへの値の割り当てを実装します

Vue $set 配列コレクションオブジェクトの割り当てVue カスタム配列オブジェクト コレクショ...

CSS を使用してサブ要素に応じて異なるスタイルを記述する方法

達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...

Vue の下部ナビゲーション バー TabBar を実装するための非常に詳細なチュートリアル

目次プロジェクト紹介:プロジェクトディレクトリ: TabBar 効果のプレビュー: TabBar 実...

MySQLインデックスマージの使い方

インデックスのマージは、MySQL が最下層で提供するインテリジェントなアルゴリズムです。インデック...

vite を使用して vue3 アプリケーションを構築する方法

1. インストールヒント: 現在、VUE3.0 の公式翻訳ドキュメントはありません。しかし、すでに誰...

Mysql5.7.17 winx64.zip 解凍バージョンのインストールと設定のグラフィックチュートリアル

1. mysql-5.7.17-winx64.zip をダウンロードします。リンク: https:/...

React のグローバル状態管理の 3 つの基本メカニズムの調査

目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...