Vue3 備忘録：さらっと学んだだけでは忘れそうなことをメモる

属性のフォールスルー

v-for

リストレンダリング

• 普通の書き方

<li v-for="item in items"></li>

• JavaScriptの構文に近い書き方

<li v-for="item of items"></li>

• 第二エイリアスでインデックス取得

<li v-for="(item, index) in items"></li>

• Vue公式：key属性は推奨（一意に識別できるなら何でもいいっぽい）

<li v-for="(item, index) in items" :key="index"></li>

オブジェクトのリストレンダリング

// 第二エイリアスはプロパティ名（いわゆるキー）が取得できる
<li v-for="(value, key, index) in object" ></li>

// 各プロパティの値は自動的にpropsに渡されないので明示的に渡す
<li v-for="value in object" :id="value.id"></li>

ミューテーションメソッド

• 配列の並び替えメソッドが呼び出された時もVueは変更を検知する
• push、pop、sort、reverseなど
• Vue`は配列全体を再描画しようとはせず、できるだけ古いものを再利用する

v-onまたは@

インベントハンドル

v-onの基本

• ネイティブのインベントオブジェクトを受け取ることができる

function hello(event) { // 1. 引数で受け取って
  // 2. いつも通り使える
  console.log(`Hello, ${event.target.value}!`); // => "Hello, Adamska!"
}

<button @click="hello" value="Adamska">Say Hello</button>

• 引数付きで関数が渡せる

<button @click="hello('Ocelot')">Say Hello</button>

• アロー関数も渡せる

<button @click="() => console.log('Hello, Zero!')">Say Hello</button>

• 引数付きでもイベントを取得

funtion prevent(message, event) {
  if(event) {
    event.preventDefault();
  }
}

<button @click="prevent("I'm preventing.", $event)">Say Hello</button>

イベント修飾子⭐️

イベントのデフォルト動作を阻止したり、イベントの範囲を限定するのに使う

// クリックイベントの電波を阻止
<a @click.stop="hello">Say Hello</a>

// サブミットイベントのページリロードを阻止
<form @submit.prevent="onSubmit"></form>

// 繋げて書く
<a @click.stop.prevent="hello">Say Hello</a>

// ただの修飾子として
<a @click.stop>Say Hello</a>

//event.targetが当の要素自身の時だけprevent
<div @click.self.prevent="doSumthing"></div>

now loading...