Vue.js メモ

雑なメモ

<div id="anime">
<my-anime :anime="'new game'"></my-anime>
<my-anime :anime="'攻殻機動隊'"></my-anime>
<my-anime :anime="'シュタゲ'"></my-anime>
</div>

</script>
Vue.component('my-anime', {
props: ['anime'],
template: '<li> {{ anime }}</li>'
})
new Vue({
el: '#anime',
})
</script>

・{{}} → マスタッシュ構文

・v-bind 

・v-if/else

・v-for → 変数名 in 配列名 で複数回

・v-on →イベントがあったとき(イベントハンドラ) (@clickで省略)

・v-model → 双方向バインディング (v-bindとv-onをまとめたもの)

・Vue.component → 再利用して描画するイメージ

・computed → methodでも可。計算できる → キャッシュが残るかどうかが違う

・watch → 監視プロパティ(非同期通信)

・v-show → display: none;になっているだけ → 表示/非表示をする時はv-show

・v-bind:class → クラスのバインディング

     // キャメルケース
      active: { backgroundColor: 'pink'　},
      // ケバブケース
      passive: { 'background-color': 'lightblue'　}

 シングルクォーテーションで囲む

・イベントハンドリング