目標物
独自コンポーネント<hoge>
のfont_color
というタグに色を指定するとhogeという文字の色が変わるものを作って行きます。
CSSのネイティブ変数とは
cssにはsassと同じように変数というものが存在します。
.hoge{
--color:red;
}
.hoge h1{
color: var(--color);
}
この場合、h1は赤くなります。
Chromeなどのブラウザで確認すると、確かに.hoge h1{ }
のところのカラーが赤くなっています。
基本的に注意するのは上の画像の通りです。
Vueの単一ファイルコンポーネント
この記事を見ている人の多くは、もしかしたらVueについて私より、知見を深めた人かもしれません。それかVueについて最近学び始めた方かもしれません。Vueの魅力でもある単一ファイルコンポーネントについてはVueを使う人ならほとんど誰でも扱うものです。
コンポーネントとは日本語で部品という言葉です。Webサイトのページ内で共通するボタンのデザインや、記事のサムネイルも全てコンポーネントです。
単一ファイルコンポーネントのテンプレートは基本的に次のようになります。
<template>
</template>
<script>
export default {
}
</script>
<style>
</style>
<template>
タグで囲まれたところにHTMLを書きます。<template lang="pug">
と書くことでpugも扱うことができます。
<script>
の中に汎用的なJavaScriptやexport default { }
の中にVue.jsを記述します。その気になればjQueryも記述することができます
<style>
はスタイルを指定します。<style scoped>
と書くとその単一ファイルコンポーネント内でしか効かないスタイルを指定でき、スタイル汚染を防ぎます。また<template>
タグと同じように<style lang="scss">
でscss記述ができますが、webpackで設定しないといけません。
本題
フォルダの構成はこのようにします。
Index.jsにはimportでVueとhoge.vueを呼び出しておきます
import Vue from 'vue';
import hoge from './components/hoge.vue';
new Vue({
el: "#contents",
components: {
'hoge': hoge
},
});
そしてindex.htmlでhoge.vueとscript.jsを呼び出します
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>hoge</title>
</head>
<body>
<div id="contents">
<main>
<hoge font_color="red"></hoge>
<hoge font_color="yellow"></hoge>
<hoge font_color="#73e6c7"></hoge>
</main>
</div>
</body>
<script type="text/javascript" src="script.js"></script>
</html>
そして今回は以下のような単一ファイルコンポーネントファイルhoge.vue
を作成します。
<template lang="html">
<div class="hoge" :style="{'--color': this.font_color}">
<h1>hoge</h1>
</div>
</template>
<script>
export default {
props:{
font_color: {}
}
}
</script>
<style lang="scss">
.hoge{
margin:30px;
--color:red;
h1{
color: var(--color);
}
}
</style>
<div class="hoge" :style="{'--color': this.font_color}">
の部分、:style={}
はvueのv-bindの機能を使っています。
:style="{'プロパティ名':'値'}"
とすることでタグ内にCSSを指定するstyle=プロパティ名:値
と同じ効果になります。v-bindで指定したメソッド名(ここでは`font_color)はpropsで登録しておいてあげましょう。
前述した通り、:styleの記述をタグ内にすることでHTMLのインライン記述と同じ効果になります。なので:style="{'--color': this.font_color}"
と書き、index.html
で
<hoge font_color="red"></hoge>
<hoge font_color="yellow"></hoge>
<hoge font_color="#73e6c7"></hoge>
と記述することでコンパイルされたHTMLコードは以下のようになります
<div class="hoge" style="--color:red">・・・</div>
<div class="hoge" style="--color:yellow">・・・</div>
<div class="hoge" style="--color:#73e6c7">・・・</div>
HTMLのインラインにstyleが記述されます。
今回は文字の色を変化させるだけでしたが、使いようによっては様々なインタラクションに適応させることができます。