Vue.js

The `v-model` in Vue.js 3 is a directive used to synchronize data bidirectionally between form elements or components.

v-model

　Vue.js 3の v-modelは、双方向データバインディングを実現するディレクティブで、フォーム要素（例: input、textarea、select）と Vueコンポーネントのデータを同期させるために使います。v-modelを使うことで、ユーザーがフォームに入力したデータが自動的に Vueのデータオブジェクトに反映され、そのデータを使ってリアルタイムに UIを更新できます。

Sample

　Vue.jsでユーザーの入力に応じてメッセージを変更するサンプルコードです。これはインタラクティブな要素が含まれており、データバインディングとイベントハンドリングの基本を学ぶことができます。

　このコードでは、<input>フィールドに文字を入力するたびに、messageデータプロパティが更新され、その結果がリアルタイムで画面に反映されます。v-modelディレクティブを使って双方向データバインディングを行う仕組みです。

{{ message }}

HTML

<!-- 開発環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>

<!-- 本番環境向け -->
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
</head>

HTML

<div id="app">
	<input v-model="message" placeholder="Type something">
	<p>{{ message }}</p>
</div>
<script>
	<!-- JavaScript code here -->
</script>

CSS

div {
	height: 5em;
	margin-top: 1em;
}

JavaScript

const app = Vue.createApp({
	data() {
		return {
			message: 'Hello Vue 3!'
		};
	}
});

app.mount('#app');