CSSを使用したVue.jsコンポーネントのスタイリング

CSSを使用してVue.jsコンポーネントのスタイルを設定するためのすべてのオプションを自由に学ぶ

注:このチュートリアルでは、Vue.jsの単一ファイルコンポーネントを使用します

CSSをVue.jsコンポーネントに追加する最も簡単なオプションは、styleHTMLの場合と同様に、タグ:

<template>
  <p style="text-decoration: underline">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’ } } } </script>

これはあなたが得ることができる限り静的です。必要に応じてunderlineコンポーネントデータで定義されますか?これがあなたがそれをすることができる方法です:

<template>
  <p :style="{'text-decoration': decoration}">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’ } } } </script>

:styleの省略形ですv-bind:style。このチュートリアルでは、この省略形を使用します。

ラップする必要があることに注意してくださいtext-decoration引用符で囲みます。これは、有効なJavaScript識別子の一部ではないダッシュが原因です。

Vue.jsが有効にする特別なキャメルケース構文を使用して引用を回避し、次のように書き直すことができます。textDecoration

<template>
  <p :style="{textDecoration: decoration}">Hi!</p>
</template>

オブジェクトをにバインドする代わりにstyle、計算されたプロパティを参照できます。

<template>
  <p :style="styling">Hi!</p>
</template>

<script> export default { data() { return { textDecoration: ‘underline’, textWeight: ‘bold’ } }, computed: { styling: function() { return { textDecoration: this.textDecoration, textWeight: this.textWeight } } } } </script>

VueコンポーネントはプレーンHTMLを生成するため、各要素にクラスを追加し、それに対応するCSSセレクターを追加してスタイルを設定することができます。

<template>
  <p class="underline">Hi!</p>
</template>

<style> .underline { text-decoration: underline; } </style>

次のようにSCSSを使用できます。

<template>
  <p class="underline">Hi!</p>
</template>

<style lang=“scss”> body { .underline { text-decoration: underline; } } </style>

上記の例のようにクラスをハードコーディングするか、クラスをコンポーネントプロパティにバインドして動的にし、データプロパティがtrueの場合にのみそのクラスに適用することができます。

<template>
  <p :class="{underline: isUnderlined}">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true } } } </script>

<style> .underline { text-decoration: underline; } </style>

で行ったように、オブジェクトをクラスにバインドする代わりに<p :class="{text: isText}">Hi!</p>、文字列を直接バインドできます。これにより、データプロパティが参照されます。

<template>
  <p :class="paragraphClass">Hi!</p>
</template>

<script> export default { data() { return { paragraphClass: ‘underline’ } } } </script>

<style> .underline { text-decoration: underline; } </style>

複数のクラスを割り当てることができます。paragraphClassこの場合、または配列を使用して:

<template>
  <p :class="[decoration, weight]">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’, weight: ‘weight’, } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

クラスバインディングにインライン化されたオブジェクトを使用して、同じことができます。

<template>
  <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true, isBold: true } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

そして、2つのステートメントを組み合わせることができます。

<template>
  <p :class="[decoration, {weight: isBold}]">Hi!</p>
</template>

<script> export default { data() { return { decoration: ‘underline’, isBold: true } } } </script>

<style> .underline { text-decoration: underline; } .weight { font-weight: bold; } </style>

オブジェクトを返す計算プロパティを使用することもできます。これは、同じ要素に追加するCSSクラスが多数ある場合に最適に機能します。

<template>
  <p :class="paragraphClasses">Hi!</p>
</template>

<script> export default { data() { return { isUnderlined: true, isBold: true } }, computed: { paragraphClasses: function() { return { underlined: this.isUnderlined, bold: this.isBold } } } } </script>

<style> .underlined { text-decoration: underline; } .bold { font-weight: bold; } </style>

計算されたプロパティで、を使用してコンポーネントデータを参照する必要があることに注意してくださいthis.[propertyName]、テンプレート内では、データプロパティは第1レベルのプロパティとして便利に配置されます。

最初の例のようにハードコーディングされていないCSSはすべてVueによって処理され、VueはCSSに自動的にプレフィックスを付けるという素晴らしい仕事をするので、古いブラウザー(つまり、Vueのブラウザー)をターゲットにしながらクリーンなCSSを記述できます。サポートしているので、IE9 +)

私の無料ダウンロードVueハンドブック


その他のvueチュートリアル: