Vue勉強 @vue:mounted, @blur

公式ドキュメントのコード読んでて、これどういう意味なのかさっぱり分からんというのが出てきたので調べた。

公式ドキュメントのexamplesのtodoリストのサンプルコード

の一部

html

          <input
            v-if="todo === editedTodo"
            class="edit"
            type="text"
            v-model="todo.title"
            @vue:mounted="({ el }) => el.focus()"
            @blur="doneEdit(todo)"
            @keyup.enter="doneEdit(todo)"
            @keyup.escape="cancelEdit(todo)"
          >

ここの @vue:mounted とか、 @blur ってどういう意味なの？と思って調べた。

@keyup.enter　は、字面的におそらくエンターキー押したら起動かな？と予想（あってた）。

---

そもそも、 @hoge と、に頭に@がつくのは、
v-onを省略した形だった。（忘れてた）

v-on:click="handler"、あるいは省略して @click="handler" として使用します。

@blur

@blurはフォーカスを外した時のイベント
対で、@focusが、フォーカスした時。
https://qiita.com/shizen-shin/items/17094a68a0369e126d41

@vue:mounted

@vue:mounted については、全く同じ疑問を持ってる人がいた(笑)

not in the official doc but i found it in the migration guide

https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html

公式ドキュメントのコードなのに「公式ドキュメント内に（解説）ない」とかコメント付いてる。。

彼がコメントしてくれてる、このマイグレーションドキュメントの中にあった！
https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html

（有り難し。イイね👍押しました。）

vue2 と vue3ではライフサイクルイベントの書き方が違っていて、
vue2では、こうやって書いていたけど、

html

<template>
  <child-component @hook:updated="onUpdated">
</template>

vue3では、こうやって書くらしい。頭に@vue:をつける。

html

<template>
  <child-component @vue:updated="onUpdated">
</template>

ライフサイクルは、mounted以外にもupdated、createdとか色々あるらしい。
mountedは、
「インスタンスがDOMにマウントされた後に実行されるフック」とのこと。