#39 Vue.jsアウトプット

Vueインスタンス

//HTML//
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
<div id="app1">
  <p>{{message}}</p>
</div>
<div id="app2">
  <p>{{message}}</p>
  <button @click="changeMessage1">インスタンス1を変更</button>
</div>

//JavaScript//
var vm1 = new Vue({
  el: '#app1',
  data: {
    message: 'インスタンス1'
  }
})
var vm2 = new Vue({
  el: '#app2',
  data: {
    message: 'インスタンス2'
  },
  methods: {
    changeMessage1: function() {
   	  vm1.message = 'インスタンス2に変えました。'
    }
  }
})

・JavaScript1〜6行目、7〜11行目の様に、複数記述可能。
・Vueインスタンスの外側からVueインスタンスにアクセスするためには、JavaScriptファイル1行目の "var vm1 = new Vue({" の様に、変数を代入する事でアクセス出来る様になる。JavaScript14行目で、変数 "vm1" を呼び出しているが、"変数.dataで使用する内容" と記述する。 
・Vueインスタンスの内側からVueインスタンスへアクセスするためには、 "this.dataで使用する内容" を記述する。

リアクティブシステム

・ "値が監視され、変更が検知される状態のこと" を指す。
・ "data" にリアクティブにしたいデータを記述することで使用する事が出来る。dataに記述がないとテンプレート構文にリアクティブの処理が反映されない。
・ "ゲッター" は、変数が参照された時に関数を実行する。
・ "セッター" は、data内容が書き変わった時に関数を実行する。
・Vue.jsは各プロパティにゲッターとセッターを付与する。検証ツールの "consol" を参照するとゲッターとセッターが記述されている事が確認出来る。
・ゲッターとセッターが設定されていない = リアクティブにならない。リアクティブにするためには、dataに記述する必要がある。

早いものでプログラミングスクールのカリキュラムが終了し、転職活動を初めて1ヶ月がたとうとしてます。少しずつにはなりますが進展もしております。日々自分と向き合いながら、プロフィールや面談対策、ポートフォリオをブラッシュアップし、納得のいく転職が出来るようにしていきます😇

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

※本日時点で学習した内容を備忘目的で投稿しております。各項目を全て網羅している内容では無いため、「駆け出しが張り切ってアウトプットしてるな〜」程度で温かい目で読んで頂けると幸いです😇

■参考教材
Udemy　超Vue.js2　完全パック