Vue.js (2) 「はじめに」にあるいろんな機能をフォローする

今回はVue公式ドキュメントの「はじめに」の章をフォローしてみる。

jp.vuejs.org

見えるか見えないかを制御する（v-if）

v-ifディレクティブにtrue/falseで指定することで、要素が見えるか見えないかを指定できる。

<span v-if="message_is_seen">
   message
</span>

リストの要素をforループで全部表示する（v-for）

v-forディレクティブにmyiter in list_dataのような形式の文字列を指定することで、list_dataのアイテムを列挙できる。

<ol>
    <li v-for="myiter in list_data">
        {{ myiter }}
    </li>
</ol>

イベントによって関数を呼び出す（v-on）

Vueオブジェクトのmethodsメンバに関数オブジェクトを渡し、v-onディレクティブに関数オブジェクトmethodを指定することで、イベント駆動で関数を呼び出すことができる。

<button v-on:click="mymethod">
    push risa
</button>

const app = new Vue({
    el:'#app',
    data:{
        idols: [
            "momoka","arisu","miria"
        ],
    },
    methods:{
        mymethod: function() {
            this.idols.push("risa");
        }
    }
})

リストにアイテムを追加すると、リアルタイムでブラウザ表示に反映される*1。

*1:これがVue.jsの強みで、Vue.jsを使わないとgetElementsを呼び出さないと行けなかったり、更新処理が必要になったりするはず。