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

S04 インストール

36ページ

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

vue.js
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
lodash.min.js
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
axios.min.js
<script src="https://cdn.jsdelivr.net/npm/axios@0.17.1/dist/axios.min.js"></script>

学習用ファイルのひな形

36ページ

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/vue@2.5.16/dist/vue.js"></script>
  <script src="main.js"></script>
</body>
</html>
main.js
var app = new Vue({
  el: '#app'
})
main.css
/* StyleSheet */

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

S05 Vue.js の基本機能

38~42ページ

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

38ページ

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

Hello Vue.js!

guide-ch1-demo01

繰り返しの描画

39ページ

<ol>
  <li v-for="item in list">{{ item }}</li>
</ol>
var app = new Vue({
  el: '#app',
  data: {
    list: ['りんご', 'ばなな', 'いちご']
  }
})
DEMO
  1. りんご
  2. ばなな
  3. いちご
guide-ch1-demo02

イベントの利用

40ページ

<button v-on:click="handleClick">Click</button>
var app = new Vue({
  el: '#app',
  methods: {
    handleClick: function (event) {
      alert(event.target) // [object HTMLButtonElement]
    }
  }
})
DEMO

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

guide-ch1-demo03

フォーム入力との同期

40ページ

<input v-model="message">
<p>{{ message }}</p>
var app = new Vue({
  el: '#app',
  data: {
    message: '初期メッセージ'
  }
})
DEMO

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

初期メッセージ

guide-ch1-demo04

条件分岐

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!

guide-ch1-demo05

トランジション&アニメーション

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!

guide-ch1-demo06