Vue.jsチートシート

HOME
Vue.js関連
Vue.jsチートシート

Vue.jsとは

Vue.jsはUI構築のためのJavaScriptプログレッシブフレームワークのこと

Vue.js公式サイト 公式ドキュメント

基本文法

Vue.jsはVueインスタンスを用いて、実装します

<div id="app">
  <!-- Vue.js適用範囲 -->
</div>
var vm = new Vue({
  el: '#app'
});

オプション

el

Vue.jsの機能を適用するDOMの指定

<div id="app">
  <!-- Vue.js適用範囲 -->
</div>
var vm = new Vue({
  el: '#app'
});

data

データを保持する(データの変数化)。{{ 変数名 }}で出力可能

<div id="app">
  <p>{{ hoge }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  }
});

methods

v-onのイベントハンドラとして使用

<div id="app">
  <input type="checkbox" @input="change" checked>
  <div v-show="rad">Hello</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    rad: true
  },
  methods: {
    change: function(e) {
      this.rad = e.target.checked
    }
  }
});

computed

算出プロパティ。データの自動更新をし、計算結果はキャッシュに保存。getでは必ず戻り値が必要

<div id="app">
  <p>税抜価格:<input type="text" v-model="exTax"></p>
  <p>税込価格:<input type="text" v-model="inTax"></p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    exTax: 100
  },
  computed: {
    inTax: {
      get: function(){
        return parseInt(this.exTax * 1.1);
      },
      set: function(val){
        this.exTax = Math.ceil(val / 1.1);
      }
    }
  }
});

watch

監視プロパティ。特定のプロパティの値の変更を監視し、変更時に設定した関数を実行

<div id="app">
  <input type="text" v-model="email">
  <div v-if="error.email">{{ error.email }}</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    email: '',
    error: {}
  },
  watch: {
    email: function(value){
      if(value === ''){
        this.error.email = '必須必須です';
      }else{
        this.error.email = '';
      }
    }
  }
});

template

文字列,HTMLコードをテンプレート化する。コンポーネント機能と共に使用

<div id="app">
  <my-component></my-component>
</div>
Vue.component('my-component', {
  template: '<p>Hello</p>'
});
var vm = new Vue({
  el: '#app'
});

props

コンポーネント機能でデータを参照する

<div id="app">
  <my-component value="Hello"></my-component>
</div>
Vue.component('my-component', {
  props: [ 'value' ],
  template: '<p>{{ value }}</p>'
});
var vm = new Vue({
  el: '#app'
});

created

インスタンスが作成された後(DOMは生成されていない)に実行するオプション

<div id="app">
  <p>{{ hoge }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  },
  created: function(){
    console.log(this.$el)
  }
});

mounted

DOMが生成された後に実行するオプション

<div id="app">
  <p>{{ hoge }}</p>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  },
  mounted: function(){
    console.log(this.$el)
  }
});

ディレクティブ

v-text

テキストデータを出力

<div id="app">
  <div v-text="hoge"></div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  }
});

v-html

HTMLデータを出力

<div id="app">
  <div v-html="hoge"></div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: '<p>Hello</p>'
  }
});

v-show

条件分岐(createdフックは最初のみ実行)

<div id="app">
  <input type="radio" name="app-rad" onclick="vm.rad=true" checked>
  <input type="radio" name="app-rad" onclick="vm.rad=false">
  <div v-show="rad">Hello</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    rad: true
  }
});

v-if, v-if-else, v-else

条件分岐

<div id="app">
  <input type="radio" name="app-rad" onclick="vm.rad='A'" checked>
  <input type="radio" name="app-rad" onclick="vm.rad='B'">
  <input type="radio" name="app-rad" onclick="vm.rad='C'">
  <div v-if="rad=='A'">Perfect</div>
  <div v-else-if="rad=='B'">Great</div>
  <div v-else>Good</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    rad: 'A'
  }
});

v-for

ループする

<div id="app">
  <ul>
    <li v-for="vmItem in vmList">{{ vmItem }}</li>
  </ul>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    vmList: [ 'List1', 'List2', 'List3' ]
  }
});

v-on, @

イベントを処理する

<div id="app">
  <input type="checkbox" @input="change" checked>
  <div v-show="rad">Hello</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    rad: true
  },
  methods: {
    change: function(e) {
      this.rad = e.target.checked
    }
  }
});

v-bind, :

HTMLの属性を指定する

<div id="app">
  <div v-bind:style="{color: colorRed}">Hello</div>
  <div :style="{color: colorBlue}">Hello</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    colorRed: 'red',
    colorBlue: 'blue'
  }
});

v-model

入力データと指定したデータをリンクする

<div id="app">
  <input type="text" v-model="hoge">
  <div>{{ hoge }}</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  }
});

v-pre

{{}}をそのまま表示する

<div id="app">
  <div>{{ hoge }}</div>
  <div v-pre>{{ hoge }}</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  }
});

v-cloak

{{}}が表示されるのを防ぐ(最初に表示される事がある)

<div id="app">
  <div v-cloak>{{ hoge }}</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  }
});

v-once

レンダリングを一度だけ実行(データの変更を適用しない)

<div id="app">
  <input type="text" v-model="hoge">
  <div v-once>{{ hoge }}</div>
  <div>{{ hoge }}</div>
</div>
var vm = new Vue({
  el: '#app',
  data: {
    hoge: 'Hello'
  }
});

グローバル設定

silent

警告,エラーメッセージの表示,非表示を指定する

Vue.config.silent = true;