目次
（参考資料）
・Vue3 日本語ドキュメント
https://v3.ja.vuejs.org/
・Vue.js3超入門（掌田津耶乃著）秀和システム
１．Vueの動作環境
（１）動作環境
・Windows 10 Pro
・XAMPP Control Panel v3.2.4
（２）Node.jsのインストール
Node.jsはJavaScript実行環境でパッケージ管理ツールnpm（Node Package Manager）が組み込まれています。
下記のサイトにアクセスしてダウンロードします。https://nodejs.org/ja/
Node.jsのバージョンは偶数が長期サポートの安定版。
任意のバージョンをダウンロードしたいときは下記のページ。
https://nodejs.org/ja/download/releases/
Version16.13.0 LTSをダウンロード
・ファイル名：node-v16.13.0-x64.msiを実行
ネイティブモジュール用ツールオプションはデフォルトのままチェックOFF
・動作を確認します
> node –version
・VueCLIのインストール
VueCLIはVue開発のためのコマンドツールです。
> npm i -g @vue/cli-service-global
（３）プロトタイプアプリケーションの作成
・フォルダを作ります。
C:\Users\・・・\Desktop\vue_work
・ app.vueファイルを作成します。
app.vue
|
1 2 3 4 5 6 7 |
<template> <div id="app"> <h1>Hello!</h1> <p>This is message...</p> </div> </template> |
・app.vueファイルを置いたフォルダに移動して次のコマンドを実行します。
> vue serve
またはファイルを指定して
> vue serve app.vue
・ブラウザでアクセス
・Webサーバの停止
Ctrl＋C
２．プロジェクトの作成
（１）VueCLIコマンドを使ったプロジェクトの作成
> vue create （プロジェクト名）
> vue create hello_app
Default（Vue3）・・・を選択
パッケージマネージャー NPMを選択
（２）プロジェクトの実行
> cd hello_app
> npm run serve
（３）プロジェクトフォルダの内容
（４）プロジェクトのビルド
> npm run build
distフォルダが作成され、この中に公開するファイルが一式まとめられている
XAMPPのApatchサーバを起動し、distフォルダ内のファイル、フォルダをhtdocs配下に置く。
ブラウザでhttp://localhost:80にアクセスする
３．Vue3の基本
３．１ Vue3のオブジェクトからの{{プロパティ}}の表示
Vueオブジェクトがマウントされたタグ内にある{{プロパティ}}にはVueオブジェクトで定義されたプロパティの値が入ります。またこの値はオブジェクト内の値がリアルタイムにチェックされ、値が更新されると、自動的に{{}}の表示も更新されます。
sample1
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <h1>Vue3</h1> <div id="app"> {{ message }} </div> <script> const appdata = { data() { return { message: 'Hello Vue!' } } } Vue.createApp(appdata).mount('#app') </script> </body> </html> |
３．２ v-htmlによるHTML要素の出力
タグの中にv-html属性を使うことで、Vueオブジェクト側で用意したHTMLのコードで画面に表示できます。
タグには、<div v-html=”変数名”></div>とし、
Vueオブジェクトのdataプロパティの中で”変数名”にテンプレートリテラルを設定します。
テンプレートリテラルはプレースホルダー（${変数名}と書き、予め用意した変数をはめ込める）が使えます。
sample2
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <h1>Vue3</h1> <div id="app"> <div v-html="message"></div> </div> <script> const list = ['One', 'Two', 'Three'] const appdata = { data() { return { message: `<ul> <li>${list[0]}</li> <li>${list[1]}</li> <li>${list[2]}</li> </ul>` } } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
３．３ v属性によるタグの属性の設定
タグの中に「v-bind:属性名=”設定する値”」を記述することで、Vueオブジェクトからタグの属性を設定することができます。
（１）Vueオブジェクトからのスタイルの設定
タグの中で「v-bind:style=”変数”」で設定します。または「v-bind:style=”オブジェクト名”」としてVueインスタンスにdataプロパティの中にオブジェクトを用意しておくこともできます。
sample3
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <p v-bind:style="style">{{ message }}</p> </div> <script> const appdata = { data() { return { message : null, style:'font-size:32pt; color:red;' } }, mounted() { this.message = 'This is sample page.' } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
（２）Vueオブジェクトからのクラスの設定
タグの中で「v-bind:class={クラス名:”変数”}」で設定します。または「v-bind:class=”オブジェクト名”」としてVueインスタンスにdataプロパティの中にオブジェクトを用意しておくこともできます。
sample4
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <style> .red { color:red; } .blue { color:blue; } </style> <div id="app"> <p v-bind:class="{red:isRed, blue:isBlue}"> {{ message }} </p> </div> <script> const appdata = { data() { return { message : null, isRed: true, isBlue: false } }, mounted() { this.message = 'This is sample page.' setInterval(()=>{ this.isBlue = !this.isBlue this.isRed = !this.isRed },1000) } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
１秒毎に文字色が赤、青交互に変わります。
（３）v-ifによる条件付きレンダリング
タグの中で「v-if=”条件”」で設定します。
sample5
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <style> .red { color:red; } .blue { color:blue; } </style> <div id="app"> <p v-if="isRed" class="red"> {{ message }} <p v-else class="blue"> {{ message }} </p> </div> <script> const appdata = { data() { return { message : null, isRed: true, isBlue: false } }, mounted() { this.message = 'This is sample page.' setInterval(()=>{ this.isBlue = !this.isBlue this.isRed = !this.isRed },1000) } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
<タグ v-if=”条件”>・・・</タグ>
<タグ v-else>・・・</タグ>
のとき、条件のtrue/falseでどちらかのタグが表示されます。
１秒毎にclass属性を変えて、文字色が赤、青交互に変わるようにしています。
（４）HTMLのタグを<template>タグでまとめる
複数のタグを<template>タグでまとめることで、v-ifの条件によって、複数のタグを切り替えることができます。<template>タグは表示されません。
sample6
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="app"> <template v-if="isRed"> <p v-bind:style="style1">{{ message }}</p> </template> <template v-else> <p v-bind:style="style2">{{ message }}</p> </template> </div> <script> const appdata = { data() { return { message : null, style1:'font-size:32pt; color:red;', style2:'font-size:48pt; color:blue;', isRed: true, isBlue: false } }, mounted() { this.message = 'This is sample page.' setInterval(()=>{ this.isBlue = !this.isBlue this.isRed = !this.isRed },1000) } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
１秒毎に<template>タグの条件を変えて、文字スタイルが交互に変わるようにしています。
（５）v-forによる配列データのレンダリング
<タグ v-for=”変数” in 配列> ・・・表示内容・・・</タグ>
の形で記述します。
sample7
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{ message }}</p> <table class="table"> <tr> <th>Name</th> <th>Mail</th> <th>Tel</th> </tr> <tr v-for="item in items"> <td>{{item.name}}</td> <td>{{item.mail}}</td> <td>{{item.tel}}</td> </tr> </table> </div> <script> const appdata = { data() { return { message :"データの一覧表示", items:[ {name:'Suzuki', mail:'suzuki@com', tel:'123-456'}, {name:'Yamasita', mail:'yamasita@com', tel:'456-789'}, {name:'Tanaka', mail:'tanaka@com', tel:'789-123'}, ] } } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
v-forは配列から要素を取り出し
<タグ v-for=”取り出した要素を入れる変数,インデックス” in 配列>・・・表示内容・・・</タグ>
の形で記述することで第２引数として配列のインデックスを取り出せます。
sample8
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{ message }}</p> <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Mail</th> <th>Tel</th> </tr> <tr v-for="(item,id) in items"> <td>{{id}}</td> <td>{{item.name}}</td> <td>{{item.mail}}</td> <td>{{item.tel}}</td> </tr> </table> </div> <script> const appdata = { data() { return { message :"データの一覧表示", items:[ {name:'Suzuki', mail:'suzuki@com', tel:'123-456'}, {name:'Yamasita', mail:'yamasita@com', tel:'456-789'}, {name:'Tanaka', mail:'tanaka@com', tel:'789-123'}, ] } } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
（６）v-forによるオブジェクトデータのレンダリング
<タグ v-for=”（値,キー）” in オブジェクト>・・・表示内容・・・</タグ>の形で記述します。
sample9
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{ message }}</p> <table class="table"> <tr> <th>ID</th> <th>Name</th> <th>Mail</th> <th>Tel</th> </tr> <tr v-for="(item,key) in items"> <td>{{key}}</td> <td>{{item.name}}</td> <td>{{item.mail}}</td> <td>{{item.tel}}</td> </tr> </table> </div> <script> const appdata = { data() { return { message :"データの一覧表示", items:{ Suzuki:{mail:'suzuki@com', tel:'123-456'}, Yamasita:{mail:'yamasita@com', tel:'456-789'}, Tanaka:{mail:'tanaka@com', tel:'789-123'}, } } } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
４．コンポーネントの基本
４．１ コンポーネントの作成と利用
コンポーネントは、JavaScript側とHTML側（テンプレート）をひとまとめにして部品化して再利用できるようにしたものです。
コンポーネントの作成は、Vueアプリケーション.component（名前,{設定情報}）
HTMLの中で使うときは、コンポーネントの名前のタグを記述します。
<コンポーネント />
sample10
「Hello component!」を表示するコンポーネントを作成します。下記の順番で実装します。
①Vueアプリケーション（オブジェクト）を作成する
let app = Vue.createApp(appdata)
②アプリケーションにコンポーネントを組み込む
app.component(‘hello’, {
template:'<p>Hello component! </p>’
})
③HTMLにアプリケーションを組み込む
app.mount(‘#app’)
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{ message }}</p> <hello/> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します' } } } let app = Vue.createApp(appdata) app.component('hello', { template: '<p> Hello component! </p>' }) app.mount('#app') </script> </body> </html> |
４．２ 変数をコンポーネントに渡す
コンポーネントのdataプロパティに変数を定義することでコンポーネントに変数をわたすことができ、テンプレートの外で変数の値を設定できます。
sample11
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{ message }}</p> <hello/> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します' } } } let app = Vue.createApp(appdata) app.component('hello', { data:function(){ //短縮形 data(){ return { message : 'helloコンポーネント' } }, template: '<p> {{message}} </p>' }) app.mount('#app') </script> </body> </html> |
４．３ コンポーネントのタグに属性をもたせる
コンポーネントのタグに属性を設定してテンプレートで使えるようにするためには、コンポーネントに”props”プロパティを用意します。
props:[名前1,名前2,・・・]
sample12
コンポーネントのタグの属性に設定した文字列をテンプレートに表示します。
|
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <hello name="Suzuki" /> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します' } } } let app = Vue.createApp(appdata) app.component('hello', { props:['name'], template: '<p> Hello component! {{name}} </p>' }) app.mount('#app') </script> </body> </html> |
sample13
props:[‘name’]の配列は、変数の型や初期値を指定したいときは、オブジェクトとして
props:{
name:{
type:String,
default:”}
},
}
とすることもできます。
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <hello name="Suzuki" /> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します' } } } let app = Vue.createApp(appdata) app.component('hello', { props:{ name:{ type:String, default:'' } }, template: '<p> Hello component! {{name}} </p>' }) app.mount('#app') </script> </body> </html> |
４．４ コンポーネントのタグの属性の設定
前述のようにVueオブジェクトにマウントされたHTMLのタグにv-bindで属性の設定ができたように、コンポーネントでもv-bindで属性の設定ができます。
（１）コンポーネントのタグにv-bindによる属性の設定
sample14
配列から取り出したデータをv-bindでname属性に設定し、
テンプレートに表示します。
|
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <hello v-for="item in data" v-bind:name="item" /> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します', data:['Suzuki','Yamasita','Yamamoto'] } } } let app = Vue.createApp(appdata) app.component('hello', { props:['name'], template: '<p> Hello component! {{name}} </p>' }) app.mount('#app') </script> </body> </html> |
（２）inputタグにv-modelの設定
inputタグに設定されたv-model属性は、入力された値をVueオブジェクトの変数にバインドする働きをします。
sample15
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <div><hello v-bind:name="name" /></div> <div><input type="text" v-model="name" ></div> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します', name:"suzuki" } } } let app = Vue.createApp(appdata) app.component('hello', { props:['name'], template: '<p> Hello component! {{name}} </p>' }) app.mount('#app') </script> </body> </html> |
（３）コンポーネントのタグにv-onの設定
v-on属性を使うことでイベントに値をバインドして、Vueオブジェクトで扱うことができます。
sample16
ボタンを押す毎に数字をインクリメントして、カウンタ表示します。
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <hello/> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します', name:"" } } } let app = Vue.createApp(appdata) app.component('hello', { data(){ return{ counter:0, } }, template: '<p v-on:click="counter++"> counter! {{counter}} </p>' }) app.mount('#app') </script> </body> </html> |
（４）イベント処理をメソッドにまとめる
上記（３）では 「v-on:click=”counter++”」として直接、値（式）を記述しましたが、ここではこの式をメソッドから呼ぶようにします。
sample17
ボタンを押す毎に数字をインクリメントして、カウンタ表示します。
|
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <hello/> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します', name:"" } } } let app = Vue.createApp(appdata) app.component('hello', { data(){ return{ counter:0, } }, methods:{ countup(){ this.counter++; } }, template: '<p v-on:click="countup"> counter! {{counter}} </p>' }) app.mount('#app') </script> </body> </html> |
・メソッドで変数を扱うとき、このオブジェクトの変数であることを示すため「this.counter++;」のようにthisを付けます。
４．５ 算術プロパティ
methodsプロパティとcomputedプロパティ（算術プロパティ）には関数式を定義できますが、算術プロパティは依存する値が更新された時に実行されます。
上記ではイベントでメソッドを呼び出して値を更新しましたが、算術プロパティにcountup()を定義したときはカウントアップしません。
４．６ ローカルコンポーネント
上記では、
（アプリケーション）.component(‘hello’,{ data、method、templateなどのプロパティの定義})で定義したグローバルコンポーネントは全て読み込まれます。これに対してローカルコンポーネントで定義することで、必要なコンポーネントのみ読み込んで使うことができます。
sample18
sample17をローカルコンポーネントとして書き換えたコードです。
sample17では、app.component(‘hello’・・・)でVueオブジェクトに組み込んでいた（グローバルコンポーネント）をアプリケーション変数にcomponentsプロパティで登録してローカルコンポーネントとして登録します。
|
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 |
<!DOCTYPE html> <html> <head> <title>My first Vue app</title> <script src="https://unpkg.com/vue@next"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> </head> <body> <div id="app"> <p>{{message}}</p> <hello/> </div> <script> const appdata = { data() { return { message : 'コンポーネントを表示します', name:"" } }, components:{ hello:{ data(){ return{ counter:0, } }, methods:{ countup(){ this.counter++; } }, template: '<p v-on:click="countup"> counter! {{counter}} </p>' } } } let app = Vue.createApp(appdata) app.mount('#app') </script> </body> </html> |
The end