はじめに
フロントエンドとしての技術習得のために学習を始めました。
まず目指すべき目標はVue.jsとBaaSでオリジナルのポートフォリオを作る事
「Vueやりたいんだよねぇ〜」って人も僕と一緒にレッツトライ
Vue.jsを学習するにあたって、HTML、CSS、JavaScriptの基礎知識が必要になってきます。
Vueインスタンスの作成
elオプションでVueインスタンスを展開する場所を指定する。
#appはid="app"を指定したことになる。
var app = new Vue({
el: '#app'
})
ルートテンプレートの作成
HTMLでVueインスタンスを展開する場所を指定する。
HTMLにVueを埋め込むイメージ。
<div id="app">
<!--ここにVueインスタンスが展開される -->
</div>
テキストのデータバインディング
データバインディングとはJavaScriptのデータを変えると描画されている内容も同時に変わる仕組みのこと。
Vueインスタンスに設定した値はマスタッシュ構文で展開する。
{{ message }}
Vueインスタンスのdataオプションにmessageの値を設定する
var app = new Vue({
el: '#app', // マウントするセレクタの指定
data: {
message: 'Hello Vue.js!'
}
})
設定したmessageはelオプションに定義したid=appの中で展開できる。
<div id="app">
<p>
{{ message }} <!-- Hello Vue.js! -->
</p>
</div>
id=appの外では展開できない
<div id="app">
</div>
{{ message }} <!-- {{ message }} -->
dataオプションで定義したデータは外部からアクセスできる
console.log(app.message) // Hello Vue.js!
dataオプションにオブジェクトや配列を設定
カンマで続けて書く事ができる。
var app = new Vue({
el: '#app',
data: {
// userオブジェクトを定義
user: {
lastName: 'Yamada',
firstName: 'Taro',
prefecture: 'Tokyo'
},
// 配列を定義
colors: ['Red', 'Green', 'Blue']
}
})
オブジェクトはオブジェクト名.キー名
配列は配列名[数値]でアクセス出来ます。
<div id="app">
<p>
{{ user.prefecture }} <!-- Tokyo -->
</p>
<p>
{{ colors[0] }} <!-- Red -->
</p>
</div>
属性のデータバインディング v-bind
属性のデータバインディングにはv-bindディレクティブを使用する。
<div id="app">
<input type="text" v-bind:value="message" />
</div>
条件分岐 v-if v-show
v-ifの場合、要素はDOMレベル削除される。
頻繁に表示・非表示を繰り返す場合、描画コストが高くなる。
<div id="app">
<p v-if="toggle"> <!-- 表示されない -->
Hello
</p>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
toggle: false
}
})
</script>
v-showの場合、条件を満たさない時はdisplay: noneで非表示させる。
表示を頻繁に切り替える際はv-ifと比べて描画コストの点で有利になる。
<div id="app">
<p v-show="toggle">
Hello
</p>
</div>
繰り返し処理 v-for
v-forディレクティブは繰り返し処理を行う事ができる。
試しにdataオプションに配列colorsを定義する。
var app = new Vue({
el: '#app',
data: {
colors: ['Red', 'Green', 'Blue']
}
})
v-forを使って配列の値を一つずつ取り出して繰り返し処理を行う。
配列名は複数形、繰り返し処理で使う値は単数形にしておくとコードが読みやすくなる。
<div id="app">
<ol>
<li v-for="color in colors">
{{ color }
</li>
</ol>
</div>
<div id="app">
<ol>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
</ol>
</div>
オブジェクトを繰り返し処理する
dataオプションにuserオブジェクトを定義する
var app = new Vue({
el: '#app',
data: {
user: {
firstName: 'Daiki',
LastName: 'Tsuneta',
age: 28
}
}
})
value in オブジェクト名でオブジェクトの中身を一つずつ取り出して繰り返し処理を行う
valueは任意の値を設定できる。vでも動く。
<div id="app">
<ul>
<li v-for="value in user">{{ value }}</li>
</ul>
</div>
<div id="app">
<ul>
<li>Daiki</li>
<li>Tsuneta</li>
<li>28</li>
</ul>
</div>
オブジェクトのキーも一緒に表示させたい時はv-for="(値, キー) in オブジェクト名"で表示させる事ができる。
第一引数が値、第二引数がキーになっているので注意。
<ul>
<li v-for="(value, key) in user">
{{ key }} : {{ value }}
</li>
</ul>
イベント処理 v-on
v-onディレクティブはイベント処理の基本。
ボタンをクリックしたら現在時刻を表示させるプログラムを書いてみる。
<div id="app">
<!-- クリックするとonclickメソッドが呼び出される -->
<button v-on:click="onclick">
Click!
</button>
<p>
<!-- 現在時刻を表示させるプロパティを定義 -->
{{ now }}
</p>
</div>
js側でdataオプションにプロパティnowの設定と、methodsオプションにメソッドを定義する。
メソッドはメソッド名: function() {..処理..}で記述する。
this.nowでプロパティnowにアクセスできる。
var app = new Vue({
el: '#app',
data: {
now: '' // nowに空の文字列を設定
},
methods: {
onclick: function() {
this.now = new Date().toLocaleString()
}
}
})
双方向データバインディング v-model
v-modelは双方向にデータバインディングする事ができる
これは実際に手を動かした方が分かりやすいかもしれない。
まずmessageプロパティを用意します。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
}
})
後はv-model="プロパティ名"で双方向にデータバインディングされる。
具体的には、下記のinputの値を変更すると{{ message }}の値もリアクティブに書き換わる。
<div id="app">
<p>
<input type="text" v-model="message">
</p>
<p>
{{ message }}
</p>
</div>
文字数カウントとかもめっちゃ楽。
<p>
<input type="text" v-model="message">
</p>
<p>
文字数{{ message.length }}
</p>
コンポーネント
よく使う機能を、再利用可能なコンポーネントにできる。
コードの見通しが良くなり、開発効率の改善に繋がる。
Vue.componentメソッドを使用する。
// Vueインスタンス作成よりも前に記述する
// Vue.component(コンポーネント名, { コンポーネントの定義情報 })`で作成
Vue.component('hello-component', {
template: '<p>Hello</p>'
})
var app = new Vue({
el: '#app',
--以下省略--
)}
コンポーネントの呼び出しはテンプレート名を記述するだけ。
<div id="app">
<hello-component></hello-component> <!-- <p>Hello</p> -->
<hello-component></hello-component> <!-- <p>Hello</p> -->
</div>
まとめ
Vue.js 楽しい
更新履歴
Vue.jsの基本的な使い方まとめ 
今ココ
Vue.jsでTO DOアプリを作る
Vue.js テンプレート制御ディレクティブ まとめ
Vue.js 算出プロパティとメソッドの違い