Vue.js-v-modelとv-bindの違い

私はオンラインコースでVueを学習しています。インストラクターは、デフォルト値で入力テキストを作成する練習をしてくれました。v-modelを使用して完成させましたが、インストラクターがv-bind：valueを選択しましたが、その理由がわかりません。

誰かがこれらの2つの違いと、それぞれを使うほうが良いときについて簡単な説明をくれますか？

ここから-覚えておいてください：

<input v-model="something">

本質的に同じです：

<input
   v-bind:value="something"
   v-on:input="something = $event.target.value"
>

または（省略構文）：

<input
   :value="something"
   @input="something = $event.target.value"
>

だから、v-modelあるフォーム入力のための結合双方向。それは組み合わせv-bindた、jsのバリューを提供していますマークアップに、とv-on:inputするJS値を更新します。

v-model可能なときに使用してください。v-bind/を使用v-onする必要がある場合:-)回答が受け入れられたことを願っています。

v-model すべての基本的なHTML入力タイプ（テキスト、テキストエリア、数値、ラジオ、チェックボックス、選択）で機能します。モデルで日付をISO文字列（yyyy-mm-dd）として保存v-modelするinput type=date場合に使用できます。モデルで日付オブジェクトを使用する場合（操作またはフォーマットを行うとすぐに良いアイデア）、これを行います。

v-model知っておくと便利な点がいくつかあります。IME（多数のモバイルキーボード、または中国語/日本語/韓国語）を使用している場合、単語が完了するまで（スペースが入力されるか、ユーザーがフィールドを離れるまで）、v-modelは更新されません。v-inputより頻繁に発砲します。

v-modelまた、修飾子を持っている.lazy、.trim、.number、でカバーDOC。

簡単に言う v-modelと、双方向バインディングの意味です。入力値を変更すると、バインドされたデータが変更され、その逆も同様です。

ただし、一方向バインディングv-bind:valueと呼ばれます。つまり、バインドされたデータを変更して入力値を変更することはできますが、要素を介して入力値を変更してバインドされたデータを変更することはできません。

この簡単な例を確認してください：https : //jsfiddle.net/gs0kphvc/

v-model
は双方向のデータバインディングです。入力値を変更すると、html入力要素をバインドするために使用され、バインドされたデータが変更されます。

v-modelはHTML入力要素にのみ使用されます

ex: <input type="text" v-model="name" > 

vバインド
は一方向のデータバインディングです。つまり、データを入力要素にのみバインドできますが、入力データを変更する境界データを変更することはできません。 v-bindは、html属性
ex をバインドするために使用されます。
<input type="text" v-bind:class="abc" v-bind:value="">

<a v-bind:href="home/abc" > click me </a>

v-model is for two way bindings means: if you change input value, the bound data will be changed and vice versa. but v-bind:value is called one way binding that means: you can change input value by changing bound data but you can't change bound data by changing input value through the element.

v-model is intended to be used with form elements. It allows you to tie the form 
 element (e.g. a text input) with the data object in your Vue instance.

Example: https://jsfiddle.net/jamesbrndwgn/j2yb9zt1/1/ 

v-bind is intended to be used with components to create custom props. This allows you to pass data to a component. As the prop is reactive, if the data that’s passed to the component changes then the component will reflect this change

 Example: https://jsfiddle.net/jamesbrndwgn/ws5kad1c/3/

これが基本的な理解に役立つことを願っています

使用したくない場合がありますv-model。2つの入力があり、それぞれが互いに依存している場合、循環参照の問題が発生する可能性があります。一般的な使用例は、会計計算機を構築している場合です。

これらの場合、ウォッチャーまたは計算されたプロパティを使用することはお勧めできません。

代わりに、あなたv-modelを取り、上記の答えが示すようにそれを分割してください

<input
   :value="something"
   @input="something = $event.target.value"
>

実際には、この方法でロジックを分離している場合は、おそらくメソッドを呼び出すことになります。

これは、実際のシナリオでは次のようになります。

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input :value="extendedCost" @input="_onInputExtendedCost" />
  <p> {{ extendedCost }}
</div>

<script>
  var app = new Vue({
    el: "#app",
    data: function(){
      return {
        extendedCost: 0,
      }
    },
    methods: {
      _onInputExtendedCost: function($event) {
        this.extendedCost = parseInt($event.target.value);
        // Go update other inputs here
    }
  }
  });
</script>