飴屋

Vue.js/日記002

Viewの表現力

<div id="app">
{{ message }}
</div>

前回、二重括弧（{{}}）で囲んだ部分がテンプレート機能のようにVue.jsの制御下に置かれるというところを学びました。もっといろいろなこともできるそうなので、一つずつ眺めていきます。

属性（attribute）の制御

<div id="app">
<span v-bind:title="message">some text</span>
</div>

表示部（#app）の中の要素の属性をVue.jsの制御下におけるそうです。ここではspanタグのtitle属性の場合を表します。「v-bind:(属性名)="(データ名)"」という設定をタグの中で行うと、指定の属性に指定のデータ名のついたデータが紐づくようです。パッと思いつくところで、imgタグのsrc属性を変更するのに使えそうかなと思いました。

表示・非表示の切り替え

<div id="app">
<span v-if="visible">some text</span>
</div>

表示部内のタグに「v-if」属性をつけると、そこで指定された変数に応じてその要素の表示・非表示を切り替えてくれるそうです。どうやらVue.jsでは「v-」という接頭辞をつけた属性をガンガンViewに添加していく方針のようですね。（ディレクティブって呼ぶらしいです。）「if」はいろんなプログラミング言語で条件分岐を表す予約語になっていますが、Vue.jsでは「表示・非表示」の条件のみを示すということになるみたいです。

ループ

<div id="app">
<ol>
<li v-for="fruit in fruits">
{{ fruit.name }}
</li>
</ol>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
fruits: [
{ name: 'apple' },
{ name: 'banana' },
{ name: 'orange' }
]
}
})
</script>

v-forディレクティブは配列データを順番に処理するのに使うようです。「for」はプログラミング言語ではループ処理を記述するのに使いますが、ここでは配列データのための仕組みなのですね。「v-if」のときにもちょっと思ったのですが、微妙に元の意味とは異なるので、プログラマ的には混乱しそうな気もしますが、フロントエンドのエンジニア的にはifを表示制御に、forを配列探索に使うことが多いのであんまり気にならないのかもしれません。

Modelの部分に配列データ（fruits）がでてきて、Viewの部分では繰り返したい要素（li）に「v-for="fruit in fruits"」をつけて配列（fruits）の中身を一つずつfruitとして操作できるようにしています。app.fruitsには初期値として三つの値が用意されていますが、これを増減させるとちゃんとViewに反映されました。

app.fruits.push({name:'mango'})
app.fruits.shift()

日記一覧