はじめに
この記事は、初めて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ファイル内に以下の記述を追加します。
| 1 | <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> |
Vueアプリケーションを作る
Vueで文字を表示する簡単なサンプルコードは以下のとおりです。
el オプションで指定した要素と繋がります。下の例では {{text}} の部分に data オプションで指定した Sample Text が表示されます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!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> |
データを表示する
文字列を表示する
文字列を表示するには {{}} （マスタッシュ）で囲う方法と v-text で指定する方法があります。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
HTMLで表示する
data をHTMLとして表示するには v-html を使います。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <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> |
属性を指定する
要素の属性を data で指定するには v-bind を使います。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <div id="app"> <img v-bind:src="filename"></img> </div> <script> var app = new Vue({ el: '#app', data: { filename: 'hoge.png' } }) </script> </body> |
v-bind は以下のように省略が可能です。
| 1 | <img :src="filename"></img> |
インラインスタイルを指定する
インラインスタイルを data で指定するには以下のようにします。属性名はキャメルケースで記述する点に注意が必要です。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <div id="app"> <p :style="{fontSize:size}">Sample text</p> </div> <script> var app = new Vue({ el: '#app', data: { size: '12px', } }) </script> </body> |
クラスを指定する
クラスを data で指定するには以下のようにします。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | <body> <div id="app"> <p :class="myClass">Sample text</p> </div> <script> var app = new Vue({ el: '#app', data: { myClass: 'my-class', } }) </script> </body> |
複数のクラスを指定したり、条件に応じて指定することもできます。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
入力に応じて表示を変える
ユーザの入力に応じて表示を変更するには v-model を使います。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <body> <div id="app"> <input v-model="name"> <p>こんにちは、{{name}}です。</p> </div> <script> var app = new Vue({ el: '#app', data: { name: '', } }) </script> </body> |
イベントに応じて表示を変える
ユーザのイベントに応じて表示を変えるには v-on を使います。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <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> |
v-on は以下のように省略が可能です。
| 1 | <button @click="countUp"> |
条件分岐
条件に応じて表示を切り替えるには v-if と v-else を使います。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <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> |
繰り返し
繰り返して表示する場合は v-for を使います。使い方は以下のとおりです。
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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> |
さいごに
Vue.jsでWebアプリケーションを作るにあたり、基本的な使い方を紹介しました。
おすすめ書籍
