Vue.js のディレクティブを使ってみた

初めに

最近フロントエンドに興味を持ち、Vue.jsについて勉強を始めました。
直近で学んだことのアウトプットとしての記事を投稿します。

いろいろなディレクティブ

ここからは v-for, v-bind, v-if, v-on, v-model について簡単な動作確認をしてみます。

v-for

  <div id="app">
    <ul>
      <li v-for="fluit in fluits">{{ fluit.name }}</li>
    </ul>
  </div>

var app = new Vue({
  el: "#app",
  data: {
    fluits: [
      {name: 'Peaches'},
      {name: 'Apples'},
      {name: 'Plums'}
    ]
  }
})

• 表示内容

v-bind

• input タグ属性書き換え

  <div id="app">
    <input type="button" v-bind:value="btnValue">
  </div>

var app = new Vue({
  el: '#app',
  data: {
    btnValue: 'ボタン'
  }
})

• 表示内容

• p タグ属性書き換え

  <div id="app">
    <p v-bind:title="message">John Smith</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Counry Prefecture 19xx～19yy'
  }
})

• マウスホバー時

• style 属性書き換え

  <div id="app">
    <p v-bind:style="styleObject">{{ message }}</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    styleObject: {
      margin: '100px',
      color: 'rgb(100, 50, 200)',
      fontSize: '100px',
      fontFamily: 'Playfair Display'
    }
  }
})

※font は https://fonts.google.com/ を使用

• 表示内容

コンポーネント

  <div id="app">
    <greeting></greeting>
  </div>

Vue.component('greeting', {
  template: '<h1>Hello Vue!</h1>'
})
var app = new Vue({
  el: '#app'
})

• 表示内容

v-for, v-bind, コンポーネント組み合わせ

  <fruits-list 
    v-for="favoriteFruit in favoriteFruitsList"
    v-bind:fruit="favoriteFruit">
  </fruits-list>

Vue.component('fruits-list', {
  props: ['fruit'],
  template: '<li>{{ fruit.name }}</li>'
})
var app = new Vue({
  el: "#app",
  data: {
    favoriteFruitsList: [
      {name: 'Peaches'},
      {name: 'Apples'},
      {name: 'Plums'}
    ]
  }
})

• 表示内容

v-if

  <div id="app">
    <p v-if="display">Hello Vue!</p>
  </div>

var app = new Vue({
  el: "#app",
  data: {
    display: true
  }
})

• コンソールログ

• 表示内容

• コンソールログにて操作(この場合画面表示なし)

v-on

  <div id="app">
    <p>{{ message }}</p>
    <button v-on:click="greetingCycle">greeting</button>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Good mornig!',
    count: 0,
    greetingList: [
      'Good mornig!',
      'Hello!',
      'Good evening!'
    ]
  },
  methods: {
    greetingCycle: function() {
      this.count = (this.count + 1) % 3;
      this.message = this.greetingList[this.count];
    }
  }
})

• ボタン押下回数 0 回

• ボタン押下回数 1 回

• ボタン押下回数 2 回

• ボタン押下回数 3 回

v-if, v-on 組み合わせ

  <div id="app">
    <input type="text" v-if="display">
    <input
      type="button"
      v-if="display"
      v-bind:value="submit"
      v-on:click="displayOnOff">
    <p v-if="completeMessage" v-bind:style="styles">{{ message }}</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'お疲れ様でした!',
    submit: '回答する',
    display: true,
    completeMessage: false,
    styles: {
      color: 'rgb(255, 255, 255)',
      backgroundColor: 'blue',
      padding: '20px'
    }
  },
  methods: {
    displayOff: function() {
      this.display = false;
      this.completeMessage = true;
    }
  }
})

• ボタン押下前

• ボタン押下後

v-model

  <div id="app">
    <input v-model="message" type="text" size="50">
    <p :style="fonts">{{ message }}</p>
  </div>

var app = new Vue({
  el: '#app',
  data: {
    message: '',
    fonts: {
      fontFamily: 'Parisienne'
    }
  }
})

※:style は v-bind:style の省略記法。
※font は https://fonts.google.com/ を使用

• 表示内容

参考記事

• 日本語版 Vue.js ドキュメント
  https://jp.vuejs.org/v2/guide/

• MDN Web Docs JavaScript
  https://developer.mozilla.org/ja/docs/Web/JavaScript