概要
基礎から学ぶ Vue.js を読んで感じたことや知らなかったこと、覚えておきたいこと等を随時メモしています。自分用。
はじめに
データバインディング ・・・ JavaScriptのデータを変えるだけで描画内容も一緒に変わる仕組みのこと
Vue.jsの特徴
- 高い機能性を持つサイトの構築・リソースの再利用を得意としている
- データバインディングをはじめとするView（つまりDOM）に関わるさまざまな機能を持つ
- コンポーネント （HTMLとJavaScriptをセットにしたもの）という機能がある
CHAPTER 1 Vur.jsとフレームワークの知識
SECTION 01 Vue.jsについて
- Adobeや任天堂、LINEやGitLabをはじめとした有名な企業・プロジェクトで広く採用されている
フレームワークとは？
- ライブラリ ・・・ 呼び出す側を作る
- フレームワーク ・・・ 呼び出される側を作る
SECTION 02 Vue.jsのキーコンセプト
画面を描画する構造の本体は DOMではなくJavaScriptのデータ である
❌先にDOMが存在してそれを読み込んだり操作する
⭕最初にデータが存在してそのデータの状態に適したDOMを構築する
-
データ連動 ・・・ データを中心とするアプリケーション設定のこと
データの状態によって描画は更新され、時には自動的にアクションを起こしたり、いろいろなふるまいが変わることもある。 - テンプレート ・・・ Vue.jsでDOMを構築する手段
- ディレクティブ ・・・ テンプレートとロジックを関連付けるもの。「v-」から始まる属性のこと。
- mount ・・・ 配置する要素とアプリケーションを紐付けること
- viewの管理 ・・・ DOMの更新や状態の管理
- コンポーネント ・・・ Vue.jsの「コンポーネント」は、機能ごとにJavaScriptとテンプレートを1つのセットにして、他の機能とは分離して開発できるようにする仕組みのこと
📝属性の名前が「v-」から始まっていなければ値は文字列（一部例外あり）
SECTION 03 豊富なリソースを活用しよう
Element
ウェブサイト向けUIコンポーネント集
https://element.eleme.io/#/en-US/component/layout
Onsen UI
ハイブリッド、モバイルアプリ用のUIコンポーネント集
https://ja.onsen.io/theme-roller/
SECTION 04 Vue.jsのインストール
var app = new Vue({
// オプション
})
- コンストラクタ関数「Vue」を使う
- ルートとなるVueインスタンスを作成する
📝ざっくり用語復習
インスタンス
https://wa3.i-3-i.info/word1118.html
クラスをnewしたもの
コンストラクタ
https://wa3.i-3-i.info/word13646.html
クラスをnewした瞬間に実行される関数のこと
SECTION 05 Vue.jsの基本機能
テキストのバインディング
<p>{{ msg }}</p>
var app = new Vue({
el: '#app',
data: {
msg: 'Hello Vue.js!'
}
})
<p>Hello Vue.js!</p>
// console
console.log(app.msg) // -> Hello Vue.js!
アクセスは app.msg
🚨app.data.msg ではないことに注意
繰り返しの描画
<ol>
<li v-for="item in list">{{ item }}</li>
</ol>
var app = new Vue({
el: '#app',
data: {
list: ['りんご', 'ばなな', 'いちご']
}
})
<ol>
<li>りんご</li>
<li>ばなな</li>
<li>いちご</li>
</ol>
// console
app.list.push('おれんじ')
イベントの利用
<button v-on:click="handleClick">Click</button>
var app = new Vue({
el: '#app',
methods: {
handleClick: function(event) {
alert(event.target)
}
}
})
addEventListener や $(element).on メソッドと似たように作用する
フォーム入力との同期
<p>{{ msg }}</p>
<input v-model="msg">
var app = new Vue({
el: '#app',
data: {
msg: '初期メッセージ'
}
})
フォームに入力した文字と <p> 要素の文字が同期する
条件分岐
<p v-if="show">Hello Vue.js!</p>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
// console
app.show = false
トランジション＆アニメーション
<button v-on:click="show=!show">切り替え</button>
<transition>
<p v-if="show">Hello Vue.js!</p>
</transition>
var app = new Vue({
el: '#app',
data: {
show: true
}
})
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
.v-enter,
.v-leave-to {
opacity: 0;
}
SECTION 06 オプションの構成を見てみよう
var app = new Vue({
// 1 mountする要素
el: '#app',
// 2 アプリケーションで使用するデータ
data: {
message: 'Vue.js'
},
// 3 算出プロパティ
computed: {
computedMessage: function() {
// 何か処理した結果をデータとして返す
return this.message + '!'
}
}
// 4 ライフサイクルフック
created: function() {
// 行いたい処理
},
// 5 アプリケーションで使用するメソッド
methods: {
myMethod: function() {
// 行いたい処理
}
}
})
ライフサイクルハック ・・・ Vue.jsの「おはよう」から「おやすみ」までの一定のサイクルを表すもの
フック ・・・ 決まったタイミングに処理を割り込ませること
CHAPTER 2 データの登録と更新
SECTION 07 基本のデータバインディング
データバインディング （DOMの更新の自動化）を行うには、テンプレートで使用するすべてのデータは リアクティブデータ として定義する必要がある
リアクティブデータ ・・・ Vue.jsによって取得した時（get）と代入した時（set）のフック処理が登録された「反応のできるデータ」のこと
リアクティブなデータの定義
data オプションに文字列などを定義 → リアクティブなデータに変換される
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js' // messageは変化を検知できるようになる
}
})
🚨data オプションの直下のプロパティは 後から追加できない
→ 内容が決まっていなくても初期値や空データとして定義しておく必要がある
data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos false,
todos: [],
error: null
}