【Vue.js】オブジェクトとコンテナ

こんにちは、のっくんです。

今日からVue.jsを学び始めました。

Vue.jsはフロントエンドのフレームワークでサイトにダイナミックな動きを与えることができます。

最近だとSPA(Single Page Application)と言って、ページを1つにまとめて開発するのが主流のようです。

Vue.jsを使うとSPAのアプリケーションが作れるので最近の流行っている言語です。

試しに以下のような文字列をページに表示するページを作ってみました。

文字列をVueを使って表示しています。

たった数行の文字列ですがこれを表示するために長いコードが裏で動いています。

Vue.jsでは、「Vueオブジェクトを作る箇所」と、「Vueオブジェクトを組み込む箇所(コンテナ)」の2つで構成されます。

Vueオブジェクトを作る部分から説明していきます。

以下がVueオブジェクトを作成するためのコードです。

elという値は必ず必要な情報です。

elに組み込むタグの名前を指定します。今回はhogeというタグ名にしてみました。

dataはVueオブジェクトに渡す値です。

各動物の名前と鳴き声をセットにした変数objを作りVueオブジェクトに渡します。

次にVueオブジェクトを組み込む部分です。

先ほどのVueオブジェクトの中のelに記載したタグ名を、divタグのid属性に指定しています。

このid=”hoge”で指定されたタグを、Vue.jsのコンテナと言います。

コンテナの中の{{ cat }}に先ほどのVueオブジェクトのdataプロパティの中身が代入されて表示されます。

rawステートメントで囲まれているのは、これをJinjaのテンプレートとして認識させないためです。

Jinjaのテンプレートだと認識されるとPython側で処理がされてしまいます。

Pythonで定義した変数でなく、Vueオブジェクトの値を取り込むための処理だからです。

おわり。

ABOUTこの記事をかいた人

のっくん

のっくん。理系院卒で大企業に就職。趣味は、読書、プログラミング、英会話、筋トレ、旅行。 Twitter:@yamagablog