周辺知識

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

2018/11/21

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

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

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

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

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

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

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

 

環境開発

今回の開発環境は JSFiddle という Webサービスを使ってコーディングしていきます。

JSFiddle の公式サイトはこちら

JSFiddle ( 公式サイト )

 

ひな形

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

 
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'
  // オプションを記述していく
})

 

サンプルコード

Hello world !

Vue を用いて Hello world! を表示します。

#app の要素に対して Vue を適用します。

 
HTML


:
<!-- {{ message }} が Vue データに置換される -->
<div id="app">{{ message }}</div>
:

 
JavaScript ( main.js )


Vue({
  // #app 要素に対して Vue を適用する
  el: '#app',

  // message という名前のデータを定義する
  data: { message: 'Hello world!' }
})

ポイント

Vue が適用された要素内では、{{ message }} などの表記が、JavaScript 側で保持する変数の値に置換されます。

 
JSFiddle

 

ディレクティブ

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

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

1)テキストをレンダリングする( v-text )
2)HTMLの属性を指定( v-bind )
3)HTMLをレンダリングする( v-html )
4)イベント処理 ( v-on )
5)入力フォームにモデルを割り当てる ( v-model )
6)条件分岐 ( v-if )
7)ループ ( v-for )

 

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

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

 
HTML


:
<div id="app">
  <div v-text="message"></div><!-- この行と -->
  <div>{{ message }}</div><!-- この行は、同じ意味を持ちます -->
</div>
:

 
JavaScript ( main.js )


Vue({
// #app 要素に対して Vue を適用する
el: '#app',

// message という名前のデータを定義する
data: { message: 'Hello world!' }
})

 
JSFiddle

 

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

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

 
HTML


:
<div id="app">
  <input type="button" v-bind:value="message">
  <!-- 省略系は以下になります。 -->
  <input type="button" :value="message">
</div>
:

 
JavaScript ( main.js )


new Vue({
  el: '#app',
  data: { message: 'Hello!' }
})

 
JSFiddle

 

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

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

しかし、v-html を用いた場合はHTMLタグをそのまま出力します。

 
HTML


:
<div id="app">
  <div v-text="message"></div><!-- HTMLをレンダリングしない -->
  <div v-html="message"></div><!-- HTMLをレンダリングする -->
</div>
:

 
JavaScript ( main.js )


new Vue({
  el: '#app',
  data: { message: '<b>Hello!</b>' }
})

 
JSFiddle

 

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

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

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

 
HTML


:
<div id="app">
  <!-- hello はメソッドイベントハンドラと呼ぶ -->
  <!-- methods オプションに定義されているメソッド名を指定 -->
  <button v-on:click="hello">Hello</button>
  <button @click="hello">Hello</button>
</div>
:

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

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


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

 
JavaScript ( main.js )


new Vue({
  el: '#app',
  methods: {
    hello: function(){
      alert("Hello!");
    }
  }
})

 
JSFiddle

 

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

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

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

 
HTML


:
<div id="app">
  <input v-model="message">
  <div>Message: {{ message }}</div>
</div>
</div>
:

 
JavaScript ( main.js )


new Vue({
  el: '#app',
  data: { message: 'Hello' }
})

 
JSFiddle

 

6)条件分岐 ( v-if )

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

 
HTML


:
<div id="app">
  <input type="checkbox" @click="change" checked>
  <!-- 変数 seen が true の時は Hello! を描画する -->
  <!-- 変数 seen が false の時は描画しない -->
  <span v-if="seen">Hello!</span>
</div>
:

 
JavaScript ( main.js )


new Vue({
  el: '#app',
  data: { seen: true },
  methods: {
    change: function(e) {
      this.seen = e.target.checked
    }
  }
})

function(e){ } とは

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


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

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

 
JSFiddle

 

7)ループ ( v-for )

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

 
HTML


:
<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>
:

 
JavaScript ( main.js )


new Vue({
  el: '#app',
  data: {
    list: ['りんご' , 'ばなな' , 'いちご']
  }
})

 
JSFiddle

 

実用例

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

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

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

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

 
HTML


:
<style>
#app .error { color: red; }
</style>
<div id="app">
  <input type="text" v-model="message">
  <div class="error" v-if="error.require">必須項目です。</div>
  <div class="error" v-if="error.tooLong">長すぎます。</div>
</div>
:

 
JavaScript ( main.js )


new Vue({
el: '#app',
watch: {
  message: function(newVal, oldVal){
    this.error.require = (newVal.length < 1) ? true : false;
    this.error.tooLong = (newVal.length > 5 ) ? true : false;
  }
},
data: {
  message: 'Hello',
  error: {
    require: false,
    tooLong: false
  }
 }
})

ウォッチャ ( watch: )

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


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

 
JSFiddle

 
以上です。

本庄マサノリ

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

 

-周辺知識