Vue.jsの基礎機能

はじめに

ここではvue.jsを使う上で使用する基礎機能、文法について書いていきます。

vue.jsはjsフレームワークの中では入門のしやすい部類だと考えていますので、難しくはありません。

またvue.jsの公式が日本語に対応しているので、軽い気持ちで入門してみて下さい。
vue.js公式

今回の内容

vueインスタンスのマウント
テキストデータのバインディング
繰り返しの描画(v-for)
イベント(v-on)
条件分岐(v-if)
v-if,v-forを併用したい時の注意点
まとめ

※今回は機能の説明と言うことでhtmlファイルにvueを読み込んでいる事が前提で書いています。また、書き慣れてくるとhtmlに直書きをすることはほとんど有りませんが説明のしやすさから直書きでいきます。

vueインスタンスのマウント

vue.jsの処理はvueインスタンスを生成しDOMにマウントする事から始まります。

私自身の言葉でマウントを説明するなら、既存のDOMではなくvue.jsで作るDOMをブラウザに表するイメージ。

この対象になるDOM要素を指定するのが、elになります。

index.html

<div id="app"> 
  このdivタグを指定しています。 
</div> 
<script> 
var vm = new Vue({ 
  el:'#app',//ここで指定しています。 
 
  //以降はこの先で。 
}) 
</script>

これでマウントができます。

この段階ではイメージが沸かないかもしれませんが、これから色々な機能を実装していく中でどこに実装すればいいのかを記述している感覚で良いと思います。

テキストデータのバインディング

dataの中に格納してあるテキストデータを呼び出すことができます。

index.html

<div id="app"> 
  <p>{{text}}</p> 
  <p>{{nextText}}</p> 
</div> 
 
