Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

Vue.jsはじめました

More than 1 year has passed since last update.

はじめに

こんにちは!ユアマイスターアドベントカレンダー3日目の投稿になります。
最近ようやく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で操作することが可能になります。

image.png

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も変更され、下記のように何か入力されたらテキストの値が変わります。

vue-sample.gif

サンプルコード

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を取り入れモダンな開発ができるようになればと思います。

yourmystar
サービス産業のIT化プラットフォーム「ユアマイスター」と大切なものをもっと大切にするメディア「ユアマイスター スタイル」を運営するスタートアップです。
http://corp.yourmystar.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away