📓

vue.jsの練習④（公式チュートリアルstep-1～step-5の2周目）

2024/05/21に公開

Vue.js

tech

最初の予定通り、公式チュートリアルをComposition&SFCを用いて２周目を行う。
従来(Vue2)の型であるoptions & HTMLを使用したのは、練習①～③で行った。

computed,methodの違いについて勉強していたことが役に立ったので、復習も兼ねてComposition & SFCの勉強をしていこうと思う。

前回と同じ感じで進めながら、options&HTMLとComposition&SFCの違いについて言及していければ良いなと思う。

よく出てくる用語メモ

Vue Single-File Component (SFC)：ファイル内に記述された、一緒に属する HTML、CSS、JavaScriptをカプセル化する、再利用可能な自己完結型のコードブロックのこと

step-1　準備

<template>
  <h1>Hello World!</h1>
</template>

h1タグは同じだけど、<template>タグで挟む感じ。id指定は不要

ちなみに
options&HTMLでは以下のように書く

<div id="app">
  <h1>Hello World!</h1>
</div>

step-2　宣言的レンダリング

HTMLを拡張するテンプレート構文を使用して、JavaScriptの状態に基づいてHTMLがどのように見えるかを記述できる。その場合、状態が変化すると、HTMLは自動的に更新される機能。変化した場合に自動的に更新される状態をリアクティブとみなし、reactive()API を使用することで宣言可能である。

<template>
<h1>{{ message.split('').reverse().join('') }}</h1>
</template>

上記の内容を踏まえると、step-2は以下のようになる。

<script setup>
import { reactive, ref } from 'vue'

const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>

<template>
  <h1>{{ message }}</h1>
  <p>Count is: {{ counter.count }}</p>
</template>

step-3　属性バインディング

options & HTMLの場合と同様に、v-bindは専用の短縮構文があり、v-bindを記載しなくても同じ意味になる。

<h1 v-bind:id="dynamicId"></div>

上行と同じ意味である

<h1 :id="dynamicId"></div>

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')
</script>

<template>
  <h1 :class="titleClass">Make me red</h1>
</template>

<style>
.title {
  color: red;
}
</style>

template側はあまり変わらないが、script側のコードの行数や入れ子の関係が少ない分見やすく感じる

step-4　イベントリスナー

options & HTMLの場合と同様に、v-onにも専用の短縮構文があり、v-on:の代わりに@を記載すると同じ意味になる。

<button v-on:click="increment">{{ count }}</button>

上行と同じ意味である

<button @click="increment">{{ count }}</button>

関数内でrefsを変更することでコンポーネントの状態を更新可能である。
例えば、

const count = ref(0)
function increment() {
  count.value++
}

上記の内容を踏まえると、step-4は以下のようになる。

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">Count is: {{ count }}</button>
</template>

step-5　フォームバインディング

双方向バインディングのディレクティブ：v-model

<input :value="text" @input="onInput">

function onInput(e) {
  text.value = e.target.value
}

上のコードを以下１文で書くことができる

<input v-model="text">

<script setup>
import { ref } from 'vue'

const text = ref('')
</script>

<template>
  <input v-model="text" placeholder="Type here">
  <p>{{ text }}</p>
</template>

一言感想

業務でComposition&SFCを使うかは不明だが、Vue2のサポートが切れたため今後触れる機会もありそうなので、軽く勉強してよかったなと思う。今のところ、上記のような短いコードでも読みやすくなったと感じるが、かなり印象が変わりそうなので似ている別のフレームワークくらいで思っておくほうが良いのかもしれない。

GitHubで編集を提案

よく出てくる用語メモ

step-1 準備

step-2 宣言的レンダリング

step-3 属性バインディング

step-4 イベントリスナー

step-5 フォームバインディング