やっほー
Vue.jsの使い方を簡単に解説!メリットやサンプルコードも!

Vue.jsの使い方を簡単に解説!メリットやサンプルコードも!

  • 2018年8月12日
  • 2021年3月26日
  • Vue.js
  • 13view

最近話題のVue.jsですが、全くの初心者にはどういったものなのか分からないですよね。

僕もクライアント側は詳しくないので、Vue.jsについて勉強してみました。

ということで今回は、Vue.jsの基本的な使い方をサンプルコードをもとに解説します!

Vue.jsとは

Vue.jsとは、JavaScriptのフレームワークです。

2014年に導入された、比較的新しいフレームワークとなります。

Vue.jsのメリット

なぜVue.jsが使われるのか。そこにはそれ相応のメリットがあるからです。

  • 導入のしやすさ
  • 学習コストの低さ
  • 日本語ドキュメントの充実

導入のしやすさ

Vue.jsは導入が非常に簡単です

使い方は後ほどお話ししますが、HTMLに1行追加するだけでVue.jsを導入することが可能です。

学習コストの低さ

これは僕の感覚ですが、JavaScriptをそれなりに触ったことがある方ならすぐに慣れると思います。

学習コストが高いとやる気も出なくなりますが、Vue.jsは簡単に理解できるのも良い点です。

日本語ドキュメントの充実

Vue.jsは日本語ドキュメントが充実しています

日本語ドキュメントがないと困りますからね。

また、充実しているということは、それだけニーズがあるとも言い換えることができます。

Vue.jsを使うには

Vue.jsのメリットで「導入がしやすい」というお話をしました。

Vue.jsはCDNを利用することができるので、HTMLに以下のコードを1行追加するだけで利用できます。

CDNはコンテンツデリバリネットワークと言い、大容量のデジタルコンテンツをインターネット上で大量配信するためのネットワークのことを指します。

Vue.jsを使ってみよう!

では早速Vue.jsを使っていきましょう!

前提

  • index.htmlとmain.jsは同階層にあるものとします。

1.テキストのバインディング

テキストの簡単なバインディングについてのコードになります。

2.繰り返しの描画

「v-for」ディレクティブを使用したコードになります。

3.イベントの利用

「v-on」ディレクティブを使用したコードになります。

4.フォームの入力との同期

「v-model」ディレクティブを使用したコードになります。

5.条件分岐

「v-if」ディレクティブを使用したコードになります。

まとめ

今回はサンプルコードをもとにVue.jsを簡単に解説しました。

Vue.jsはデータ駆動なので、従来のJavaScriptとは考え方が異なります。

Vue.js自体はコード量が少なくなりますし、何より導入コストが少ないのでガンガン使っていくことをおススメします!

おすすめ本

僕がVue.jsの勉強をする際に購入した本になります。

この本があれば、Vue.jsの基礎は理解できるのでおすすめですよ!

Vue.jsの使い方を簡単に解説!メリットやサンプルコードも!
フォローしてもらえると泣いて喜びます