Vue.js - ความแตกต่างระหว่าง v-model และ v-bind

ฉันกำลังเรียน Vue ด้วยหลักสูตรออนไลน์และผู้สอนให้ฉันออกกำลังกายเพื่อป้อนข้อความด้วยค่าเริ่มต้น ฉันทำมันเสร็จโดยใช้ v-model แต่ผู้สอนเลือก v-bind: value และฉันไม่เข้าใจว่าทำไม

ใครสามารถให้คำอธิบายง่ายๆเกี่ยวกับความแตกต่างระหว่างสองสิ่งนี้กับเวลาที่ควรใช้แต่ละอันดีกว่า

จากที่นี่ - โปรดจำไว้ว่า:

<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 พื้นฐานทั้งหมด (ข้อความ, textarea, หมายเลข, วิทยุ, ช่องทำเครื่องหมาย, เลือก) คุณสามารถใช้v-modelกับinput type=dateถ้ารุ่นของคุณเก็บวันที่เป็นสตริง ISO (yyyy-mm-dd) หากคุณต้องการวัตถุวันการใช้งานในรูปแบบของคุณ (ความคิดที่ดีเร็วที่สุดเท่าที่คุณจะจัดการหรือจัดรูปแบบได้) ทำเช่นนี้

v-modelมีสมาร์ทพิเศษบางอย่างที่ควรระวัง หากคุณใช้ IME (คีย์บอร์ดมือถือจำนวนมากหรือจีน / ญี่ปุ่น / เกาหลี) รุ่น v จะไม่อัปเดตจนกว่าคำจะเสร็จสมบูรณ์ (ป้อนช่องว่างหรือผู้ใช้ออกจากสนาม) v-inputจะยิงบ่อยขึ้น

v-modelนอกจากนี้ยังมีการปรับเปลี่ยน.lazy, .trim, .numberครอบคลุมในเอกสาร

ในคำง่าย v-modelสำหรับผูกวิธีที่สองหมายถึง: ถ้าคุณเปลี่ยนค่าการป้อนข้อมูลที่ถูกผูกไว้จะได้รับการเปลี่ยนแปลงและในทางกลับกัน

แต่v-bind:valueจะเรียกว่าวิธีหนึ่งที่มีผลผูกพันที่หมายถึง: คุณสามารถเปลี่ยนค่าการป้อนข้อมูลโดยการเปลี่ยนข้อมูลที่ถูกผูกไว้ แต่คุณไม่สามารถเปลี่ยนแปลงข้อมูลที่ถูกผูกไว้โดยการเปลี่ยนค่าการป้อนข้อมูลผ่านองค์ประกอบ

ลองดูตัวอย่างง่ายๆนี้: https://jsfiddle.net/gs0kphvc/

v-model
มันคือการผูกข้อมูลแบบสองทางมันถูกใช้เพื่อผูกองค์ประกอบอินพุต html เมื่อคุณเปลี่ยนค่าอินพุตจากนั้นข้อมูลที่ถูกผูกไว้จะเปลี่ยนไป

v-model ใช้สำหรับองค์ประกอบอินพุต HTML เท่านั้น

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

v-bind
มันเป็นการเชื่อมโยงข้อมูลทางเดียวซึ่งหมายความว่าคุณสามารถผูกข้อมูลกับองค์ประกอบอินพุตเท่านั้น แต่ไม่สามารถเปลี่ยนข้อมูลที่ถูกผูกไว้ซึ่งเปลี่ยนองค์ประกอบอินพุตได้ v-bind ใช้เพื่อเชื่อมโยงแอตทริบิวต์ html
เช่น:
<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มีหลายกรณีที่คุณไม่ต้องการที่จะใช้งาน หากคุณมีสองอินพุตและแต่ละรายการขึ้นอยู่กับแต่ละอื่น ๆ คุณอาจมีปัญหาการอ้างอิงแบบวงกลม กรณีใช้งานทั่วไปคือถ้าคุณกำลังสร้างเครื่องคิดเลขทางบัญชี

ในกรณีเหล่านี้คุณไม่ควรใช้นักดูหรือคุณสมบัติที่คำนวณได้

ให้ทำตาม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>