こんにちは、のっくんです。
今日からVue.jsを学び始めました。
Vue.jsはフロントエンドのフレームワークでサイトにダイナミックな動きを与えることができます。
最近だとSPA（Single Page Application）と言って、ページを1つにまとめて開発するのが主流のようです。
Vue.jsを使うとSPAのアプリケーションが作れるので最近の流行っている言語です。
試しに以下のような文字列をページに表示するページを作ってみました。
文字列をVueを使って表示しています。
たった数行の文字列ですがこれを表示するために長いコードが裏で動いています。
Vue.jsでは、「Vueオブジェクトを作る箇所」と、「Vueオブジェクトを組み込む箇所（コンテナ）」の２つで構成されます。
Vueオブジェクトを作る部分から説明していきます。
以下がVueオブジェクトを作成するためのコードです。
<script>
var obj = {
cat: 'NyaNya',
dog: 'WanWan',
pig: 'BooBoo'
}
new Vue({
el:'#hoge',
data: obj
});
</script>
elという値は必ず必要な情報です。
elに組み込むタグの名前を指定します。今回はhogeというタグ名にしてみました。
dataはVueオブジェクトに渡す値です。
各動物の名前と鳴き声をセットにした変数objを作りVueオブジェクトに渡します。
次にVueオブジェクトを組み込む部分です。
{% raw %}
<div id="hoge" class="m-5">
<h5>{{ cat }}</h5>
<h5>{{ dog }}</h5>
<h5>{{ pig }}</h5>
</div>
{% endraw %}
先ほどのVueオブジェクトの中のelに記載したタグ名を、divタグのid属性に指定しています。
このid=”hoge”で指定されたタグを、Vue.jsのコンテナと言います。
コンテナの中の{{ cat }}に先ほどのVueオブジェクトのdataプロパティの中身が代入されて表示されます。
rawステートメントで囲まれているのは、これをJinjaのテンプレートとして認識させないためです。
Jinjaのテンプレートだと認識されるとPython側で処理がされてしまいます。
Pythonで定義した変数でなく、Vueオブジェクトの値を取り込むための処理だからです。
おわり。
