Vue.js 入門(解説付き Example 集)

2019/03/22

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

2015年に Laravel のフロントエンドエンジンとして採用され知名度が上がりました。

Laravel をインストールすれば WebAPI を Laravel で作り、SPA ( Single Page Application ) 開発を Vue.js で行うことが可能となります。

また、Vue.js の人気は JavaScript フレームワークの中でもトップクラスに高く、開発現場に採用している企業も増えています。

そんなわけで、前回 Vue.js の用語と文の構成について解説しました。

しかし、実際に覚えるには写経をして動かしてみないと理解できません。

今回は Vue.js の Example 集です。

 

ひな形

ここからサンプルのソースコードを写経して学んでいくわけですが、以下のひな形を利用してコードを書いていきます。

 
HTML


<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.js デモ</title>
</head>
<body>
  <div id="app">
    <!-- この#appの内側にテンプレートを書き込んでいく -->
  </div>

<!-- Vue.js を読み込む -->
<script src="https://unpkg.com/vue"></script>
<!-- Vueアプリケーション -->
<script src="main.js"></script>
</body>
</html>

実際には main.js に Vue.js を書いていきます。

 
JavaScript ( main.js )


new Vue({
  el: '#app'
  // オプションを記述していく
})

 

ディレクティブ

Vue では、タグに v-* の属性を指定することができます。

これを ディレクティブ と呼びます。

 

1)テキストをレンダリングする (v-text)

v-text は包含するテキストのデータ名を指定します。

 

2)HTMLの属性を指定( v-bind )

v-bind はHTML タグの属性値に変数名を割り当てます。

 

3)HTMLをレンダリングする( v-html )

通常のテキストだと< > & が &lt; &gt; &amp; に置換されて出力されます。

しかし、v-html を用いた場合はHTMLタグをレンダリングして出力します。

 

4)イベント処理 ( v-on )

v-on はイベントを処理します。

@v-on: の省略形です。

イベントハンドラとイベントリスナ

イベント処理には、イベントハンドラとイベントリスナの2種類があります。
イベントハンドラ:イベントに対して処理を定義したメソッド。
イベントリスナ:イベントに対して処理を結びつける仕組み。


<button v-on:click="イベントハンドラ">クリック</button>

 

5)入力フォームにモデルを割り当てる ( v-model )

v-model は、input、select、textarea に対して、Vue オブジェクトのデータとフォーム部品の値を関係づけます。

入力や選択をすると即座にデータ、そしてDOMに反映されます。

 

6)条件分岐 ( v-if )

v-if は要素自体の有無を制御します。

function(e){ } とは

イベントハンドラ、イベントリスナとして設定したコールバック関数が受け取ることができる イベントオブジェクト です。
ただ、JavaScriptの関数は引数を指定しなくてもOKなのでイベントオブジェクトを書略してもエラーにはなりません。


// 関数の引数は自由に命名できます。
// $("#sample").click(function(event){ でも問題ありません。
$("#sample").click(function(e){
  console.log(e);
});

コンソールを見るとjQuery.event というのが返ってきてます。これを開くとオブジェクトを可視化して確認できます。

 

7)ループ ( v-for )

data オプションに登録された配列やオブジェクトから要素を繰り返し描画できます。

 

実用例

実用的な Vue の使用例です。

Vue.jsの 「ウォッチャ」 という機能を使った Example です。

1文字に満たなければ「必須項目です」

5文字より長ければ「長すぎます」のエラーメッセージを表示します。

ウォッチャ ( watch: )

特定のデータまたは算出プロパティの状態を監視して、変化があったとき登録した処理を自動的に実行します。
つまり、データの変化をトリガにしたフックです。


new Vue({
  :
  watch: {
    監視するデータ: function(新しい値, 古い値){
      // value が変化したときに行いたい処理
    },
    'item.value': function(newVal, oldVal) {
      // オブジェクトのプロパティも監視できる
    }
  }
})

 
以上です。

本庄マサノリ

仕事でLaravelを使っています。気づいたことや新しい発見など情報を発信していきます。メールはこちら

 

-周辺知識