![見出し画像](https://assets.st-note.com/production/uploads/images/52174302/rectangle_large_type_2_51289f88b694cb6e9773d9fe512a438b.jpeg?width=1200)
#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 完全パック
この記事が気に入ったらサポートをしてみませんか?