Vue3 風の新機能について話しましょう（概要）-Vue.js-php.cn

Vue3 風の新機能について話しましょう（概要）

青灯夜游

リリース： 2022-05-12 21:23:26

転載

3271 人が閲覧しました

Vue3 はスタイルスタイルをアップグレードしました。次の記事では、Vue3 スタイルの新機能を要約して共有します。皆様のお役に立てれば幸いです。

Vue3 風の新機能について話しましょう（概要）

Vue3.0 以降に導入されたセットアップ機能は、JS を書くように Vue コンポーネントを開発できるほか、スタイルにも変数や関数の導入など多くの新機能が追加されており、 css より再利用可能...

スタイルの新機能

Vue3.2 バージョンでは、単一ファイルコンポーネントのスタイルが改善されています。ローカルスタイル、CSS 変数、テンプレートに公開されるスタイルなどのアップグレードが行われました。 (学習ビデオ共有: vue ビデオチュートリアル)

1. 部分的なスタイル

場合<style> タグに scoped 属性がある場合、その CSS は現在のコンポーネントの要素にのみ適用されます:

<template>
  <div class="example">hi</div>
</template>
 
<style scoped>
.example {
  color: red;
}
</style>

ログイン後にコピー

##2. 深さセレクター

スコープ付きスタイルのセレクターを使用して、より「深い」選択を行いたい場合は、 : サブコンポーネントに影響を与えるには、:deep() 疑似クラスを使用できます:

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

ログイン後にコピー

v-html を通じて作成された DOM コンテンツは、スタイリング効果をスコープすることはできませんが、深度セレクターを使用してスタイルを設定することはできます。

#3. スロットセレクターデフォルトでは、スコープスタイルは

< に影響しません。 ;slot/>

レンダリングされたコンテンツは、親コンポーネントによって保持および渡されると見なされるためです。 :slotted 疑似クラスを使用して、スロットの内容をセレクターとして正確にターゲットにします: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><style scoped> :slotted(div) { color: red; } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>

4. グローバルセレクタースタイルルールの 1 つをグローバルに適用したい場合は、別の

<style>

を作成する代わりに、:global 疑似class.実装: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><style scoped> :global(.red) { color: red; } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>

5. ローカルスタイルとグローバルスタイルの混合ローカルスタイルとグローバルスタイルの両方を使用することもできます。同じコンポーネント内のスタイルスコープ付きスタイルとスコープなしスタイルが含まれます:

<style>
/* global styles */
</style>
 
<style scoped>
/* local styles */
</style>

ログイン後にコピー

6. CSS モジュールのサポート

< ;style module>

タグは CSS モジュール にコンパイルされ、生成された CSS クラスキーはコンポーネント 1 に公開されます。デフォルトは

です。 $style

オブジェクトコンポーネントに公開されます; <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><template> <p :class="$style.red"> This should be red </p> </template> <style module> .red { color: red; } </style></pre><div class="contentsignin">ログイン後にコピー</div></div>2. 挿入されたモジュール名

<template>
  <p :class="classes.red">red</p>
</template>
 
<style module="classes">
.red {
  color: red;
}
</style>

ログイン後にコピー

7 をカスタマイズできます。 setup 挿入されたクラスは、

useCssModule

を通じて setup() および <script setup> で使用できます。 API: <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;"><script setup> import { useCssModule } from &#39;vue&#39; // 默认, 返回 <style module> 中的类 const defaultStyle = useCssModule() // 命名, 返回 <style module="classes"> 中的类 const classesStyle = useCssModule(&#39;classes&#39;) </script></pre><div class="contentsignin">ログイン後にコピー</div></div>

##8. 動的 CSS の <style>

タグ単一のファイルコンポーネントを渡すことができます

v -bind この CSS 関数は、CSS 値を動的コンポーネントの状態に関連付けます:

<script setup>
const theme = {
  color: &#39;red&#39;
}
</script>
 
<template>
  <p>hello</p>
</template>
 
<style scoped>
p {
  color: v-bind(&#39;theme.color&#39;);
}
</style>

ログイン後にコピー

(終了)

(学習ビデオ共有: Web フロントエンド開発、基本プログラミングビデオ)

以上がVue3 風の新機能について話しましょう（概要）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。