Vue.jsはじめました

はじめに

こんにちは！ユアマイスターアドベントカレンダー３日目の投稿になります。
最近ようやくVue.jsを学ぶ決心がつき、ここ1ヶ月ほど合間をみて勉強してました。
本投稿では勉強内容をまとめ、アウトプットのきっかけになれば幸いです。

勉強方法

入門書と動画コンテンツを購入し、サンプルコードを書きながら徐々に慣れていきました。
ちなみに私は新技術を勉強するときにUdemyというサービスをよく利用しています。動画なのでわかりやすいし、セール期間中だと安く購入できるのでおすすめです。

ちなみに今回購入した本と動画がこちら↓

Vue.js入門基礎から実践アプリケーション開発まで
https://gihyo.jp/book/2018/978-4-297-10091-9

Vue JS 入門決定版！jQuery を使わない Web 開発 - 導入からアプリケーション開発まで体系的に動画で学ぶ
https://www.udemy.com/course/learn-vuejs/

Vueの基本

Vueオブジェクト・Vueインスタンス

Vueを勉強する上で一番最初にやることはグローバル変数Vueのインスタンスを作成するところじゃないでしょうか？
Vueのインスタンスはいくつかのコンストラクタを持っていて、インスタンスをDOMとマウントすることでVueの基本的な機能を提供してくれます。（マウントとは既存のDOM要素をVueが生成するDOM要素に置き換えることです。）

オプション	内容
data	UIの状態・データ
el	Vueインスタンスをマウントする要素
filters	データを文字列と整形する
methods	イベントが発生した時などの振る舞い
computed	データから派生して算出される値

例えば、el プロパティでマウント対象のDOMを指定し、Vueで操作することが可能になります。

sample.html

var vm = new Vue({
  el: '#app',
  data: {
    name: 'taro',
    age: 21
  },
  methods: greet: function () {
    alert('Hello');
  }
})

<div id="app">
  <p>
    名前: {{ name }}, 年齢: {{ age }}
  </p>

  <button @click="greet"></button>
</div>

基本文法

よく使った基本的な文法をいくつか紹介します。

変数表示

<div id="app">
  {{ text }}
</div>

var vm = new Vue({
  el: '#app',
  data: {
    text: 'hello'
  }
})

結果：hello

リストレンダリング v-for

<div id="app">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    items: [
      {
        message: 'first'
      },
      {
        message: 'second'
      },
    ]
  }
})

結果：
first
second

条件付きレンダリング v-if

<div id="app">
    <div v-if="first">first</div>
    <div v-if="second">second</div>
</div>

var vm = new Vue({
    el: '#app',
    data: {
        first: true,
        second: false,
    }
})

結果：first

データバインディング

VueはDOM要素とJsのデータを結びつける双方向なデータバインディングを提供しているので、対象のDOMに対してJsのデータをバインディングすることで何か変更があるたびにDOMも変更され、下記のように何か入力されたらテキストの値が変わります。

サンプルコード

sample.html

<div id="app">
  <p>
    <input type="text" v-model="message">
  </p>
  <p>
    {{ message }}
  </p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      message: ''
    }
  })
</script>

jQueryとの比較

jQueryで同じことを実現しようとするとデータバインディングの良さをよりイメージできると思います。
jQueryで実現する場合は値をセットし、inputの入力イベントをトリガーにイベントが発行されたタイミングで値取得とテキストへの値セットをしないといけません。もし、このようなパーツが複数存在するとき、毎回同じような処理を書かないといけません。

サンプル

sample.html

<input id="entry" type="text"/>
<p id="message"></p>

<script>
  $('#entry').keyup(function () {
    var val = $(this).val();
    $('#message').text(val);
  });
</script>

まとめ

このようにVueについて勉強したことを書かせて頂きました。
なんとか書き方は徐々に慣れてきたところですが、インスタンスが生成されてからの内部の動きやコンポネント設計などまだまだ勉強しないといけないところはたくさんあります。ただ、この機会にプロダクトにVue.jsを取り入れモダンな開発ができるようになればと思います。