Vue.js私的備忘録まとめ

Vue.jsの私的なまとめです。

テンプレート

私的テンプレ

import XxxComponent from './components/XxxComponent'
import xxxMixins from './mixins/xxxMixins'

new Vue({
  el: '#app',
  components: {
    'xxx-component': XxxComponent
  },
  props: {
    item: {
      type: Object,
      required: true,
      default: () => {
        return {
          data: []
        }
      }
    }
  },
  data () {
    return {
      title: 'タイトル',
      item: []
    }
  },
  created () {
    //
  },
  mounted () {
    //
  },
  watch: {
    item (value, oldValue) {
      //
    },
    item: {
      handler (value, oldValue) {
        //
      },
      deep: true
    }
  },
  computed: {
    xxx (param) {
    }
  },
  methods: {
    /**
     * 説明
     * @param {string} param 内容
     * @return {string} return 内容
     */
    xxx (param) {
    }
  },
  mixins: [xxxMixins]
})

el

elはマウントする要素

el: '#app'

el: '#app'としたらHTMLのid="app"の中にVue.jsで使いたいHTMLを書く

<div id="app">
  // 中略
</div>

data

dataはvue.jsで使うデータを定義する

data () {
  return {
    title: 'タイトル',
    list: {
      data: []
    }
  }
}

マスタッシュ構文

• HTMLの中に{{ }}でdataやcomputedを表示させる
• $dataを付けるとdataやcomputedと区別が付きやすくなる

data () {
  return {
    text: 'タイトル'
  }
}

<h1>{{ $data.text }}</h1>

v-for

v-forで配列からHTMLにループ処理ができる

data() {
  return {
    list: [ 'りんご', 'ばなな', 'すいか' ]
  };
}

<ul>
  <li v-for="item in $data.list">{{ item }}</li>
</ul>

v-model

<input type="text" v-model="$data.text">

v-text

<p v-text="$data.text"></p>

v-if

• v-if="!error"
• v-if="text !== 'OK'"などの書き方もできる

<div v-if="error">
  <p>エラー</p>
</div>

v-show

<div v-show="error">
  <p>エラー</p>
</div>

v-ifとv-showの違い

• v-showはCSSのdisplay要素が変わる
• v-ifはHTML要素が変わる
• 頻繁に変わる場合はv-showを使う

created

• createdはelとDOM作成前

created () {
  // 処理
}

mounted

• mountedはDOM作成後

mounted () {
  // 処理
}

createdとmountedの違い

• createdはelとDOM作成前
• mountedはDOM作成後
• 詳しくはライフサイクルダイアグラムを参照
  • https://jp.vuejs.org/v2/guide/instance.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%80%E3%82%A4%E3%82%A2%E3%82%B0%E3%83%A9%E3%83%A0

watch

• watchは変更があったら処理される
• 第1引数が変更後の値
• 第2引数が変更前の値

watch: {
  item (value, oldValue) {
    // 処理
  }
}

• 配列はhandlerを使う
• deepネストされた値もみる

watch: {
  item: {
    handler (value, oldValue) {
      // 処理
    },
    deep: true
  }
}

computed

• computedはキャッシュされる

computed: {
  xxx (param) {
    // 処理
  }
}

methods

• methodsにはJSDocを入れる

methods: {
  /**
   * 説明
   * @param {string} param 内容
   * @return {string} return 内容
   */
  xxx (param) {
    // 処理
  }
}

mixins

• 他のファイルからインポートできる
• 共通部分などに使う

import xxxMixins from './mixins/xxxMixins'

new Vue({
  mixins: [xxxMixins]
})

components

<xxx-component>

import XxxComponent from './components/XxxComponent'

new Vue({
  components: {
    'xxx-component': XxxComponent
  },
})

props

• componentsに受け渡す値を定義する
• type:型
• required:必須かどうか
• default:初期値

props: {
  item: {
    type: Object,
    required: true,
    default: () => {
      return {
        data: []
      }
    }
  }
}

template

import template from './templates/XxxTemplate.html'

export default {
  template: `
    <div>
      <p>test</p>
    </div>
  `
}

• templateは別ファイルにすることができる
• HTMLを分けたほうがHTMLの可読性が良くなる

import template from './templates/XxxTemplate.html'

export default {
  template: template
}

$emit

• 親コンポーネントにmethodsを動かす

action (param) {
  this.$emit('change-emit', param)
}

<xxx-component  
  @change-emit="action"
></xxx-component>

axios

• Ajaxで使う

getData () {
  const action = '/api/'
  const params = {
    params: 'xxx'
  }
  axios.get(action, params)
    .then(response => {
      // 成功時
    }).catch(error => {
      console.error(error)
      // エラー時
    })
}

transition

• transitionはアニメーションと使うことができる

<transition name="fade">
  <div v-show="error">
    <p>エラー</p>
  </div>
</transition>

• CSSが必要

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to　{
  opacity: 0;
}