浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

Vue.jsの単一コンポーネント用styleタグ属性scoped

 Vue.jsには単一コンポーネントという仕組みがあります。これは単一のファイルの中にHTML構造テンプレート、JavaScriptによる動的操作、CSSによるデザイン指定を書き込む仕組みです。単一コンポーネントを使うことによって、あるファイルを差し込むだけで完成されたパーツを差し込めます。

 コンポーネントのデザインを単一にまとめるために必要なのがscoped属性です。

<style scoped>

</style>

 これが何をやっているかというと、次の画像の様なdata-\d+の様なVue.jsが設定するカスタム属性を指定した上でスタイルを指定しています。

 scopedが無いとbodyタグ末尾にjsファイル呼び出しを置く時、あるコンポーネントがページ全体を崩します。あるライブラリを入れたらデザインが崩れたなんて時はscopedの有無を疑うのがいいでしょう。

  • この記事いいね! (0)