JavaScript
初心者
Vue.js
アウトプット
udemy

Vue JS入門決定版!jQueryを使わないWeb開発のまとめ【セクション2 Vue.jsの基本的な使い方】

JavaScriptのフレームワークであるVue.jsの学習をする為にUdemyで中村祐太さんの「Vue JS入門決定版!jQueryを使わないWeb開発のまとめ」を購入。

今回は学習内容を整理する為に【セクション2 Vue.jsの基本的な使い方】で重要だと思った部分をまとめています。


Vue.jsの読み込み

Vue.jsはCDN(コンテンツデリバリーネットワーク)で配布されているので手軽に利用することが可能。

公式HPで検索窓に「インストール」と検索することで読み込みコードをコピーできる。

Vue.js 公式サイト


index.html

<!-- Vue.jsの読み込みコード  -->

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<!-- @以降でバージョン指定が可能  -->


開発バージョンと本番バージョン

Vue.jsでは開発バージョン本番バージョンの2つのバージョンがある。

開発環境では開発バージョンを使用し、本番環境では本番バージョンを使用する。

バージョン
警告出力、デバック
処理スピード

 開発
    〇    

 本番
✕    


index.html

<!-- 開発バージョン  -->

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

<!-- 本番バージョン  -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script>



Vueインスタンスの作成

Vueアプリケーションは、Vue関数で新しいVueインスタンスを作成することで起動する。


javascirpt.js

var app = new Vue({

// 各種オプションを記述する
})
/*
appは変数名 変数名は任意
new Vueの戻り値はルートビューインスタンスになる
*/



ルートのテンプレートの作成

テンプレートとはHTMLベースのテンプレート構文を利用した描写に関する記述のこと。

テンプレートはHTMLに記述する。

テンプレートはHTMLのbodyタグ内ならどこでも記述が可能。


index.html

<div id="app">

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


Vue.jsを動作させる為のオプションをオプション名:値のハッシュ形式で指定することが可能


javascirpt.js

var app = new Vue({

//options
el: '#app'
})
/*
el: '#app'でVue.jsを適用する要素を指定している
*/



テキストのデータバインディング

Hello Vue.js!を表示させるプログラム。


index.html

<div id="app">

<p>
{{ message }}
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

テキストを表示させる場合はMustache(マスタッシュ・口ひげ)構文を利用してテキスト展開させる。


javascirpt.js

var app = new Vue({

el: '#app',
data: {
message: 'Hello Vue.js!'
}
})

データオプションはカンマ区切りで複数のプロパティを定義することが可能。

またオブジェクトを設定することも可能。


javascirpt.js

var app = new Vue({

el: '#app',
data: {
message: 'Hello Vue.js!'
count: 0

}
})



ディレクティブ

ディレクティブとはv-で始まる特別な属性。

directive(指令)という名前の通り、Vue.jsに何らかの指示を行う仕組み。

ディレクティブの例

- v-bind

- v-if

- v-show

- v-for

- v-on

- v-model


v-bind

属性へのデータバインディングをおこなうには「v-bind」を使用する。


index.html

<div id="app">

<input type="text" v-bind:value="message"/>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

var app = new Vue({

el: '#app',
data: {
message: 'Hello Vue.js!'
}
})


v-if

v-ifを使用することで要素に表示/非表示を切り替えることができる。


index.html

<div id="app">

<p v-if="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

// Helloを表示させる

var app = new Vue({
el: '#app',
data: {
toggle: true
}
})

// Helloを非表示させる
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})



v-show

v-showを使用することで要素に表示/非表示を切り替えることができる。

v-ifとは異なりCSSのdisplayプロパティをon/offすることで切り替える。


index.html

<div id="app">

<p v-show="toggle">
Hello
</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

// Helloを表示させる

var app = new Vue({
el: '#app',
data: {
toggle: true
}
})

// Helloを非表示させる
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})



v-for

配列またはオブジェクトを繰り返して表示する場合はv-forを使用する。


index.html

<!-- 配列の繰り返し処理 -->

<div id="app">
<ol>
<li v-for="color in colors">{{ color }}</li>
<!--colorsは配列の名前 colorはエイリアス名 -->
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

var app = new Vue({

el: '#app',
data: {
colors: ['Red', 'Green', 'Blue']
}
})


index.html

<!-- オブジェクトのバリューを表示させる -->

<div id="app">
<ol>
<li v-for="value in user">{{ value }}</li>
</ol>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

var app = new Vue({

el: '#app',
data: {
user: {
firstNmae: 'hoshino',
lastName: 'minami',
age: '21'
}
}
})


index.html

<!-- オブジェクトのバリューとキーを表示させる -->

<div id="app">
<ul>
<li v-for="(value, key) in user">
<!-- 引数の変数名は任意で指定できる -->
{{ key }} : {{ value }}
</li>
 </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

var app = new Vue({

el: '#app',
data: {
user: {
firstNmae: 'hoshino',
lastName: 'minami',
age: '21'
}
}
})


コンポーネント

コンポーネントとはページを構成するUI部品のこと。

コンポーネントはテンプレートとそのロジックから構成される。

よく使う機能をコンポーネント化することで再利用性が高くなり、コードの見通しが良くなる。

結果として開発効率が改善される。

コンポーネントを使用する場合はVue.componentメソッドを利用する。

下記はコンポーネントを使用して「hello」を繰り返して表示している。


index.html

<div id="app">

<hello-component></hello-component>
<hello-component></hello-component>
<hello-component></hello-component>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>


javascirpt.js

Vue.component('hello-component', {

template: '<p>hello</p>'
})

var app = new Vue({
el: '#app',
})



おわり

今回は「Vue JS入門決定版!jQueryを使わないWeb開発のまとめ」の

【セクション2 Vue.jsの基本的な使い方】で重要だと思った部分をまとめました。

参考文献

「Vue JS入門決定版!jQueryを使わないWeb開発のまとめ」