Vue.js 初級編

Hello World

バインディング

データを DOM に結びつける

message というデータの内容を

HTML にバインディング

値を更新するときは?

$input.on('input', event => {
  message = event.target.value
  $output.text(message)
})

今までのやり方

  1. イベントが走る
  2. データを更新
  3. 関連する DOM を更新
onInput (event) {
  this.message 
      = event.target.value
}

Vue のやり方

  1. イベントが走る
  2. データを更新
  3. 関連する DOM を更新

DOM の更新は Vue が勝手にやってくれるので、
データの更新だけに集中すれば良い!

属性のバインディング

v-bind

v-bind:属性名="JS のコード"
<img v-bind:src="'img/ico-' + icon + '.png'">
<img :src="'img/ico-' + icon + '.png'">

src 属性に設定する例

省略記法「 : 」

<img v-bind:src="'img/ico-' + icon + '.png'">

JS の文字列 (クオートが必要)

Vue 上のデータ (クオートがない)

<img v-bind:src="'img/ico-' + icon + '.png'">

この中は JS なので文字列結合している

v-bind:class="{ selected: buttonSelected }"
v-bind:style="{ fontSize: size + 'px' }"

buttonSelected が true のとき selected クラスを付与

font-size を size + 'px' を設定

条件分岐

v-if / v-else / v-else-if / v-show

<div v-if="formType === 'checkbox'">
  <input type="checkbox"> Checkbox
</div>

<div v-else-if="formType === 'radio'">
  <input type="radio"> Radio
</div>

<div v-else>
  <input type="text" placeholder="Text">
</div>

formType = 'checkbox'

<div v-if="formType === 'checkbox'">
  <input type="checkbox"> Checkbox
</div>

<div v-else-if="formType === 'radio'">
  <input type="radio"> Radio
</div>

<div v-else>
  <input type="text" placeholder="Text">
</div>

formType = 'radio'

<div v-if="formType === 'checkbox'">
  <input type="checkbox"> Checkbox
</div>

<div v-else-if="formType === 'radio'">
  <input type="radio"> Radio
</div>

<div v-else>
  <input type="text" placeholder="Text">
</div>

formType = 'text'

v-if

v-show

DOM 自体を消す

display: none; をつける

ループ

v-for

<div id="app">
  <p v-for="item in list">
    {{ item }}
  <p>
</div>
new Vue({
  el: '#app',
  data: {
    list: [
      'Try basic tutorials',
      'Read the docs',
      'Create a simple application'
    ]
  }
})
v-for="(要素, 添字) in 配列"
v-for="要素 in 配列"
v-for="(要素, キー, 添字) in オブジェクト"

イベントの監視

v-on

v-on:イベント名="行う処理"
<input v-on:input="text = $event.target.value">
<input @input="onInput">

インラインに処理を書く ($event はイベントオブジェクト)

省略記法 「@」

<input v-on:input="onInput">

メソッドを渡す (メソッドの作り方は後で)

<button v-on:click="submit('clicked')">

メソッド呼び出し

<button v-on:click.stop="onClick">
<a v-on:click.stop.prevent="navigate">

stopPropagation

組み合わせもできる

<form v-on:submit.prevent="submit">

preventDefault

モディファイア

<form v-on:submit.prevent="submit">
$form.on('submit', event => {
  event.preventDefault()
  vueInstance.submit(event)
})

双方向バインディング

v-model

v-model="プロパティ"

とするとフォームとプロパティの同期をしてくれる

データとメソッドの定義

new Vue({
  el: '#app',

  data: {
    message: 'Hello World'
  },

  methods: {
    update (message) {
      this.message = message
      this.log()
    },

    log () {
      console.log('LOG: ' + this.message)
    }
  }
})

data で初期データの指定

methods でメソッドの定義

this.xxx でアクセス

new Vue({
  el: '#app',

  methods: {
    update (message) {
      this.message = message
    }
  }
})

data で初期化することは必須

初期化してないので
エラー!

演習

  • タスクの一覧を見れる
  • タスクの追加ができる
  • タスクの完了状態を表示
  • タスクの完了状態をトグルできる

Todo 管理アプリを作る