<script> 
  var app = new Vue({ 
    el:'#app', 
    data:{ 
      text:'表示したいテキストをここにいれます。', 
      nextText:'２つ目の表示したいテキストをここにいれます。' 
    } 
</script>

これにより、一つ目のpタグにはdataで定義してあるtextの中身
表示したいテキストをいれます。

という文字列が入ります。

二つ目のpタグも同様に参照してるnextTextの中身が入ります。

また、今回のようにdataの中にテキストだけを書くのではなく配列やオブジェクトの状態にして保持させておくこともできます。

index.html

<div id="app"> 
  <p>{{greeting1[0]}}</p>こんにちは 
  <p>{{greeting2.America}}</p>Hello 
</div> 
<script> 
var vm = new Vue({ 
  el:'#app', 
    data:{ 
    greeting1:['こんにちは','Hello','Buongiorno'], 
    greeting2:{Japan:'こんにちは', 
               America:'Hello', 
               Italy:'Buongiorno'} 
  } 
}); 
</script>

また、dataではテキストの管理だけではなく、真偽値などを管理することも可能です。

今回は一番汎用性の高いテキストのバインディングを例に挙げました。

繰り返しの描画(v-for)

上のテキストデータのバインディングで使用した配列やオブジェクトを全部表示したいと考えた時

index.html

<p>{{greeting1[0]}}</p> 
<p>{{greeting1[1]}}</p> 
<p>{{greeting1[2]}}</p>

このような書き方をしていると非効率的です。

このような場面で有用なのが繰り返しの描画(v-for)です。

v-forはJavaScriptのfor...ofに似ています。

構文としては

構文

<div v-for="繰り返される要素を代入する変数名 in 繰り返したい配列またはオブジェクト" 
     v-bind:key="配列ならindex番号、オブジェクトならkeyなどを入れたりします。">

で使用できます。

また繰り返される要素を代入する変数で二つ目の変数を指定することができます。配列ならばindex番号、オブジェクトならkeyを引数として渡すことができます。

また、いきなりv-bind:keyというモノが出てきていますが、今のレベルで説明すると理解が遠のくと考えるので今回は各要素に名前を付ける程度の理解で良いので、必ず設定してください。

index.html

<div id="app"> 
  <p v-for="item in greeting1" 
     v-bind:key="item.id">{{item}}</p> 
 
  <p v-for="(item2,keyName) in greeting2" 
     v-bind:key="keyName">{{item2}}</p> 
</div> 
<script> 
var vm = new Vue({ 
  el:'#app', 
  data:{ 
    greeting1:['こんにちは','Hello','Buongiorno'], 
    greeting2:{Japan:'こんにちは', 
               America:'Hello', 
               Italy:'Buongiorno'} 
  } 
}); 
</script>

実際に描画された状態

<div id="app"> 
  <p>こんにちは</p> 
  <p>Hello</p> 
  <p>Buongiorno</p> 
 
  <p>こんにちは</p> 
  <p>Hello</p> 
  <p>Buongiorno</p> 
</div>

このように配列やオブジェクトを繰り返すことができます。

また配列の中身を後から追加、削除もでき増減に応じて描画内容も変化します。

動的に変化を与えることのできるvue.jsの強みの一つだと思います。

app.greeting1.push('こんばんは');

これを見てdata.push()をすればdata自体を増やせると考える方がいるかもしれませんがインスタンスの生成後dataを増やすことはできません。

初期設定されたものへの追加、削除は可能ですが、未設定のものを追加する行為はエラーになります。

ですので、dataに書き込んでいるタイミングで空の配列を置いておくなど工夫次第では新しく配列を作っているかのように見せつけることも可能です。

app.data.push() //これはダメ。 
 
data:{ 
  hoge:[] 
} 
app.hoge.push() //これは大丈夫。

イベント(v-on)

v-onにも様々な種類がありますが今回はクリックに絞っています。

v-onはJavaScriptのaddEventListenerと似ています。

index.html

<div id="app"> 
  <button v-on:click="nowClick">イベント発火ボタン!!</button> 
</div> 
 
<script> 
var vm = new Vue({ 
  el:'#app', 
  data:{}, 
  methods:{ 
    nowClick:function(e){ 
      alert('イベントが発火されました'); 
    } 
  } 
}); 
</script>

今まで使用していたdataと同じように、methodsのなかに格納してあげる事で呼び出すことができます。

今回の場合だとnowClickを読んでいるのでボタンを押すとalertが表示されます。

条件分岐(v-if)

条件によって表示非表示の設定ができます。

似たようなものでv-showがあります。

この二つの違いとしては、

if = DOMレベルで描画しない。
show = 描画してdisplay : hidden

index.html

<div id="app"> 
  <p v-if="doShow">doShowがtrueを返している時のみ描画</p> 
</div> 
 
<script> 
var vm = new Vue({ 
  el:'#app', 
  data:{ 
    doShow:true 
  } 
}); 
</script>

今回の場合だとdoShowはtrueなので描画します。

また今回はdataで指定していますがmethodに関数を描いてあげることで真偽値を出すことも可能です。

v-ifとv-forを併用する時の注意点

ここまでの基礎機能を覚え組み合わせて使ってみたいと考えた時、v-forの繰り返しをv-ifでコントロールしてみようと考える人がいると思います。

ただその時の注意なのですが、同じタグの中にv-ifとv-forを混在させる事はできません。

それはv-ifよりv-forを優先するようにvue.jsが作られているからです。

対象法は、

index.html

<div v-if="条件"> 
 <p v-for="繰り返し条件">{{表示するもの}}<p> 
</div>

入れ子構造にすれば解決します。
詳しくは公式をみてみて下さい

まとめ

今回は本当に初歩の初歩ですが、この部分が理解できなければ先へは進めません。

私自身初めて業務で触るとなった時、若干時間を取られrouterなどのvue.jsの本当に面白い部分になかなかたどり着けませんでした。ですので、最初は見ながらでもいいので記法を覚えvue.jsの世界へ入ってきて来てもらえると幸いです。

また、2018に入りvue.jsの本が出版されているので学習の場が整っているのでお互いに勉強していきましょう。

このブログを検索

IT音痴アラフィフおやじのストック記事倉庫