目次
本項ではVue.js v.2について扱います。
Vue.js v.2 日本語ドキュメント
https://jp.vuejs.org/v2/guide/
１．Vueの動作環境
（１）動作環境
・Windows 10 Pro
・XAMPP Control Panel v3.2.4
（２）Vueの導入
Vueは下記のcdnからコードを読み込んで使用します。
・開発版（コンソールへの警告文が含まれている）<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js”></script>
・本番版（サイズと高速化のため最適化されている）<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.14″></script>
（３）動作確認方法
Webサーバ（XAMPP）のドキュメントルート（”C:/xampp/htdocs”）にindex.html、javascript（.js）などのファイルを置き、XAMPPのApacheを起動してブラウザ（http://localhost）で確認します。
２．Vuejsの機能を含んだサンプルプログラム
下記のサンプルでは、Vuejsの機能として、
・イベントハンドリング（v-on:click）
・条件付きレンダリング（v-if）
・双方向バインディング（v-model）
・リストレンダリング（v-for）
・スタイルのバインディング（v-bind:style）
・クラスのバインディング（v-bind:class）
・コンポーネント（ props、$emit(‘カスタムイベント’））
について動作を確認しました。
３．サンプルプログラムの概要
４．サンプルプログラム
index.html
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Vue.js App</title> <style> .class-a{color:green} </style> </head> <body> <div id="app"> <p>■イベントハンドリングの例</p> <input type="button" value="push" @click="increment" /> <p>{{count}}</p> <p>■条件付きレンダリング</p> <p v-if="count >=5">５回以上押下</p> <p v-else>５回未満</p> <p>■双方向バインディング</p> <input v-model="name" type="text" name="name"/> <p>入力したテキスト：{{name}}</p> <p>■リストレンダリング</p> <ul> <li v-for="(item,i) in member" v-bind:key='i' >{{item}}</li> </ul> <p>■スタイルのバインディング</p> <div v-bind:style="styleSample"> <p>文字色:{{color}}</p> </div> <p>■クラスのバインディング（直接オブジェクトで指定）</p> <div v-bind:class="{'class-a':classA}">クラスのバインディング</div> <p>■クラスのバインディング（dataのオブジェクトで指定）</p> <div v-bind:class="classObj">クラスのバインディング</div> <p>■コンポーネント 選択したコンポーネントでメッセージが変わります</p> <p>メッセージ：{{title}}</p> <p v-on:click="onSelectroot">選択：Rootコンポーネント</p> <t-component v-bind:componame="componame" v-on:clicktitle="onSelectcompo()" ></t-component> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> <script src="main.js"></script> </body> </html> |
・v-forの使い方
Vueインスタンスのデータを使ってレンダリングする。変数１、変数２はv-forの中でだけ使われる。
（１）データが配列のとき
<タグ名 v-for=”（変数1、変数2） in 配列の変数”>・・・<タグ名>
変数1には配列の要素、変数2には配列のindexが入る。
このindexをv-bind:key=”変数2”でkey属性に指定するようにする。
（２）データがオブジェクトのとき
<タグ名 v-for=”（変数1、変数2、変数3） in オブジェクト名”>・・・<タグ名>
オブジェクトを{プロパティ名:値}とすると、
変数1には値、変数2にはプロパティ名、変数3にはindexが入る。
（３）データがオブジェクトの配列のとき
<タグ名 v-for=”（変数1、変数2、変数3） in 配列の変数”>・・・<タグ名>
オブジェクトを[{プロパティ名:値},{プロパティ名:値},・・・]とすると、変数1には配列の要素（オブジェクト）、変数2には配列のindexが入る。
このindexをv-bind:key=”変数2”でkey属性に指定するようにする。
オブジェクト内のプロパティは、「変数名.プロパティ名」の書式でアクセスする。
main.js
|
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 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
//Vueインスタンス生成の前にコンポーネント定義を先に書かないと"ReferenceError"になる const tComponent = Vue.component('t-component',{ //親から受け取るデータを設定 props: { componame: { type: String, default:"" } }, //親へのイベント通知の書き方 //$emit（イベント名,[親コンポーネントに渡すデータ]）: template: ` <div class="title-box" v-on:click="$emit('clicktitle')" >選択：{{componame}}</div>` }); //Vueインスタンスの作成 var app = new Vue({ //Vueインスタンスを結びつけるHTML要素を指定 el: '#app', //使用するコンポーネントの登録 component:{ 't-component':tComponent, }, //Vuejsで扱うデータを入れておくところを定義 data:function(){ //Vuejsで扱うデータを入れておくところ return{ //データはオブジェクトを返す関数として定義（※１） title:"Hello", //① componame:"tComponent", name:"name", //④ count:0, //③ //message:"Hello Vuejs", member:['cat','dog','bard'], //⑤ color:'#f00', //⑥ classA:true, //⑦ classObj:{ 'class-a':true }, }; }, //算出プロパティの定義 computed:{ styleSample(){ //⑥ return `color:${this.color}` } }, //メソッドの定義 methods:{ increment(){ //② this.count++; }, onSelectcompo() { //⑧カスタムイベントで実行するメソッド this.title="子コンポーネントの要素が選択されました"; }, onSelectroot() { this.title="Rootコンポーネントの要素が選択されました"; } } }); |
５．ブラウザで表示例
・イベントハンドリング（v-on:click）
・条件付きレンダリング（v-if）
・双方向バインディング（v-model）
・リストレンダリング（v-for）
・スタイルのバインディング（v-bind:style）
・クラスのバインディング（v-bind:class）
・コンポーネント（ props、$emit(‘カスタムイベント’））
The end