#38 Vue.jsアウトプット

こんにちは、hiroです😃
最近気温の変化が激しいですね。ようやく夏服にシフト出来たかと思えば、昨日から気温が20℃を下回り春先に来ていたパーカーをまた着ております🙄皆様、季節の変わり目なので体調には十分気をつけてくださいね！

本日も学習した内容をアウトプットしていきます。本日時点での学習内容のため、各項目に対して全て網羅している訳では無いです。。。
「駆け出しが張り切ってアウトプットやってんな〜」くらいの気持ちで読んで頂けるとありがたいです😂

v-showディレクティブ

・"v-if" と同じ挙動を出力する事が出来るディレクティブ
・v-ifとv-showの違いは以下。
　v-if：falseの時、HTMLから要素ごと削除される
　v-show：falseの時、css styleの "display:none" で消去。HTML要素としては存在。
・v-showでは "templateタグ" が使用出来ない。
・v-showは "v-else" と連動していないため、falseの時に別のものを表示させることが出来ない。
・切り替えの頻度が少ない時は "v-if" を、切り替え頻度が多い時は "v-show" を使用する。
参考URL：https://qiita.com/tsukiyama3/items/7d7a7803bcf4e1b10202

v-forディレクティブ

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="fruit in fruits">{{fruit}}</li>
  </ul>
</div>

//JavaScript//
new Vue({
  el: '#app',
  data: {
    fruits:['りんご', 'バナナ','ぶどう']
  }
})

・"配列" や "オブジェクト" を "リストレンダリング" させるときに使用。
・HTML4行目 "<li v-for="fruit in fruits">" にある様に、レンダリングさせたい配列やオブジェクト（今回でいうと"fruits" ）を右側に記述する。左側に記述名（今回でいうと "fruit" ）は、慣例的に "配列の単数系" を記述する。
・第二引数でindexを取得する事も出来る。

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">({{index}}){{key}}{{value}}</li>
  </ul>
</div>

//JavaScript//
new Vue({
  el: '#app',
  data: {
    object: {
   	  firstname: '太郎',
      lastname: '田中',
      age: 21
    }
  }
})

・JavaScript4〜8行目の記述で、"オブジェクト" もv-forで取得する事が出来る。
・HTML4行目の記述で、オブジェクトの第二引数は "index" では無く、 "キー" を取得する。indexを取得する場合、 "第三引数" で取得する。
・ "キーディレクトリ" を活用する。
・v-forを使用時 、"キー属性" を活用する事で要素に一意の値を与える。キー属性を活用する時は、 "divタグ" を使用する。"templateタグ" は使用出来ない。

Vue.jsの基本的な部分が理解出来ていないため基礎を一通り学習してますが、プログラミング言語を習得するときは、 "パラシュート学習法" がオススメです。"必要なことを必要なときに都度学ぶ" ＝ "作りたいものを決めて取り掛かり、不明点があればその都度調べる" 自分にとって本当に必要な情報のみを取得し、理解度が格段にアップします。
参考URL：https://qiita.com/nakazax/items/e768534d89e282598975

本日も最後まで読んで頂き、ありがとうございました🙇‍♂️