Vue.jsでルート テンプレートを作成する方法について学習します。
この記事は、オンライン講座「Vue JS入門決定版！jQueryを使わないWeb開発 – 導入からアプリケーション開発まで体系的に動画で学ぶ」のサポートコンテンツです。
目次
動画でVue.jsを学習する
テンプレートとは
テンプレートとは 、 HTML ベースのテンプレート構文を使用した、描画部分に関する記述のことです。
いわゆる、MVCモデルとか、MVVMパターンでいうところの、Vの部分、Viewに相当する部分です。
ルートのテンプレートというのは、テンプレートの中でも、頂点に位置するテンプレートを指します。
テンプレートの記述
それでは、早速、コードをかきます。
jsFiddleのHTML入力欄に下記のように記述します。
<div id="app"></div>
ルートのテンプレートは、htmlのbodyタグの中であれば、どこにでも設置できます。
id名はappでは、なくても任意につけることが出来ます。
本コースでは、基本的には、divタグに、id名がappというセレクタを設定して利用します。
HTML中で、このルートテンプレートの中が、Vue.jsの世界として利用できます。
JavaScript側でルートのテンプレートをマウント
次に、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開発に興味はあるけれど、まだ触れていない方におすすめです。
動画教材を使うことで、独学するよりも効率的に学べます。
動画で学ぶプログラミング入門
オンラインスクールProglus（プログラス）でプログラミングを学んで、創れる人になろう！
在宅学習応援！今なら複数の基礎コースが無料！！
今すぐ詳細を確認する