Vue.js v1.0

http://dotinstall.com/lessons/basic_vuejs

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>My Vue.js Practice</title>
</head>
<body>
<script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
</body>
</html>

object(ViewModel) - data/methods(Model) <--> interface(View)
Model View ViewModel - MVVM

ディレクトティブ v-text

    <div id="mycounter">
        <div v-text="count"></div>
        <div v-text="count * 10"></div>           // 計算
        <div v-text="'(' + count + ')'"></div>    // フォーマット
        <div v-text="count ? count : '-'"></div>  // 三項演算子
        <button v-on="click: count++">Up</button> // 式が使える
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
    <script>
        // counter
        var vm = new Vue({
            el: '#mycounter',
            data: {
                count: 0
            }
        });

    </script>

mustache マスタッシュ記法

{{ content }} v-text
{{{ content }}} v-html

    <div id="myapp">
        <!-- <div v-text="content"></div> -->
        <!-- <div>{{'content: ' + content}}</div> -->
        <!-- <div v-html="content"></div> -->
        <div>{{{content}}}</div>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: '#myapp',
            data: {
                // content: 'hello world'
                content: '<h1>Title</h1>'
            }
        });
    </script>
</body>

v-show v-if

v-show 非表示にするだけ
v-if 要素がなくなる

    <div id="myapp">
<!--         <div v-show="showContent">
            {{content}}
        </div>
 -->        
        <div v-if="showContent">
            {{content}}
        </div>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
    <script>
        // v-show
        // v-if
        var vm = new Vue({
            el: '#myapp',
            data: {
                content: 'hello world',
                showContent: false
            }
        });
    </script>

Class

TODO: 2.0 での記法

<div :class="{red: isRed, bold: isBold}">
    {{content}}
</div>

v-for

1. 配列を繰り返したい場合は次のように書きます。
    <ul>
        <li v-for="d in d1">{{ d }}</li>
    </ul>

2. オブジェクト(ハッシュ)に対しては丸括弧を使って次のように書きます。
    <ul>
        <li v-for="(k, d) in d2">{{ k }} - {{ d }}</li>
    </ul>

3. オブジェクトの配列に対しては次のように書きます。
    <ul>
        <li v-for="d in d3">{{ d.name }} - {{ d.score }}</li>
    </ul>

v-model フォームと連動させる

    <div id="myapp">
        <p>
            <input type="text" v-model="name">
            {{name}}
        </p>
        <p>
            <input type="checkbox" v-model="isAdmin">
            {{isAdmin ? "admin" : "not admin"}}
        </p>
        <p>
            <input type="radio" name="phone" v-model="phone" value="iphone">
            <input type="radio" name="phone" v-model="phone" value="android">
            {{phone}}
        </p>
        <p>
            <select v-model="city">
                <option value="tokyo">tokyo</option>
                <option value="kyoto">kyoto</option>
                <option value="osaka">osaka</option>
            </select>
            {{city}}
        </p>
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
    <script>
        // v-model
        var vm = new Vue({
            el: '#myapp',
            data: {
                name: 'taguchi', 
                isAdmin: true,
                phone: 'iphone',
                city: 'tokyo'
            }
        });
    </script>

フィルター（値を処理 |）

- uppercase      HELLO
- capitalize      Hello
- carrency       通過記号
- json {{ $data | json }}

filterBy（抽出条件を設定）

    <input type="text" v-model="keywordFil">
    <ul>
        <li v-for="user in users | filterBy 't' in 'name'">
            {{user.name}} - {{user.score}}
        </li>
    </ul>

    <ul>
        <li v-for="user in users | filterBy keywordFil">
            {{user.name}} - {{user.score}}
        </li>
    </ul>

    <script>
        var vm = new Vue({
            el: '#myapp',
            data: {
                keywordFil: '',
                users: [
                    {name: 'taguchi', score: 81},
                    {name: 'fkoji', score: 92},
                    {name: 'dotinstall', score: 64}
                ]
            }
        });
    </script>

orderBy

「orderBy 'score' order」のように2番目のオプションをデータで管理し、降順にソートしたい場合は、データで管理しない場合と同様に -1 を指定します。

    <li v-for="user in users | filterBy keyword | orderBy orderKey order">
        {{user.name}} - {{user.score}}
    </li>

    data: {
        keyword: '',
        orderKey: 'score',
        order: -1
    }

v-on:keyup.enter

1. Enter キーを押した時に動作させたい場合
<input type="text" v-on:keyup.enter="showLength" v-model="msg">

これは v-on の省略記法を用いて次のようにも書けます。
<input type="text" @keyup.enter="showLength" v-model="msg">

※ なお、「left」や「right」は使用できますが「tab」は使用できません。

2. キーコードを指定する場合も同様にドットの後に記述します。
<input type="text" @keyup.65="showLength" v-model="msg">

Computed Property（コンピューテッドプロパティ）

    <div id="myapp">
        side: <input type="text" v-model="side">
        <!-- area: {{area}} -->
        area: <input type="text" v-model="area">
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/0.11.4/vue.min.js"></script>
    <script>
        // computed property
        var vm = new Vue({
            el: '#myapp',
            data: {
                side: 20
            },
            computed: {
                // area: function() {
                //     return this.side * this.side;
                // }
                // エリアに対して setter, getter
                area: {
                    get: function() {
                        return this.side * this.side;
                    },
                    set: function(v) {
                        this.side = Math.sqrt(v);
                    }
                }
            }
        });
    </script>