Vue.jsを使ってみる

2016.06.27

双方向データバインディングができるシンプルなフレームワーク「Vue.js」を使ってみます。

インストール

Vue.jsのサイトにアクセスしてインストールボタンをクリック。

try-using-the-vue-js01

インストール方法はいくつかありますが、今回はダウンロードして使用したいので、スタンドアロン > プロダクションバージョン をクリックしてダウンロードしました。

try-using-the-vue-js02

　

Hello Worldの表示

公式サイトのガイドに掲載されているサンプルを試してみます。
まずはHello Worldという文字列を表示してみます。

HTML

1
2
3
<div id="app">
    {{ message }}
</div>

JavaScript

1
2
3
4
5
6
new Vue({
    el: '#app',
    data: {
        message: 'Hello World!!'
    }
})

elでHTML要素を指定して、バインド対象範囲を決めます。
dataはバインドする値を指定します。
今回の場合、data内のmessageとHTML側の{{ message }}を紐づけています。
Hello Worldのデモページ
　

双方向バインディング

inputに入力する内容をリアルタイムで表示させてみます。

HTML

1
2
3
4
<div id="demo">
    <p>{{message}}</p>
    <input v-model="message">
</div>

JavaScript

1
2
3
4
5
6
var demo = new Vue({
    el: '#demo',
    data: {
        message: '入力してください'
    }
})

inputにv-model=”message”とすることで、data内のmessageと紐づけしています。
双方向バインディングのデモページ
　

リストのレンダリング

配列の内容を繰り返し表示してみます。

HTML

1
2
3
4
5
6
7
<div id="app">
    <ul>
        <li v-for="story in stories">
            {{ story.subtitle }}
        </li>
    </ul>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
new Vue({
    el: '#app',
    data: {
        stories: [
            { subtitle: 'パンの耳ですわ' },
            { subtitle: 'カラダにいいのはおいしくないものだよ' },
            { subtitle: 'メイドの味がした' },
            { subtitle: 'むしろ生きがいです' },
            { subtitle: 'もうこはんはもうないんですね' },
            { subtitle: '野菜肉肉肉肉肉肉魚' },
            { subtitle: '十円足りない' },
            { subtitle: 'たくさん釣れてる' },
            { subtitle: 'カレーは二日目' },
            { subtitle: '鶏肉とケーキを食べまくる日' },
            { subtitle: 'チョコを食べまくる日' },
            { subtitle: 'もうパンの耳は卒業しますわ' }
        ]
    }
})

v-forは配列のデータをループ処理します。
リストのレンダリングのデモページ
　

ユーザー入力のハンドリング

ユーザーのアクションによって値を変更させてみます。

HTML

1
2
3
4
<div id="app">
    <p>{{ message }}</p>
    <button v-on:click="reverseMessage">Reverse Message</button>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
new Vue({
    el: '#app',
    data: {
        message: '三者三葉'
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})

methodsはイベントなどから呼び出す処理を設定します。
今回の場合、v-on:click=”reverseMessage”でクリック時にmethods内で設定しているreverseMessageを呼び出しています。
ユーザー入力のハンドリングのデモページ
　

Todoアプリ

リロードすると消えますが、データの追加と削除を行えるTodoアプリを作ってみます。

HTML

1
2
3
4
5
6
7
8
9
<div id="app">
    <input v-model="newStory" v-on:keyup.enter="addStory">
    <ul>
        <li v-for="story in stories">
            <span>{{ story.subtitle }}</span>
            <button v-on:click="removeStory($index)">X</button>
        </li>
    </ul>
</div>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
new Vue({
    el: '#app',
    data: {
        newStory: 'もうパンの耳は卒業しますわ',
        stories: [
            { subtitle: 'パンの耳ですわ' },
            { subtitle: 'カラダにいいのはおいしくないものだよ' },
            { subtitle: 'メイドの味がした' },
            { subtitle: 'むしろ生きがいです' },
            { subtitle: 'もうこはんはもうないんですね' },
            { subtitle: '野菜肉肉肉肉肉肉魚' },
            { subtitle: '十円足りない' },
            { subtitle: 'たくさん釣れてる' },
            { subtitle: 'カレーは二日目' },
            { subtitle: '鶏肉とケーキを食べまくる日' },
            { subtitle: 'チョコを食べまくる日' }
        ]
    },
    methods: {
        addStory: function () {
            var text = this.newStory.trim()
            if (text) {
                this.stories.push({ subtitle: text })
                this.newStory = ''
            }
        },
        removeStory: function (index) {
            this.stories.splice(index, 1)
        }
    }
})

Todoアプリのデモページ
　

【参考サイト】

　

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2025年4月
日 月 火 水 木 金 土
 12345
6789101112
13141516171819
20212223242526
27282930