# CH1 Vue.js とフレームワークの基礎知識

# S04 インストール

36ページ

CHAPTER6 まではスクリプトタグで読み込むだけの、スタンドアロン版 の Vue.js を使用します。 Lodash（ユーティリティ用ライブラリ）と axios（HTTP 通信用ライブラリ）も使用することがあるため、あらかじめ読み込んでおいても問題ありません。

vue.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

lodash.min.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>

axios.min.js

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>

# 学習用ファイルのひな形

36ページ

Chapter 7 までは、コードは次のファイルに固定して書きます。

HTML は「index.html」
JavaScript は「main.js」
CSS は「main.css」

Chapter 7 以降は、コードのヘッダー部分にファイル名が記述されています。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Vue.js App</title>
  <link href="main.css" rel="stylesheet">
</head>
<body>
  <div id="app">
    <!-- この#appの内側にテンプレートを書き込んでいく -->
  </div>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>

main.js

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

main.css

/* StyleSheet */

環境準備が不要で、手軽に書き始められる各オンラインエディタのサービスもご利用ください。

TIP

ローカルファイルをそのままブラウザで読み込み「file://～」の URL で見ると、場合によってエラーが出ることがあります。なるべくローカルやリモートの Web サーバーを使用して「http://～」といった URL で見るようにしてください。詳しくはこちら。

# S05 Vue.js の基本機能

38～42ページ

# テキストのバインディング

38ページ

<p>{{ message }}</p>

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

DEMO

Hello Vue.js!

# 繰り返しの描画

39ページ

<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>

var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})

DEMO

りんご
ばなな
いちご

# イベントの利用

40ページ

<button v-on:click="handleClick">Click</button>

var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function (event) {
      alert(event.target) // [object HTMLButtonElement]
    }
  }
})

DEMO

※ ボタンを押すとアラートが出現します

# フォーム入力との同期

40ページ

<input v-model="message">
<p>{{ message }}</p>

var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ'
  }
})

DEMO

※ 好きな文字を入力してみよう

初期メッセージ

# 条件分岐

41ページ

<button v-on:click="show=!show">切り替え</button>
<p v-if="show">Hello Vue.js!</p>

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

DEMO

Hello Vue.js!

# トランジション＆アニメーション

42ページ

<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;
}
/* opacity:0から1へのフェードイン＆フェードアウト */
.v-enter, .v-leave-to {
  opacity: 0;
}

DEMO

Hello Vue.js!

← はじめに CHAPTER 2 →