Vue.js Sự khác biệt giữa mô hình v và v-bind

Tôi đang học Vue với một khóa học trực tuyến và người hướng dẫn đã cho tôi một bài tập để tạo một văn bản đầu vào với giá trị mặc định. Tôi đã hoàn thành nó bằng v-model nhưng, người hướng dẫn đã chọn v-bind: value và tôi không hiểu tại sao.

Ai đó có thể cho tôi một lời giải thích đơn giản về sự khác biệt giữa hai điều này và khi nào thì tốt hơn nên sử dụng từng cái một?

Từ đây - Ghi nhớ:

<input v-model="something">

về cơ bản giống như:

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

hoặc (cú pháp tốc ký):

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

Vì vậy, v-modellà một ràng buộc hai chiều cho đầu vào mẫu . Nó kết hợp v-bind, mang lại giá trị js vào đánh dấu và v-on:inputđể cập nhật giá trị js .

Sử dụng v-modelkhi bạn có thể. Sử dụng v-bind/ v-onkhi bạn phải :-) Tôi hy vọng câu trả lời của bạn đã được chấp nhận.

v-model hoạt động với tất cả các loại đầu vào HTML cơ bản (văn bản, textarea, số, radio, hộp kiểm, chọn). Bạn có thể sử dụng v-modelvới input type=datenếu các cửa hàng mô hình của bạn ngày như chuỗi ISO (yyyy-mm-dd). Nếu bạn muốn sử dụng các đối tượng ngày trong mô hình của mình (một ý tưởng hay ngay khi bạn định thao tác hoặc định dạng chúng), hãy làm điều này .

v-modelcó một số thông minh thêm mà nó tốt để nhận thức được. Nếu bạn đang sử dụng IME (nhiều bàn phím di động hoặc tiếng Trung / tiếng Nhật / tiếng Hàn), mô hình v sẽ không cập nhật cho đến khi một từ hoàn thành (một khoảng trắng được nhập hoặc người dùng rời khỏi trường). v-inputsẽ bắn thường xuyên hơn nhiều.

v-modelcũng có bổ .lazy, .trim, .number, bao gồm trong các doc .

Nói một cách đơn giản v-modellà liên kết hai chiều có nghĩa là: nếu bạn thay đổi giá trị đầu vào, dữ liệu ràng buộc sẽ được thay đổi và ngược lại .

nhưng v-bind:valueđược gọi là ràng buộc một chiều có nghĩa là: bạn có thể thay đổi giá trị đầu vào bằng cách thay đổi dữ liệu bị ràng buộc nhưng bạn không thể thay đổi dữ liệu bị ràng buộc bằng cách thay đổi giá trị đầu vào thông qua phần tử .

xem ví dụ đơn giản này: https://jsfiddle.net/gs0kphvc/

v-model
nó là liên kết dữ liệu hai chiều, nó được sử dụng để liên kết phần tử đầu vào html khi bạn thay đổi giá trị đầu vào thì dữ liệu bị ràng buộc sẽ được thay đổi.

v-model chỉ được sử dụng cho các yếu tố đầu vào HTML

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

v-bind
nó là liên kết dữ liệu một chiều, có nghĩa là bạn chỉ có thể liên kết dữ liệu với phần tử đầu vào nhưng không thể thay đổi phần tử đầu vào thay đổi dữ liệu bị ràng buộc. v-bind được sử dụng để liên kết thuộc tính 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/

Hy vọng điều này sẽ giúp bạn với sự hiểu biết cơ bản

Có những trường hợp bạn không muốn sử dụng v-model. Nếu bạn có hai đầu vào và mỗi đầu vào phụ thuộc lẫn nhau, bạn có thể có các vấn đề tham chiếu vòng tròn. Các trường hợp sử dụng phổ biến là nếu bạn đang xây dựng một máy tính kế toán.

Trong những trường hợp này, không nên sử dụng trình theo dõi hoặc thuộc tính được tính toán.

Thay vào đó, lấy của bạn v-modelvà chia nó như câu trả lời ở trên chỉ ra

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

Trong thực tế, nếu bạn đang tách rời logic của mình theo cách này, có thể bạn sẽ gọi một phương thức.

Đây là những gì nó sẽ trông giống như trong một kịch bản thế giới thực:

<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>