【Vue.js】⑦コンポーネントにデータをバインドしたい。

テンプレートの中でデータをバインドしてみる。

↓ 表示されれば成功です。

やっていることは

コンポーネント作成。
中でテンプレートにマスタッシュを入れる。
「data:」を呼び出して、変数に文字列を入れて宣言。

この流れです。

コードは以下の通りです。

ソース

【HTML】

    <div id="app">
        <my-component></my-component>
        <pre>{{ $data }}</pre>
    </div>

【Javascript】

    var myComponent = {

        template: '<p>{{ msg }}</p>',

        data: function() {
            return {
                msg: '■コンポーネントのオプション■'
            }
        }
    }
    var app = new Vue({
        el: '#app',
        components: {
            'my-component': myComponent
        }
    })

コンポーネントに変数を混ぜて表示するには？

実はJavaScript同じような構造を使うのも手みたいです。

普通にJavaScriptに変数を入れて表示するような仕組みを使用して、コンポーネント内で同じような記述を行います。

【普通のJavaScriptで変数を表示】

var msg = "この文字列をはさみたい。";
var html = "<p>" + msg + "</p>";

だいたい、上記のような変数を作成して、「.innerHTML」か「.value」で代入することが一般的ではないのでしょうか？

これをコンポーネント内では ↓

【コンポーネント内で変数を表示】

    var myComponent = {

        template: '<p>{{ msg }}</p>',

        data: function() {
            return {
                msg: '■コンポーネントのオプション■'
            }
        }
    }

変数の部分がマスタッシュに置き換わったくらいの変化しかないです。

あとは、変数の内容を都度変更したい場合は「methods:」内でガチャガチャ処理をすれば都合よく変わってくれると思います。

この記述だと保守は楽なのでいいですよね。

ちなみにこの構造でセキュリティ周りを実装すると怒られるらしいので、別の方法を模索しています。