vue

lifecycle hook

beforeCreated, created, mounted, updated, unmounted

created、mountを多く使用します.

createは、構成部品を作成した後です.

マウントはhtmlに接続した後です.

テンプレート構文

補間法

{msg}とともに使用します.

v-onceインジケータを使用すると、データが変化しても、最初の配布後は更新されません.

computed

メソッドを追加すると、計算が返される形式を使用できます.

演算状態に格納されたキャッシュ機能を使用することができる.

computed: {
  reversedMessage: {
    get(){
      return this.masg.split('').reverse().join('')
    },
    set(value){
      this.msg = value
    }
  }
},
methods: {
  add(){
   this.reversedMessage += '!?'
  }
}

watch

データを監視し、変更後に実行します.

入力をmethodパラメータのデータ値に変更します.

クラスとスタイルのバインド

v-bind:class="{ active: isActive }"@click="activate"

isActiveがtrueの場合、クラスにactiveを追加します.

htmlのクラス名はdash-case、snake caseを使用するべきです.

<div :class="classObject"></div>

data(){
  return {
    classObject: {
      active:true,
      'text-danger': false,
    }
  }
}

data(){
  return {
    active: true,
    error: null,
  }
},
computed : {
  classObject(){
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'false'
    }
  }
}

条件文

if文で条件文を作成します.

templateラベルを使用するとif文を整理でき、htmlへの露出を回避できます.

<template>
  <button @click="handler">
    Click me!
  </button>
  <template v-if="isShow">
    <h1>Title</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
</template>
<script>
export default {
  data(){
    return {
      isShow: true,
      count:0
    }
  },
  methods: {
    handler(){
      this.isShow = !this.isShow
      this.count += 1
    }
  }
 }
}
</script>

v-if vs v-show

v-showはfalseyではdisplay:none状態として表示されません.

v-showはtemplateでは使用できません.表示されません.

v-ifは実際の条件レンダリングであり、値がfalseyの場合、何もレンダリングされないことを示します.

v-if変換はコストが高く、v-show初期レンダリングはコストが高い.

頻繁に切り替える必要がある場合は、v-show(切り替え)

実行時の条件が変わらない場合、v-if(page)