Vue.jsの変数: 一覧と基本概念
Vue.jsにおける変数は、アプリケーションのデータを格納し、表示するための中心的な要素です。
今回は以下の変数の種類とそれらの基本的な利用方法について解説します。
| No | 変数名 | 説明 |
| 1 | data | Vueインスタンスのデータオブジェクト |
| 2 | computed | 算出プロパティ |
| 3 | methods | Vueインスタンスに関連するメソッド |
| 4 | props | 親コンポーネントから子コンポーネントにデータを渡す |
| 5 | watch | 特定のデータの変更を監視する |
アロー関数を徹底的に学びたい人向けです！画像をクリックしてご覧ください！
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
KindleUnlimited会員であれば、全ての本をご覧頂けます。 アロー関数と便利な関数を理解すれば、JavaScriptの世界が変わる
1. dataの詳細と使用例
Vue.jsの基本的な変数として「data」があります。
これはVueインスタンスのデータオブジェクトとして使用され、Vueインスタンスのライフサイクル内でリアクティブなデータとして動作します。
ソースコード例
|
1 2 3 4 5 6 |
new Vue({ el: '#app', data: { message: 'Hello, Vue.js!' } }) |
出力結果
Hello, Vue.js! 
サルモリ
「dataを使えば、簡単に画面にデータを表示させられるね！」
2. computedの詳細と使用例
「computed」は算出プロパティを表します。
これは、他の変数に基づいて動的に算出されるデータを提供します。また、依存するデータが変更された場合にのみ再評価されます。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 12 |
new Vue({ el: '#app', data: { firstName: 'Taro', lastName: 'Yamada' }, computed: { fullName: function() { return this.firstName + ' ' + this.lastName; } } }) |
出力結果
Taro Yamada サルモリ
「computedを使用することで、複数の変数を組み合わせて新しいデータを作成できるよ！」
3. methodsの詳細と使用例
「methods」はVueインスタンス内で使用する関数を定義する場所です。
ボタンのクリックイベントなど、特定の動作をトリガーとして実行させる関数をここで定義します。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 |
new Vue({ el: '#app', data: { count: 0 }, methods: { increment: function() { this.count++; } } }) |
サルモリ
「methodsを使えば、ユーザーのアクションに応じて関数を実行できるよ！」
4. propsの詳細と使用例
「props」は親コンポーネントから子コンポーネントへのデータの受け渡しを実現します。
親から子への一方通行のデータフローを持つことで、コンポーネント間のデータ管理が容易になります。
ソースコード例
|
1 2 3 4 5 6 7 |
Vue.component('child-component', { props: ['parentData'], template: '{{ parentData }}' }) // 親コンポーネントのテンプレート内 <child-component :parentData="message"></child-component> |
サルモリ
「propsを通じて、親子間で簡単にデータを共有できる！」
5. watchの詳細と使用例
「watch」はVueインスタンスの特定のデータの変更を監視し、変更があった際に特定のアクションをトリガーします。
例えば、入力フィールドの値の変更を監視して、それに応じた処理を実行する場面などで使用されます。
ソースコード例
|
1 2 3 4 5 6 7 8 9 10 11 |
new Vue({ el: '#app', data: { searchText: '' }, watch: { searchText: function(newVal, oldVal) { console.log('Changed from ' + oldVal + ' to ' + newVal); } } }) |
サルモリ
「watchを用いれば、特定のデータの変更をリアルタイムに監視できるよ！」
まとめ
この記事ではVue.jsの変数について、その基本概念と使用例を解説しました。
Vue.jsの変数をしっかりと理解し、実際の開発での活用に繋げることができると幸いです。
サルモリ
最後まで読んでくれてありがとう！！
