tomoyaki BLOG

いちSEの学習記録

第5章 双方向データバインディング『Vue3 フロントエンド開発の教科書』を読む(5/n)

前回の続き。

今、暇な時間でiOSアプリ開発の勉強をしているのだが、swiftUIの@Stateや@Bindingでも双方向データバインディングがサポートされていることに気がついた。

  • v-bind:テンプレート変数の値を、テンプレート内(例:テキストボックスのプレースホルダ)に利用するようなケースで用いる
  • v-on:input:テンプレート内(例:テキストボックス)からテンプレート変数を変更するようなケースで用いる

上記を組み合わせたのが v-model ということになる。

<script setup lang="ts">
import {ref} from "vue";
const inputNameModel = ref("双方向");
</script>
<template>
<section>
<input type="text" v-model="inputNameModel">
<p>{{inputNameModel}}</p>
</section>
</template>
  • テキストボックス内のテキストは inputNameModelというテンプレート変数にバインドされている(v-bind)かつ、テキストボックス内のテキストを変更すると(v-on:input)、inputNameModelというテンプレート変数が更新される。

やっと v-model について頭の中が整理された気がする。単方向データバインディングとは何か、が正しく認識できていなかったから、双方向もよくわからなかったみたいだ(当たり前)。

  • v-html
    • HTMLをそのまま表示する。XSSに注意。
  • v-once
    • 一度だけデータバインドを行う。
  • v-cloak
    • レンダリングの途中でマスタッシュ構文が一時的に表示されてしまうのを防ぐことが可能。

*1: React と Vue から単方向・双方向データバインディングの違いを知る(https://qiita.com/tamago3keran/items/590d99288dcccf388798)

*2: MVVMとは(https://docs-f.mix-soft.com/article/mvvmtoha)