Vue.js 基本
Vueのコンポーネントが持てる主なプロパティ
| プロパティ | 役割 |
|---|---|
| el | コンポーネントのインスタンスをどのHTML要素に結びつけるかを定義する |
| data | コンポーネントが保持するデータを定義する |
| methods | コンポーネントが持つメソッドを定義する |
| filters | コンポーネントが持つフィルターを定義する |
| computed | コンポーネントが持つ算出プロパティを定義する |
| watch | コンポーネントが持つウォッチャを定義する |
| （ライフサイクルハック） | コンポーネントが持つライフサイクルハックを定義する |
コンポーネントのライフサイクルハック
| ハック名 | 発生するタイミング |
|---|---|
| beforeCreate | コンポーネントのインスタンスが生成された直後 |
| created | コンポーネントのインスタンスが生成され、Vueがコンポーネントのリアクティブデータを監視する準備が終わったとき |
| beforeMount | コンポーネントのインスタンスがDOMと結びつく直前 |
| mounted | コンポーネントのインスタンスがDOMと結びついた直後 |
| beforeUpdate | コンポーネントが持つリアクティブデータが更新され、DOMに反映される直前 |
| updated | コンポーネントが持つリアクティブデータが更新され、DOMに反映された直後 |
| beforeDestroy | コンポーネントのインスタンスが破棄される直前 |
| destroyed | コンポーネントのインスタンスが破棄された直後 |
レンダリング
| 目的 | 書式 | 具体例 |
|---|---|---|
| テキストにバインドする | {{ プロパティ名 }} |
【HTML】 <div id="app"> {{message}} </div> 【JavaScript】 var app = new Vue({ el: '#app', data: { message: 'こんにちは！' } }); |
| 属性にバインドする | <要素名 v-bind:属性名="プロパティ名"> |
【HTML】 <div id="app"> <input type="text" v-bind:value="message"> <div> 【JavaScript】 var app = new Vue({ el: '#app', data: { message 'こんにちは！' } }); |
|
スタイル属性にバインドする ※CSSのプロパティ名はキャメルケースに変更する |
<要素名 v-bind:style="{CSSのプロパティ名: アプリケーションのプロパティ名}"> |
【HTML】 <div id="app"> <p v-bind:style="{{fontSize:pSize}}"> 文字サイズは{{pSize}}です。 </p> </div> 【JavaScript】 var app = new Vue({ el: '#app', data: { pSize: '40px' } |
| クラス属性にバインドする | ||