- 算出プロパティはリアクティブな依存関係にもとづきキャッシュされる
- リアクティブな依存関係が更新されたときにだけ再評価される
- 実行の度に現在時刻を返すなどの場合はメソッドを使うのが望ましい
- メソッド呼び出しは再描画が起こると常に関数を実行する
- キャッシングの必要がないかつ、巨大な配列をループしたり多くの計算を必要とする場合はcomputedを使う。
<!-- クリックイベントのバブリングをしない -->
<a v-on:click.stop="doThis"></a>
<!-- submitイベントで画面遷移しない -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修飾子は繋げて書ける -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 値を指定せず修飾子だけの指定が可能 -->
<form v-on:submit.prevent></form>
<!-- キャプチャリングを使用する。内部要素を対象とするイベントはその要素によって処理される前にここで処理される -->
<div v-on:click.capture="doThis"></div>
<!-- event.targetが要素自身のときだけイベントハンドラが呼び出される。子要素の時は呼び出されない。 -->
<div v-on:click.self="doThat"></div>DOM上で直接コンポーネントを使用する場合の命名は W3C rules に従ったカスタムタグ名(小文字のチェーンケース)を推奨
Vue.component('sample-a', {/*...*/});
Vue.component('sample-b', {/*...*/});
Vue.component('sample-c', {/*...*/});
// これらは全てグローバルに定義されているため定義後に作成された全てのVueインスタンスのテンプレート内で使用できる
new Vue({el: "#app"})<div id="app">
<sample-a></sample-a>
<sample-b></sample-b>
<sample-c></sample-c>
</div>ローカルとして定義する場合
const componentA = {/*...*/}
const componentB = {/*...*/}
const componentC = {/*...*/}
new Vue({
el: '#app',
components: {
'component-a': componentA,
'component-b': componentB,
'component-c': componentC,
}
})
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent