Vue.jsのルートテンプレートを作成 | プログラミング入門ナビ

Vue.jsでルートテンプレートを作成する方法について学習します。

動画でVue.jsを学習する

テンプレートとは、 HTML ベースのテンプレート構文を使用した、描画部分に関する記述のことです。

いわゆる、MVCモデルとか、MVVMパターンでいうところの、Vの部分、Viewに相当する部分です。

ルートのテンプレートというのは、テンプレートの中でも、頂点に位置するテンプレートを指します。

それでは、早速、コードをかきます。
jsFiddleのHTML入力欄に下記のように記述します。

<div id="app"></div>

ルートのテンプレートは、htmlのbodyタグの中であれば、どこにでも設置できます。

id名はappでは、なくても任意につけることが出来ます。
本コースでは、基本的には、divタグに、id名がappというセレクタを設定して利用します。

HTML中で、このルートテンプレートの中が、Vue.jsの世界として利用できます。

次に、JS側のVueインスタンスに、戻って、
マウントする要素を指定します。

Vue. js を動作させるためのオプションを「オプション名: 値」のハッシュ形式で指定できます。

var app = new Vue({
	el: '#app',
})

elは、アプリケーションを紐付ける要素セレクタを指定します。
要素は、英語でいうとエレメントです。

el: ‘#app’,とすることで、Vue. js を適用する要素を、id がappの要素と指定できます。

いいかえると、idがappである要素の配下で、Vue.jsが有効になります。

この記事では、ルートのテンプレートを作成する方法について学習しました。

オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」では、Vue.jsを動画を使って学習します。
Vue.jsを使ったWeb開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。