🐉 教材2回目を通しての気付きと不明点
作成日: 2022/01/30
2

1回目では気づかなかった、記述の細かい点の深堀ができる。

1回目は全体像が分からないので、書くので精一杯だったが、2回目は既にどんなものが成果物として出来上がるか把握できているので、【コンポーネントの細かい仕様】や【Vue.js独特の書き方】、【JavaScript文法】について深堀ができる。
「こんな書き方があるのか」と深堀できて、不明点は調べたり聞いて理解することができる。
理解できる点もあれば、理解できない点もある。

v-onで指定するのはコールバック関数

v-on:click="xxxx"でxxxxに入るのは
addEventListenerに入るコールバック関数の中身である。

例: removeCardFromListは関数である

<template>
  <div class="card">
      <button class="close-button" @click="removeCardFromList">×</button>
      <div class="body">
          {{body}}
      </div>
  </div>
</template>

<script>
export default {
    props: {
        body: {
            type: String,
            reqired: true
        },
        listIndex: {
            type: Number,
            required: true
        },
        cardIndex: {
            type: Number,
            required: true
        }
    },
    methods: {
        removeCardFromList() {
            if(confirm('本当にこのカードを削除しますか?')) {
                this.$store.dispatch('removeCardFromList', {
                    cardIndex: this.cardIndex,
                    listIndex: this.listIndex
                })
            }
        }
    }
}
</script>

<style>

</style>

不明点

computedとmethodsの違い

リアクティブなデータで変更頻度の多いものがcomputedに記載されている。
(例 フォーカスイン・フォーカスアウトでclassを追加・削除する(ボタンの活性化・非活性化、フォームの色変)
getter, setterがそれに関わっている?

mutations, actionsの書き方

JavaScriptの文法に関わっている?
第二引数(payloadなど)を使うタイミングなど


事業会社にてコーダーをしています。制作は6年目。 インプットしたことをアウトプットしています。