ディレクティブ

データや関数の扱い方（本題の前に…）

まだ解説はしていないのですが、今後 関数 や 算出プロパティ と呼ばれるものが出てきます。
Vue.jsでは関数を書く場所や指定の仕方にルールがあるので、全体の形だけ最初に確認しておきます。
※この時点で頑張って理解する必要はありません。全体の構成と使用方法のイメージだけなんとなく雰囲気がつかめたらいいなと思います！

data：この中にデータ（変数のようなもの）を管理します。
methods：この中に関数を管理します。
computed：この中に算出プロパティを管理します（後ほど出てきます）

これらは、カンマ区切りで並べて書きます。

var app = new Vue({
    el: "#app",
    data: {
        //データを準備
        message: 'Hello Vue.js',
        items: ['item1', 'item2', 'item3']
    },
    methods: {
        //関数
    },
    computed: {
        //算出プロパティ
    }
});

例えば具体的に、「scoreを倍にして返す関数を利用して、HTMLに結果を表示する処理」は次のように書きます。

関数から、dataに用意した score にアクセスするには this を使用します。
HTMLでは {{ }} を使って関数を実行させています。
dataにある message と items はこの処理には使っていません。

それでは、本題のディレクティブに参りましょう。

「v-」から始まるディレクティブについて

前回、データをリアルタイムに変更するために v-model というのを使いました。
「v-」から始まるこの v-modelは 「ディレクティブ」 というVue.jsの特殊な機能です。

ディレクティブ(Directive)は「指令」という意味があります。
いくつか種類がある中でも、vue.jsで特に重要なディレクティブの使い方について見ていきましょう！

v-for

v-for はJavaScriptのfor文と仕組みも使い方もほぼ同じです。
では v-for を使って、配列の中身を一覧表示してみましょう。

まず、main.js の方にdataとして配列を準備します。

var app = new Vue({
    el: "#app",
    data: {
        items: ['item1', 'item2', 'item3']
    }
});

index.html では、 li に v-forを追加します。

<div id="app">
    <li v-for="item in items"> {{ item }}</li>
</div>

配列 items の中身から一件ずつ item に入る ➡ {{ item }} とすることで中身を出力することができます。

配列＋オブジェクトのリスト表示

先ほどのは簡単な例でしたが、実際には例えばデータベースから取得したオブジェクトのような複雑なデータ形式を扱うことが多いです。
なので、オブジェクトの一覧表示の方法についても見ておきましょう。

var app = new Vue({
    el: "#app",
    data: {
        users: [
            {id: 1, name: 'taro', age: 21},
            {id: 2, name: 'jiro', age: 22},
            {id: 3, name: 'saburo', age: 23},
        ]
    }
});
  <div id="app">
    <ul v-for="user in users">
      <li>{{ user.name }} ({{user.age}}歳)</li>
    </ul>
  </div>

dataに users というオブジェクトを用意します。
あとは取り出した1件分の user にドットをつけて、データにアクセスします。

v-on

v-onを使うと、JavaScriptで用意したイベントを使うことができます。
「ボタンをクリックされた」や「カーソルが乗った」など 「何かが起きたら何かをする」 というJavaScriptの addListener のイメージです。
せっかくなので、上で使ったソースコードを元に
次のような 「追加ボタンを押すと任意の文字列を追加することができる機能」を作ってみます。

image

v-for のすぐ下に追加する形で formタグを記述してください。

<div id="app">
    <li v-for="item in items"> {{ item }}</li>
    <form>
        <input type="text">
        <input type="submit" value="追加">
    </form>
</div>

とりあえずは、入力欄と追加ボタンを作成しました。

＜実装の方針＞

  1. JavaScript側に「 newItem 」という変数を用意します。入力されたテキストを保持するためです。
    　➡︎ v-model を使って、input text とJavaScriptに用意した newItem を紐付ける
  2. JavaScript側に、配列に要素を追加していくための関数を用意する（「addItem」というキーでアクセスできるようにする）
    　➡︎ 配列 items に、入力されたテキスト（ newItem ）をpushする
  3. formタグに「submit」された時のイベントを v-on を使って紐づける
    　➡︎ <form v-on:submit="関数名"> という形で使用したい関数名を書く

（追加の処理に今回は 「submit」 を使用していますが、後で prevent の解説をしたいためです。）
　
＜ソースコード＞

1. JavaScript側に「 newItem 」という変数を用意して、そこに入力されたテキストを格納する

