ゼロからVue.jsを触ってみる 第4回

ゼロからVue.jsを触ってみる　第4回:

今回からは単一ファイルコンポーネントを使うことを前提にしてVue.jsの基本的な機能をみていきます。

• 第1回目 - Vue CLIの導入、プロジェクトの作成、起動
• 第2回目 - Hello World、単一ファイルコンポーネントを作ってみる
• 第3回目 - 単一ファイルコンポーネントとは
• 第4回目 - Vue.jsの基本的な機能

テンプレート構文

Vue.jsのテンプレートは基本的なHTMLに二つの独自の機能を追加したものです。

ここではその二つの独自の機能、interpolationとdirectivesについてみていきます。

Interpolation

公式のドキュメントの日本語訳では展開と呼ばれているようです。

この機能を使うことでコンポーネントに持たせたデータをテンプレートの中でテキストとして展開できます。

やり方：

• コンポーネントにデータを追加する
• テンプレートでデータのプロパティを{{}}で括る

例.vue

<template> 
  <span>Hello {{ name }}!</span> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      name: 'HOGE-MAN' 
    } 
  } 
} 
</script> 

これを実行すると、{{ name }}がテキスト展開されてHello HOGE-MAN!という結果になります。

また、この{{}}の中ではJSのExpressionを使うことができ、グローバルなオブジェクトにもアクセスできます。

なので例えば三項演算子やMath.random()とかも{{}}の中で使えます。

注意点：

• 
  Interpolationは各要素のElement Content（タグとタグに挟まれた中身、JSでいうところのtextContent）でしか利用できません！
• つまり属性に対しては{{}}を使うことはできません！

Directives

次はDirectivesについてみていきます。

この機能はVue.jsテンプレート用に特別に追加されたHTML要素の属性です。

基本的にはv-からはじまる属性名で表現されます。

Interpolationでは属性にデータを渡せませんでしたが、このDirectivesを使うことで属性にデータを渡すことができます。

また、ただHTMLの属性にデータを渡すのはたくさんあるDirectivesのうちの一つにすぎず、もっといろいろなことができます。

数あるDirectivesについては公式のドキュメントで見るのが良いと思いますが、ここでもいくつか紹介します。

v-bind

HTML要素の属性にdataをバインドできます。

v-bind:属性名="バインドしたいdata"

またショートハンドがあり、v-bindを省略して次のように書けます。

:属性名="バインドしたいdata"

例

<a v-bind:href="url">urlへのリンク</a> 
or 
<a :href="url">urlへのリンク</a> 

v-model

双方向バインディングができます。

ユーザーがフィールド上のcontentを変更したものがVueデータの

プロパティにも反映されるようになります。

例

<input v-model="message" placeholder="メッセージを入れてください"> 
<p>{{ message }}</p> 

この例の場合、ユーザーがinputに何か入力するとdataのmessageプロパティの値も更新されるので、p要素に入力した文字が表示されます。

Expressions

Interpolationと同じように、Directivesの値にはJSのexpressionが使えます。

v-for

前回Todoリストを表示するのに使いましたが、リストをループすることができます。

書き方はJSのfor...inに似ていて、variable in object(list)の形をとります。

v-for="item in items"

また、次のようにすることでiterationのindex（繰り返しが何回目かのindex）も取得できます。

v-for="(item, index) in items"

例（非推奨）

<template> 
  <ul> 
    <li v-for="item in items">{{ item }}</li> 
  </ul> 
</template> 
<script> 
export default { 
  data() { 
    return { 
      items: ["リンゴ", "みかん", "レモン"] 
    }; 
  } 
}; 
</script> 

とりあえずv-forの書き方としては以上なのですが、実は上の例はVueのスタイルガイドに反しています。

Vueのスタイルガイドではv-forに対して常にkeyを使うように推奨されています。

key属性を使うとループするアイテムに対して一意なkeyを割り振ることができ、各アイテムをVueが識別して追跡できるようになります。

上の例をkey属性をつかって書き直すと次のようになります。

例

<template> 
  <ul> 
    <li v-bind:key="item.id" v-for="item in items">{{ item.name }}</li> 
  </ul> 
</template> 
 
<script> 
export default { 
  data() { 
    return { 
      items: [ 
        { 
          id: 1, 
          name: 'リンゴ' 
        }, 
        { 
          id: 2, 
          name: 'みかん' 
        }, 
        { 
          id: 3, 
          name: 'レモン' 
        } 
      ] 
    }; 
  } 
}; 
</script> 

注意点：

• 
  keyに対してindex指定すればいいんじゃね？と思うかもしれませんが一意なkeyとしてはあまりふさわしくありません。詳しくは説明しませんが、リストの順番や大きさがかわったときにindexが変わるのでオブジェクトに対して一意ではなくなってしまいます。

今回はいったんここまでです。次回もdirectives紹介の続きの予定です。（思ったよりも複数回にわかれそう・・・）

参考

• 公式ドキュメント
• 公式ドキュメント#キー付きv-for