<input v-model="eventData.title"> // は <input :value="eventData.title" @input="eventData.title = $event.target.value"> // と同じ data(){ return { eventData: { title: "foo" } } } 入力が行われた時(@input)にinputイベントにおける入力値($event.target.value)がプロパティ(eventData.title)に代入され、かつそれがフォーム内の値として表示される フォーム部分をコ…

// フォーム <input v-model="eventData.detail" id="detail"> // 複数行フォーム <textarea v-model="eventData.detail" id="detail" cols="30" rows="10"> // チェックボックス <input type="checkbox" v-model="eventData.isPrivate" id="isPrivate"> // 複数のチェックボックス <input type="checkbox" v-model="eventData.target" id="30" value="30代…</textarea>

// :isに渡した文字列のコンポーネントに変わる <component :is="currentComponent"></component> <button @click="currentComponent = 'Home'"></button> <button @click="currentComponent = 'About'"></button> // ボタンで切り替え このままでは切り替えるたびにコンポーネントがcreated/destroyedされるが、keep-aliveタグによってそれを防げる（activated/deactivatedになる） <keep-alive> </keep-alive>

子のslotタグで指定した属性は、親のv-slot属性でスロットプロパティ（ここではslotProps）を渡すことで使える 親コンポーネント <Child> <template v-slot:title="slotPlops"> <h1>いいね数</h1> <h2>{{ slotPlops.user.firstName }}</h2> </template> </Child> 子コンポーネント <div> <slot name="title" :user="user"></slot> </div> data() { return { user: { firstName: "gelard" デフ…

名前付きスロット v-slotで名前付きスロットにすれば、複数のslotを利用して複雑なデータを渡すことができる。 親コンポーネント側 templateタグ内でv-slotを使う <Child> <template v-slot:title> <h1>いいね数</h1> <h2>{{ number }}</h2> </template> </Child> <template #title> // 省略形 子コンポーネント側 name属性の値をv-slotの値にする <div> <slot name="title"></slot></div></template>…

親コンポーネント側 子コンポーネントのタグで囲んだ要素が渡される。 <Child> <h1>いいね数</h1> <h2>{{ number }}</h2> </Child> 子コンポーネント側 渡された要素がslotタグの箇所に表示される。 <div> <slot>フォールバックコンテンツ</slot> // フォールバックコンテンツ：親から渡される要素がない時に表示</div>…

$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' }