var app = new Vue({
    el: "#app",
    data: {
        //newItemを空の状態で用意する。
        newItem: '',
        items: ['item1', 'item2', 'item3']
    }
});

2. JavaScript側に、配列に要素を追加していく関数を用意する（関数名は「addItem」）
　
データを準備する時は data:{} の中に書いてきましたが、関数を準備する時は methods:{} の中に書いてください。
data{} の最後にカンマを入れて、methods{} を追加します。あとはその中に関数を作成してください。

data: {
    newItem: '',
    items: ['item1', 'item2', 'item3']
},
methods: {
    addItem: function() {
        //data内のデータにはthisでアクセスできます
        this.items.push(this.newItem);
    }
}

3. formタグに「submit」された時のイベントを v-on を使って紐づける

<form v-on:submit="addItem">
    <input type="text" v-model="newItem">
    <input type="submit" value="追加">
</form>

ここまでで、ほぼ完成なので一旦整理します。
①input欄に入力されたテキストは、JavaScriptに空で用意しておいた newItem で受け取る。
そのinputタグには、JavaScriptと紐づけるためにinputタグに v-model を追加

②submitされたときの処理をJavaScriptに追加。関数は、methods というキーの中に書く。

③作成した関数と紐づけるために、formタグに v-on を追加

動作確認（prevent）

実際に動かしてみるとわかりますが、追加ボタンを押してもまだ追加されません。
どうしてでしょうか…？
実は、 submitされたことで画面の更新が起きた ことが原因です。
　
submitタグに prevent を追加するとリロードを防ぐことができます。

<div id="app">
    <li v-for="item in items"> {{ item }}</li>
    <form v-on:submit.prevent="addItem">
        <input type="text" v-model="newItem">
        <input type="submit" value="追加">
    </form>
</div>

これで、追加ボタンの完成です。
本当は、submitを使用しない、つまりpreventを使わなくても追加ボタンを作る方法はあります。
「ページをリロードさせたくない」という時に使える機能の紹介でした。

v-if

ぱっと見てわかるようにv-if を使うと条件分岐を行うことができます。

条件によって表示と非表示を切り替えたいときによく使います。
ではそれを作ってみましょう。

新しくHTMLを用意して、pタグに v-if をつけてください。

<body>
    <div id="app">
        <p v-if="show">TRUE</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/main.js"></script>
</body>

show という変数にtrueを持たせたので、v-if="show" とすると当然条件はTRUEになりますよね。
なので、show の値をfalseにして更新すると、HTMLの画面から「TRUE」の文字は消えることがわかります。

var app = new Vue({
    el: "#app",
    data: {
        show: true
    }
});

検証ツールからも確認できます。

trueの時は表示されている。

 

falseの時はコメントアウトされている。

v-if、v-else-if

Vue.jsで、else if を使いたい場合についてです。

いつもの使い方とは、以下のように形が少し異なります。

<要素 v-if="条件式">コメント</要素>
<要素 v-else-if="条件式">コメント</要素>
<要素 v-else>コメント</要素>

具体例でみていきます。
データにscoreを用意してください。

var app = new Vue({
    el: "#app",
    data: {
        score: 0
    }
});
  <div id="app">
    <p v-if="score >= 70">合格です</p>
    <p v-else>不合格です</p>
  </div>

v-if と v-else を1行づつ書かなければいけないですが、こうすることで条件分岐が行えます。

v-show

v-show は v-if と同じように表示・非表示を切り替えることができるディレクティブです。
v-if との違いは「そうじゃなかったら○○」のように else-if が使えないのが大きな点です。

v-ifとv-showの細かな違い

v-if：実際にタグを追加、削除することで表示・非表示が起きている
v-show：style属性のdisplayプロパティの値を表示なら「block」非表示なら「none」として切り替えています。

v-show は非表示の場合 「ただ見えなくなっているだけで要素は存在しています」
一方 v-if は非表示の場合、タグ自体が本当に作成されていません。

v-ifとv-showの使い分け

v-show：頻繁に表示・非表示を行う場合（要素の作成や削除に比べて、v-showは負荷が少ないため）
v-if：細かく条件を指定したかったり、表示・非表示の頻度が低い場合

まとめ

今回は、以下の5点について見てきました。

・v-for （リスト、オブジェクトの一覧表示）
・v-on （追加ボタン作成）
・prevent （リロードの解除）
・v-if （表示・非表示の切り替え）
・v-show （表示・非表示の切り替え）

カテゴリー

アーカイブ

Close Bitnami banner
Bitnami