#37 Vue.jsアウトプット

こんにちは、hiroです😃
本日も学習した内容をアウトプット（備忘用として）したいと思います。各項目は学習時点でのアウトプット内容となりますため、各項目の詳細を全て網羅は出来ておりません。ある程度学習が進んだ段階で、投稿内容をアップデートします！

ウォッチャ

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
<p>{{ counter }}</p>
  <button @click="counter += 1">+1</button>
  <p>{{ lessThanThree }}</p>
</div>

//JavaScript//
new Vue({
  el: '#app',
  data: {
    counter: 0
  },
  computed: {
    lessThanThree: function() {
  	  return this.counter > 3 ? '3より上' : '3以下';
    }
  },
  watch: {
    counter: function() {
  	  const vm = this;
      setTimeout(function(){
        vm.counter = 0
      }, 3000)
    }
  }
})

・特定の "data" や "computed（算出プロパティ）" の状態を監視して、何か変化があった時に予め登録しておいた処理を自動的に実装する仕組み。
・ウォッチャは "非同期" の処理を記述する時に利用する事が多い。
・JavaScriptファイル11〜18行目は "3秒後にクロージャを実行する" 様に記述している。今回はカウンターを3秒後に0に変更する。
・非同期処理の場合、"this.○○" の様な記述が出来ないため、JavaScriptファイル13行目の様に、 "thisを変数に代入" する事で使用出来る様に記述する。

条件付きレンダリング

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <p v-if="ok">OK!</p>
  <p v-else-if="maybeOk">maybe OK!</p>
  <p v-else>Not OK...</p>
</div>

//JavaScript//
new Vue({
  el: '#app',
  data: {
    ok: false,
    maybeOk: false
  }
})

・"v-if" を活用する。
・上記記述の場合、処理結果としては、「Not OK...」が表示される。
・記述の注意点としては、"v-ifの直下にv-else-ifやv-elseを記述" しないと条件式が反映されない。

templateタグ

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app">
  <template v-if="ok">
    <p>Hello</p>
    <p>Good Bye</p>
    <p>おはよう</p>
  </template>
  <button @click="ok= !ok" >ボタン</button>
</div>

//JavaScript//
new Vue({
  el: '#app',
  data: {
    ok: true
  }
})

・v-if等、グループを条件分岐させたい時に使用するタグ。
・検証ツールで確認すると、templateタグは表示されない。

最近プログラミング言語のアウトプット投稿に偏ってしまっているため、時間を作って他の記事も投稿していこうと思います😇

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