Vue.jsメモ：属性、ループ内呼び出し、など

Vue.js勉強したメモ。

まずはVue.jsのサイトにあるガイドの「[はじめに](https://jp.vuejs.org/v2/guide/index.html)」をコピペでテスト。そこからちょっとずつ変更を加えていって学んだこと。バージョンは**Vue.js v2.3.3**です。

### 学んだこと：

* 例の`{{ }}`は[Mustache（ムスターシュ）記法と呼ぶ](https://jp.vuejs.org/v2/guide/syntax.html#テキスト)。
* Mustacheは[HTMLアトリビュート（属性）には使えない](https://jp.vuejs.org/v2/guide/syntax.html#属性)。
* ループ内からメソッド呼び出しは、わかってしまえば簡単。
* クラスの動的変更の便利な方法。

### 参考ページ：

* Vue.jsオフィシャルページ：[はじめに](https://jp.vuejs.org/v2/guide/index.html)
* Qiitaの記事：[Vue.jsから手軽に始めるJavaScriptフレームワーク](http://qiita.com/icoxfog417/items/49f7301be502bc2ad897)


コード（HTMLとJavaScript）
----

```html
<div id="project-list">
    active project: {{ active }}
    <ul>
        <li v-for="project in projects" v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
            <a v-bind:href="'#' + project.id">{{ project.id }}. {{ project.name }}</a>&nbsp;
            <button v-on:click="loadProject(project)"> → </button>
        </li>
    </ul>
</div>
```

```js
    let vm = new Vue({
        el: '#project-list',
        data: {
            active_id: null,
            projects: [
                { id: '1', name: 'private'},
                { id: '2', name: 'work'}
            ]
        },
        methods: {
            loadProject: function(project) {
                project.name = project.name + '!';
                this.active_id = project.id;
            }
        }
    });
```

### 属性を扱う場合は`v-bind`を使う

```html
<a v-bind:href="'#' + project.id">
```

いわゆるHTMLの属性にムスターシュを書いても動かない。
属性を動的に変えたい場合は`v-bind`を使う。

例えばhref属性のリンクURLに`project.id`を使う場合は、`v-bind`の後に、属性名（`href`）を入れて指定する。コメントの中はJavaScriptなので、普通の文字列を使う場合はクオートする（例：`'#'`）。

### ループ変数をメソッド呼び出しに使うには

```html
<li v-for="project in projects">
    <button v-on:click="loadProject(project)">
    ...
```

```js
        methods: {
            loadProject: function(project) {
                project.name = project.name + '!';
                this.active_id = project.id;
            }
        }
```

Vueモデルに定義した`loadProject`メソッドを呼び出す際に、ループの変数を渡す方法。わかってしまえば当たり前で、メソッドの引数に入れれば動く。

内容は、プロジェクト名に「！」を追加する。そして選択されたことを示すために、`this.active_id = project.id`としておく。


### クラスの動的変更

```html
<li v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
```

選択されたプロジェクトの表示を変更したい場合。クラスを動的に変更することで対応する。全てのプロジェクトには`project-list`というクラスが付与されている。

`loadProject`を呼び出してプロジェクトを選択すると、Vueモデルの`active`プロパティに`project.id`を設定する。ので、`active`と`project.id`を比較して、同じ場合は`project-active`クラスを付与すると簡単に対応できた。

[Vue.jsから手軽に始めるJavaScriptフレームワーク](http://qiita.com/icoxfog417/items/49f7301be502bc2ad897)のコードをもとに作成してみた。



全ページ
----------



```html
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <style type="text/css">
        ul {
            margin: .3em 0 0 0;
            padding: 0;
            list-style: none;
        }
        .project-list:before {
            margin: 0;
            content: '＞';
            color: gray;
        }
        .project-active {
            font-weight:bold;
        }
        .project-active:before {
            content: '＞';
            color: red;
        }
    </style>
</head>
<body>
<h1>Tasks</h1>

<div id="project-list">
    active project: {{ active }}
    <ul>
        <li v-for="project in projects" v-bind:class="['project-list', active_id == project.id ? 'project-active' : '']">
            <a v-bind:href="'#' + project.id">{{ project.id }}. {{ project.name }}</a>&nbsp;
            <button v-on:click="loadProject(project)"> → </button>
        </li>
    </ul>
</div>


<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://unpkg.com/vue" crossorigin="anonymous"></script>
<script type="text/javascript">

    let vm = new Vue({
        el: '#project-list',
        data: {
            active_id: null,
            projects: [
                { id: '1', name: 'private'},
                { id: '2', name: 'work'}
            ]
        },
        methods: {
            loadProject: function(project) {
                project.name = project.name + '!';
                this.active_id = project.id;
            }
        }
    });
</script>
</body>
</html>
```