【学習記録①】Vue.jsの基礎的な構文の備忘録

はじめに

Vue.jsを最近勉強し始めたので学んだ文法などを備忘録としてメモしていこうと思います。

Vue.jsとは

Vue.jsとはJavaScriptのフレームワークであり、国内ではよくReact.jsやAngular.jsと並んで比較されることが多いです。

テンプレート構文

Vueを勉強していると「テンプレート」というワードが出てきます。
Vue.jsではHtmlファイルに以下のように書いたりするのですが、これを「テンプレート」と言います。

index.html

//以下のようにVue.jsによって操作される部分をテンプレートという
<div id="app">
  <p>{{message}}</p>
</div>

index.js

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

ディレクティブ

Vue.jsではv-から始まる特別な属性値「ディレクティブ」というものが用意されています。

v-if

v-ifはJavaScriptのif文と似たようなものでv-if属性の値がtrueの時にそのテンプレートが表示されます。

index.html

<div id="app">
  <p v-if="isEnabled">{{message}}</p>
</div>

index.js

new Vue({
  el: "#app",
  data: {
    message: 'Hello World',
    isEnabled: true // <-- trueのときは上記Htmlファイルのpタグが表示され、falseのときは表示されません
  }
})

v-show

v-showは使い方は上記のv-ifと同じです。
しかしながら、出力結果のHtmlに以下のような違いがあります。

v-if
falseの時にはhtml自体に出力されない。

v-show
falseの時にはhtmlには出力されているものの、style属性にてdisplay:none;が設定されている。

v-bind

v-bindを用いると任意の属性値をVueのほうから指定することができます。バインディングなどと言われたりします。
v-bindは引数を指定する必要があり、v-bindの後にhrefなどの属性を指定します。

index.html

<div id="app">
  <a v-bind:href="url">Qiita</a>
</div>

index.js

new Vue({
  el: "#app",
  data: {
    url: "https://qiita.com/"
  }
})

v-bindは以下のように省略することも可能です。

index.html

<div id="app">
  <a :href="url">Qiita</a>
</div>

v-on

v-onはclick等のイベント発火時のJavaScriptを記述します。
メソッドを定義する際はVueインスタンスにあるmethodsプロパティを用います。

index.html

<div id="app">
  <p>{{ number }}</p>
  <button v-on:click="countUp">+1</button>
</div>

index.js

new Vue({
  el: "#app",
  data: {
    number: 0
  },
  methods: {
    countUp: function(){
        this.number++;
    }
  }
})

以下のように数字が増えていくのが分かります。

v-onは以下のように@マークの後にイベントを書くように省略することも可能です。

index.html

<div id="app">
  <p>{{ number }}</p>
  <button　@click="countUp">+1</button>
</div>

v-model

今まではVueインスタンス側から値を操作していましたが、v-modelを用いるとテンプレート側から値を操作することも可能です。

index.html

<div id="app">
  <input type="text" v-model="message">
  <p>{{ message }}</p>
</div>

index.js

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

inputタグに何かしら文字を打っていくとpタグの部分にも同じ文字が入っているのが分かります。

computedとmethodsの違い

computedプロパティはmethodsと使い方は似ていますが、computedプロパティにはキャッシュ機能があるのに対し、methodsにはキャッシュ機能がありません。
同じように{{}}で囲い、それぞれを定義した場合、methodsはVueテンプレートのどれかが更新されるたびに呼ばれますがcomputedは依存する部分に変更がされたときのみしか処理は走りません。

v-for

v-forを用いると配列の中身を出力することができます。

index.html

<div id="app">
  <p v-for="greeting in greetings">{{ greeting }}</p>
</div>

index.js

new Vue({
  el: "#app",
  data: {
    greetings: ['おはよう', 'こんにちは', 'おやすみ']
  }
})

おわりに

引き続き学習内容を備忘録として残していこうと思います。
Vue.js今のところ楽しい！！！