Vue V Bind V Model

Posted on  by admin

Vue.js の勉強を始めました。. 基本中の基本ともいえる v-bind と v-model ディレクティブについて、その機能の違いについてメモしておきます。. v-bind は Model の値を HTML コンポーネントに反映(出力)します。HTML コンポーネントの値が変わっても、Model の値は変わりません。Model から HTML への一方通行です。. 一方、v-model は Model と View(HTML)の双方向に影響します。 HTML コンポーネントの値に変更があった場合、自動で Model の値を更新します。. そして JavaScript。. v-bind でバインディングしたコンポーネントの値を変更しても、Model の値が変更されていないことが確認できます。.

一方、v-model のほうは入力と同時に Model の値が変更され、再描画されています。. そして、v-bind のテキストボックスは何かのタイミングで "data1" という変更前の値に戻ってしまいます。. 英語のStack over flow でこの件が説明されており、v-model は v-bind と v-on:input で次のように書き換えられるそうです。.

v-bind と v-on で書き換えたとき。. Model の値を表示したいだけなら v-bind。ユーザ入力を即座に Model に反映したいなら v-model を使いましょう。. 自分でも勉強しながら Todo アプリ作成のチュートリアルを作成しました。よかったら学習に使ってください。

  • ↓↓↓ Kindle 版を買いました。鋭意勉強中!. 出版社/メーカー: シーアンドアール研究所. 発売日: 2018/05/29. メディア: 単行本(ソフトカバー). You’re browsing the documentation for v2.x and earlier.
  • For v3.x, click here. You can use the v-model directive to create two-way data bindings on form input, textarea, and select elements.
  • It automatically picks the correct way to update the element based on the input type.
  • Although a bit magical, v-model is essentially syntax sugar for updating data on user input events, plus special care for some edge cases. v-model will ignore the initial value, checked, or selected attributes found on any form elements. It will always treat the Vue instance data as the source of truth.

v-model with Components

If you want to cater to these updates as well, use the input event instead. Message is: {{ message }}. Interpolation on textareas () won't work. Use v-model instead. Single checkbox, boolean value:. Multiple checkboxes, bound to the same Array:.

Picked: {{ picked }}. If the initial value of your v-model expression does not match any of the options, the