概要

基礎から学ぶ 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
}

～～　随時更新　～～