Vue.js初心者による初心者のための完全入門講座!「第二回」

こんにちは、金子拓矢（@taku_twitt0622）です。

第二回の今回は、Vue.jsの基本的な扱い方を、実際にコードを書きながらおさえていきましょう。

まずは、前回作成したファイルをエディタで開いてください。

Vue.jsでは、htmlファイルに記述した内容と、javascriptファイルに記述したvueの処理を結びつけることができます。

この結びつけることを「バインド」と言ったりしますが、まずはその結び付け方を解説していきます！

Vueインスタンスを生成

index.htmlにおいて、

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

と記述します。

続いてindex.jsで、

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

この様に記述してみてください。

まず、new Vue({});で、今からVueを使います！ってことを宣言してます。これを「Vueインスタンスを生成する」と言ったりするので、覚えておきましょう！

次のel:  '#app'では、このVueインスタンスは、#appつまり、idがappのモノと連動しますってことを宣言しています。

ここまでの記述で、htmlファイルのdiv#appを、Vueによって連動させることができました！

マスタッシュ構文とは

では次に、マスタッシュ構文という書き方について解説します！

マスタッシュ構文とは、{{}}の様に中かっこ２つでくくったコードのことを言うのですが、形が髭に似てることからこの様な名前がついたそうな

どこらへんが髭なのかはわかりませんが、深く考えない様にしておきましょう。

index.htmlにおいて、

<div id="app">
       <p>{{ message }}</p>
   </div>

この様に先程のdivタグの中にpタグを作り、その中にマスタッシュ構文を作ります。

続いてindex.jsです。

new Vue({
   el: '#app',
   data: {
       message: 'こんにちは'
   }
});

この様に、elプロパティの下にdataプロパティを作ります。

ここで出てくるelとかdataとかは、Vueがもともと用意してくれているプロパティ名で、他にもmethodsやcomputedなど色々あります。

ここでは、なんとなく「そんなのあるんだ〜」程度に覚えておけばオッケいです！

ではここまで書けたら、実際にindex.htmlをブラウザで開いてみましょう。

画面に「こんにちは」と表示されていれば成功です！

もし表示されない方は、多分コードが間違っているので、第一回からもう一度コードを見直して、やり直してみてください。

さて、この様にdataプロパティでは、「キー:バリュー」の形でデータを作成することができます。

そしてhtmlでマスタッシュ構文を使うことにより、dataの情報と結びつけることができる、すなわち「バインド」することができるというわけです。

ただこれだけだと、「普通にhtmlファイルに『こんにちは』って入力しても同じ結果じゃん」と思うでしょう。

今回の場合はまさにその通りなんですが、vue .jsの良さは「リアクティブ」という点にあります。

次回はその辺りを詳しく解説していきます！

最後まで閲覧ありがとうございました^^