$emitとは親コンポーネントのイベントを発火させる起動スイッチのようなもの。それに便乗して値を渡す。 つまり、カスタムイベント（ここではmy-click）を作れるメソッド。 子コンポーネント側（クリック時の例） <button @click="incriment"></button> export default { methods: { incriment() …

親コンポーネント側 子のtotal-number属性として値を渡す <Child :total-number="number"></Child> // Child.vueに渡す export default { data() { return { number: 10 } } } 子コンポーネント（Child.vue）側 totalNumberとして受け取る <p>{{ totalNumber }} export default { props: { 'totalNumbe</p>…

配列 v-for="要素 in 配列" :key="要素" <li v-for="fruit in fruits" :key="fruit">{{ fruit }}</li> // 第二引数として配列のインデックスをとることも可 data: { fruits: ['apple', 'mango', 'banana'] } apple mango banana オブジェクト v-for="value in オブジェクト" <li v-for="value in object" :key="value">{{ value }}</li> // 第二引数として…

computed: リアクティブな依存関係が更新されたときのみ実行される。 method: リアクティブな値の更新とか関係なく、再描画＝ページの内容が少しでも変わるたびに実行されてしまう。

バインドした値がtrueの時のみ要素を表示させる。 v-if 切り替えのコストが大きい。 <p v-if="ok"> <p v-else-if="maybe-ok"> <p v-else> data: { ok: true maybe-ok: false } v-show v-ifと同じ挙動だが、頻繁に何かを切り替える処理に適する templateタグ内で使えない 初期描画のコストが大きい v-ifは要素</p></p></p>…

ブラウザからの入力値をdataと紐付ける（バインドする） <template> <input v-model="message"> // 入力値がmessageに代入される <h1>{{ message }}</h1> // messageが表示される </template> <script> data: { message: "こんにちは" } // デフォルト値 イベント修飾子 v-model.lazy="message" // フォームからフォーカスが…

特定のイベントが起こったときにメソッドを発火させる <a v-on:DOMイベント="処理内容 or メソッド"> <a @DOMイベント="処理内容 or メソッド "> // 省略形 メソッド内でイベントオブジェクト（$event）を取得する <p @mousemove="changeMousePosition($event, number)" > // イベント引数以外の引数をとるときは$マークをつける changeMousePosition(event, number) { this.x = event.clientX / number </p></a></a>…

各HTML要素の属性と値を動的に指定する <a v-vind: "twitterObject"></a> data: { twitterObject: { href: 'https://twitter.com' id: 32 } } 省略した記法 <a :href="url"></a> <a :[attribute]="https://example.com"></a> data: { url: 'https://example.com' attribute: 'href' }