Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

1 はじめに
2 データを表示する
- 2.1 文字列を表示する
- 2.2 HTMLで表示する
3 属性を指定する
- 3.1 インラインスタイルを指定する
- 3.2 クラスを指定する
4 入力に応じて表示を変える
5 イベントに応じて表示を変える
6 条件分岐
7 繰り返し
8 さいごに
9 おすすめ書籍

はじめに

この記事は、初めてVue.jsをさわる方を対象にVue.jsの特徴や基礎知識について紹介します。

Vue.jsとは

Vue.jsはWebアプリケーションのUIを構築するためのJavaScriptフレームワークです。Vue.jsを使うことでWebページ内に動的なUIを追加したり、SPAを簡単に作ることができます。

Vue (発音は / v j u ː / 、 view と同様）はユーザーインターフェイスを構築するためのプログレッシブフレームワークです。他の一枚板(モノリシック: monolithic)なフレームワークとは異なり、Vue は少しずつ適用していけるように設計されています。中核となるライブラリは view 層だけに焦点を当てています。そのため、使い始めるのも、他のライブラリや既存のプロジェクトに統合するのも、とても簡単です。また、モダンなツールやサポートライブラリと併用することで、洗練されたシングルページアプリケーションの開発も可能です。
出典：Vue.js Vue.jsとは？

インストール

Vue.jsのインストール方法はいくつかありますが、一番簡単なCDNを使う方法を紹介します。HTMLファイル内に以下の記述を追加します。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

1	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Vueアプリケーションを作る

Vueで文字を表示する簡単なサンプルコードは以下のとおりです。

el オプションで指定した要素と繋がります。下の例では {{text}} の部分に data オプションで指定した Sample Text が表示されます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Page Title</title>
    <link rel="stylesheet" type="text/css" media="screen" href="main.css">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{text}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                text: 'Sample Text'
            }
        })
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

text: 'Sample Text'

}

})

</script>

</body>

</html>

データを表示する

文字列を表示する

文字列を表示するには {{}} （マスタッシュ）で囲う方法と v-text で指定する方法があります。使い方は以下のとおりです。

<body>
    <div id="app">
        <p>{{text1}}</p>
        <p v-text="text2"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                text1: 'Sample Text1',
                text2: 'Sample Text2',
            }
        })
    </script>
</body>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

text1: 'Sample Text1',

text2: 'Sample Text2',

}

})

</script>

</body>

HTMLで表示する

data をHTMLとして表示するには v-html を使います。使い方は以下のとおりです。

<body>
    <div id="app">
        <p v-html="textHtml"></p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                textHtml: '<span>Sample HTML</span>',
            }
        })
    </script>
</body>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

textHtml: '<span>Sample HTML</span>',

}

})

</script>

</body>

属性を指定する

要素の属性を data で指定するには v-bind を使います。使い方は以下のとおりです。

<body>
    <div id="app">
        <img v-bind:src="filename"></img>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                filename: 'hoge.png'
            }
        })
    </script>
</body>

<body>

</div>

var app = new Vue({

el: '#app',

data: {

filename: 'hoge.png'

}

})

</script>

</body>

v-bind は以下のように省略が可能です。

<img :src="filename"></img>

1	<img :src="filename"></img>

インラインスタイルを指定する

インラインスタイルを data で指定するには以下のようにします。属性名はキャメルケースで記述する点に注意が必要です。

<body>
    <div id="app">
        <p :style="{fontSize:size}">Sample text</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                size: '12px',
            }
        })
    </script>
</body>

<body>

<p :style="{fontSize:size}">Sample text</p>

</div>

var app = new Vue({

el: '#app',

data: {

size: '12px',

}

})

</script>

</body>

クラスを指定する

クラスを data で指定するには以下のようにします。

<body>
    <div id="app">
        <p :class="myClass">Sample text</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                myClass: 'my-class',
            }
        })
    </script>
</body>

<body>

<p :class="myClass">Sample text</p>

</div>

var app = new Vue({

el: '#app',

data: {

myClass: 'my-class',

}

})

</script>

</body>

複数のクラスを指定したり、条件に応じて指定することもできます。

    <div id="app">
        <p :class="[myClass1, myClass2: isActive">Sample text</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                myClass1: 'my-class',
                myClass2: 'my-class',
                isActive: true,
            }
        })
    </script>
</body>

<p :class="[myClass1, myClass2: isActive">Sample text</p>

</div>

var app = new Vue({

el: '#app',

data: {

myClass1: 'my-class',

myClass2: 'my-class',

isActive: true,

}

})

</script>

</body>

入力に応じて表示を変える

ユーザの入力に応じて表示を変更するには v-model を使います。使い方は以下のとおりです。

<body>
    <div id="app">
        <input v-model="name">
        <p>こんにちは、{{name}}です。</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                name: '',
            }
        })
    </script>
</body>

<body>

<p>こんにちは、{{name}}です。</p>

</div>

var app = new Vue({

el: '#app',

data: {

name: '',

}

})

</script>

</body>

イベントに応じて表示を変える

ユーザのイベントに応じて表示を変えるには v-on を使います。使い方は以下のとおりです。

<body>
    <div id="app">
        <button v-on:click="countUp">
        <p>{{count}}回</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                count: 0,
            },
            methods: {
                countUp: function () {
                    this.count++;
                }
            }
        })
    </script>
</body>

<body>

<p>{{count}}回</p>

</div>

var app = new Vue({

el: '#app',

data: {

count: 0,

methods: {

countUp: function () {

this.count++;

}

})

</script>

</body>

v-on は以下のように省略が可能です。

<button @click="countUp">

1	<button @click="countUp">

条件分岐

条件に応じて表示を切り替えるには v-if と v-else を使います。使い方は以下のとおりです。

<body>
    <div id="app">
        <p v-if="isShow">表示する</p>
        <p v-else>表示しない</p>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                isShow: true,
            }
        })
    </script>
</body>

<body>

<p v-else>表示しない</p>

</div>

var app = new Vue({

el: '#app',

data: {

isShow: true,

}

})

</script>

</body>

繰り返し

繰り返して表示する場合は v-for を使います。使い方は以下のとおりです。

<body>
    <div id="app">
        <ul>
            <li v-for="name in names">{{name}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                names: ['山田', '田中', '鈴木', '佐藤'],
            }
        })
    </script>
</body>

<body>

<ul>

</ul>

</div>

var app = new Vue({

el: '#app',

data: {

names: ['山田', '田中', '鈴木', '佐藤'],

}

})

</script>

</body>

さいごに

Vue.jsでWebアプリケーションを作るにあたり、基本的な使い方を紹介しました。

日	月	火	水	木	金	土
	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

Vue.jsでWebアプリケーションを作る〜Vue.jsの基礎〜

はじめに

Vue.jsとは

インストール

Vueアプリケーションを作る

データを表示する

文字列を表示する

HTMLで表示する

属性を指定する

インラインスタイルを指定する

クラスを指定する

入力に応じて表示を変える

イベントに応じて表示を変える

条件分岐

繰り返し

さいごに

おすすめ書籍

フォロー

アプリ情報