Vue.jsのススメ

みなさん、こんにちは。 Silbirdアドベントカレンダー 3日目も初心者な私が担当いたします。😂 今日は初心者がはじめてのjsを手習いしてみた記事です。自分の整理の為にも書いた記事なのでどんどんご意見やマサカリをお願いします(？)

経緯

Webなものを作ろうとすると、大抵jsを書く必要があるかもなぁ。という気持ちが湧き出てきて、初心者なので、何か手習いをしてみようと思い立った。
そこで、最近流行っているらしきVue.jsについてまとめて、手習いをしてみようと思う。

Vue.jsってなによ？

Vue.js は UI を構築するためのライブラリです。
JavaScript 内のデータと HTML を自動的に結びつけ、複雑な UI の実装も簡単にできるのが特徴。
また、プログレッシブフレームワークとも呼ばれ、小さな Web ページから大きなアプリケーションまで、柔軟に適用できるように設計されているそうです。

公式サイト
https://vuejs.org/
公式サイト(日本語)
https://jp.vuejs.org/index.html

https://unpkg.com/vue からは npm に公開されている最新版の Vue.js を取得することができる。
特定バージョンを使用したいときには、例えば https://unpkg.com/vue@2.4.1 のように指定が可能。

初めてのVue.js

Hello Worldまで

Vue.js を動かすためには、html内でscriptタグで囲んでパッケージを読み込む必要があるよ。
<script src ="https://unpkg.com/vue"></script>
まずはグローバルに定義された Vueコンストラクタからインスタンスを作る。

var vm = new Vue({
)};

インスタンスをつくる時に、引数にオプションを渡すことでデータを定義することができる。
data オプションを使って、'Hello World!' という文字列を持った message という名前のデータを定義する。

var vm = new Vue({    
  data: {
    message: 'Hello World!'
  }
)};

インスタンスのmessageに格納されたデータを表示するためにHTMLでテンプレートをつくる。
Vue.jsではMustache記法 {{ }}を使ってインスタンスのデータを参照する。

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

mustache is 何
様々な言語と組み合わせて使えるテンプレートエンジン。 Loopなどの構文がないので、Logic-Less templatesとか呼ばれている。
タグの記法が{{hoge}}みたいになっていて、
{ が口ひげみたいに見えるためmustache(口ひげ)というらしい。 https://qiita.com/sengok/items/1d958348215647a5eaf0 より

テンプレートとインスタンスを結びつけるために、インスタンスに el オプションを指定して使用するテンプレートを指定する。

var vm = new Vue({    
  el: '#app', 
  data: {
    message: 'Hello World!'
  }
)};

Hello World が表示されるぞ。らくちん！

面白いなと思った機能

双方向データバインディング

input 要素に v-model という属性をつけることで、インスタンス上のデータと input 要素の入力値を同期することができる。これを双方向データバインディングと呼ぶよ。

v-model にはインスタンス上のデータの名前を渡すことで、データと入力フォームの結びつけをすることができる。例えば、以下のように書いた時、
<input type="text" v-model="message"> message が更新されたときには input 上の入力値も更新されるし、逆にinputに値が入力されると message も更新される。すごい。
以下の動画を参照

動画