はじめに
この記事は、初めて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> varapp=newVue({ 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> <pv-text="text2"></p> </div> <script> varapp=newVue({ 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"> <pv-html="textHtml"></p> </div> <script> varapp=newVue({ 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"> <imgv-bind:src="filename"></img> </div> <script> varapp=newVue({ 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}">Sampletext</p> </div> <script> varapp=newVue({ 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">Sampletext</p> </div> <script> varapp=newVue({ 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">Sampletext</p> </div> <script> varapp=newVue({ 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"> <inputv-model="name"> <p>こんにちは、{{name}}です。</p> </div> <script> varapp=newVue({ 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"> <buttonv-on:click="countUp"> <p>{{count}}回</p> </div> <script> varapp=newVue({ 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"> <pv-if="isShow">表示する</p> <pv-else>表示しない</p> </div> <script> varapp=newVue({ 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> <liv-for="name in names">{{name}}</li> </ul> </div> <script> varapp=newVue({ el:'#app', data:{ names:['山田','田中','鈴木','佐藤'], } }) </script> </body> |
さいごに
Vue.jsでWebアプリケーションを作るにあたり、基本的な使い方を紹介しました。