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

Vue.js勉強したメモ。

まずはVue.jsのサイトにあるガイドの「はじめに」をコピペでテスト。そこからちょっとずつ変更を加えていって学んだこと。バージョンはVue.js v2.3.3です。

学んだこと：

例の{{ }}はMustache（ムスターシュ）記法と呼ぶ。
MustacheはHTMLアトリビュート（属性）には使えない。
ループ内からメソッド呼び出しは、わかってしまえば簡単。
クラスの動的変更の便利な方法。

参考ページ：

Vue.jsオフィシャルページ：はじめに
Qiitaの記事：Vue.jsから手軽に始めるJavaScriptフレームワーク

コード（HTMLとJavaScript）

<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>

    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`を使う

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

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

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

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

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

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

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

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

クラスの動的変更

<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フレームワークのコードをもとに作成してみた。

全ページ

<!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>

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