飴屋

Vue.js/Vue 3でいろいろ変わってた

（5年くらい浦島太郎だった前提で書いてます。Vue 3で変わったこと、Vue 2で変わったこと、そもそも備わっていたけど知らなかっただけのことなど雑多に記します。2023.6）

CDN使うのが一般的になったみたい

クラウド隆盛時代を経て、ライブラリのソースみたいなものは同じところからもらってくればよいし、効率的、という考えが広まりましたね。 

<!-- 開発版 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<!-- 利用版 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>

Vue公式でもそうしてたので真似します。あとはnode.jsみたいなツールもかなり利用されていて「Vue アプリケーションをビルドする」という成果物の作り方もあるようです。コンポーネントみたいにして再利用や配布がやりやすくなるんでしょうね。とりあえず今回は勝手知ったる方法でライブラリ的に読み込んで使いましょうか。JavaScriptにもたくさん変化があって、ES Modulesの仕組みを使う方法も紹介されていましたが、import文の話も今はやめときましょう。（名前空間が汚れても大丈夫なプロダクト規模だし。）

アプリの作り方

const app = Vue.createApp({
  data() {
    return {
      count: 0,
    }
  },
});
app.mount('#app');

createApp っていうメソッドが提供されてた！そして操作対象のDOMにmountっていうメソッドでマウントするって公式に書いてあった！前はnew Vue してelって名前で操作対象を渡してた気がします。やってることは同じですが、メソッドを介することで役割分担がわかりやすくなっている気がしますし、何か新しい機能が追加されやすくなっている予感がします。

省略記法

v-bindは利用頻度が高いので省略できるそうです。v-on:も@に省略できるようです。 

<a v-bind:href="url" v-on:click="doSomething">Link</a>

<!-- 省略記法 -->
<a :href="url" @click="doSomething">Link</a>

多分、ちゃんと理解していれば手数が減るので生産力が上がるはずです。HTML的に見慣れない記号で始まるアトリビュートが増えて、知らない人が見たら目を丸くしそうな気はしますが、Vue はそういうものと割り切るしかないかな。

マスタッシュ構文と生HTML

<div>{{ plaintext }}</div>

テンプレート構文として何気なく使っている二重の中括弧記法にはマスタッシュ構文という名前がついてるそうです。マスタッシュ・・・中カッコが髭にみえたってことか。 

<div>{{ html}}</div>

ここにHTMLのタグを含めようとしたら、タグの山カッコがエスケープ処理されて、そのままタグが見える状態で画面に出力されました。エスケープしてくれた方が意図せぬインジェクション攻撃に強くていいですね。でも、HTMLを直接挿入したいのです。 

<div v-html="html"></div>

v-htmlというディレクティブを使うべし！とのことでした。v-で始まるVueの特別な属性をディレクティブと呼ぶらしい。

Vue.js記事一覧

Last-Modified