dayjournal | Riot.js #002 – カスタムタグの定義2

今回は、Riot.jsでカスタムタグでHTML・CSS・JSを定義する方法を紹介します。

カスタムタグでHTML・CSS・JSを定義するためには下記のように記述します。

index.html


<!DOCTYPE html>
<html lang="ja">
<head>

    <meta charset="UTF-8">
    <title>Riot.js sample</title>

    <script src="./library/riot/riot+compiler.js"></script>

    <script src="./tag/sample.tag" type="riot/tag"></script>

</head>
<body>

    <sample></sample>

    <script>riot.mount('sample');</script>

</body>
</html>

sample.tag


<sample>

    <h1>h1タグ表示</h1>
    <h3>h3タグ表示</h3>
    <p>pタグ表示</p>

    <style scoped>

        h1 {
            color: #00AA00;
        }

        p {
            color: #0D47A1;
        }

    </style>

    <script>

        console.log('Riot.js Sample');

    </script>

</sample>

index.htmlを実行すると下記のようにブラウザで表示されます。

HTML・CSS・JSの全てが認識しているのを確認できました。

CSSの記述追加：

h1タグとpタグの色を変更。　


   　<style scoped>

        h1 {
            color: #00AA00;
        }

        p {
            color: #0D47A1;
        }

    </style>

JSの記述を追加：

コンソールに出力。


    <script>

        console.log('Riot.js Sample');

    </script>

カスタムタグを利用することで、HTML・CSS・JSを1つのファイルとしてコンポーネント化することができます。

dayjournal memo

Riot.js #002 – カスタムタグの定義2

Yasunori Kirimoto 2017/1/7

index.html

sample.tag