Vue.js- वी-मॉडल और वी-बाइंड के बीच अंतर

Question

मैं एक ऑनलाइन पाठ्यक्रम के साथ Vue सीख रहा हूं और प्रशिक्षक ने मुझे डिफ़ॉल्ट मान के साथ एक इनपुट टेक्स्ट बनाने के लिए एक अभ्यास दिया। मैंने इसे वी-मॉडल का उपयोग करके पूरा किया लेकिन, प्रशिक्षक ने v-bind: value को चुना और मुझे समझ नहीं आया कि क्यों।

क्या कोई मुझे इन दोनों के बीच के अंतर के बारे में एक सरल स्पष्टीकरण दे सकता है और जब यह बेहतर होगा कि हर एक का उपयोग करें?

Comments

v-modelमुख्य रूप से इनपुट और फॉर्म बिडिंग के लिए उपयोग किया जाता है, इसलिए जब आप विभिन्न इनपुट प्रकारों के साथ काम करते हैं तो इसका उपयोग करें। v-bindनिर्देश आपको कुछ जेएस अभिव्यक्ति टाइप करके कुछ गतिशील मूल्य का उत्पादन करने की अनुमति देता है जो कि ज्यादातर मामलों में डेटा मॉडल से डेटा पर निर्भर करता है - इसलिए वी-बाइंड के बारे में निर्देश के रूप में सोचें जो आपको तब उपयोग करना चाहिए जब आप कुछ गतिशील चीजों से निपटना चाहते हैं।

— बेलमिन बेदक

कुछ मामलों में आप उनमें से प्रत्येक का उपयोग कर सकते हैं। कभी-कभी नहीं, उदाहरण के लिए: <div v-bind:class="{ active: isActive }"></div>- आप मॉडल का उपयोग करके html विशेषता को बांध नहीं सकते, आपको v-bindनिर्देश का उपयोग करना चाहिए । प्रपत्र के तत्वों के लिए आप v-modelनिर्देश का उपयोग करना चाहेंगे - "यह स्वचालित रूप से इनपुट प्रकार के आधार पर तत्व को अपडेट करने का सही तरीका चुनता है।"

— अलेक्जेंडर

@Alexander वाक्यांश "बाइंड HTML विशेषता" ने मुझे इस बेहतर के बारे में सोचने में मदद की। यह देखने के लिए अच्छा होगा कि आप इस बारे में अधिक पूर्ण उत्तर दें कि इन दोनों निर्माणों के साथ वास्तव में क्या हो रहा है।

— टॉम रसेल

@ अलेक्जेंडर एस्प ने घटक के संदर्भ में dataऔर props...

— टॉम रसेल

Answer 1

से यहाँ - याद रखें:

<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, जो मार्कअप में एक जेएस मान लाता है , और जेएस मूल्यv-on:input को अपडेट करने के लिए ।

v-modelजब आप कर सकते हैं का उपयोग करें । उपयोग v-bind/ v-onजब आपको करना होगा :-) मुझे आशा है कि आपका उत्तर स्वीकार कर लिया गया था।

v-model सभी मूल HTML इनपुट प्रकारों (टेक्स्ट, टेक्सारिया, नंबर, रेडियो, चेकबॉक्स, चयन) के साथ काम करता है । आप उपयोग कर सकते हैं v-modelके साथ input type=dateकरता है, तो आईएसओ तार (yyyy-mm-dd) के रूप में अपने मॉडल भंडार दिनांकों। यदि आप अपने मॉडल में दिनांक ऑब्जेक्ट का उपयोग करना चाहते हैं (जैसे ही आप उन्हें हेरफेर या प्रारूपित करने जा रहे हैं, तो एक अच्छा विचार है), ऐसा करें ।

v-modelकुछ अतिरिक्त स्मार्ट हैं जिनके बारे में पता होना अच्छा है। यदि आप एक IME (बहुत सारे मोबाइल कीबोर्ड, या चीनी / जापानी / कोरियाई) का उपयोग कर रहे हैं, तो वी-मॉडल तब तक अपडेट नहीं होगा जब तक कि एक शब्द पूरा नहीं हो जाता (एक स्थान दर्ज किया जाता है या उपयोगकर्ता फ़ील्ड छोड़ देता है)। v-inputअधिक बार आग लग जाएगी।

v-modelभी संशोधक है .lazy, .trim, .number, में शामिल दस्तावेज़ ।

Comments

'वी-मॉडल का उपयोग करें जब आप कर सकते हैं। वी-बाइंड / वी-ऑन का उपयोग करें जब आपको करना चाहिए ’। महान सारांश! आपका बहुत बहुत धन्यवाद!

— ।

बीच क्या अंतर है v-modelऔर v-bind:xxx.sync?

— एल मैक

@ ईएलएमएसी वी-मॉडल एक वीयू घटक और एक जावास्क्रिप्ट मॉडल के बीच एक दो-तरफा बंधन है। स्रोत (बाइंडिंग का मॉडल पक्ष) Vue घटक के डेटा में घोषित किया गया है। इस तरह, Vue आपको अपने घटकों से राज्य निकालने देता है, फिर इस स्थिति को सीधे घटक से संशोधित करें। यह राज्य प्रबंधन के लिए एक सरल पैटर्न है, जो Vue (मुश्किल / छुपा / असंभव / कोणीय और प्रतिक्रिया में हतोत्साहित) की पहचान है। v-bind: xxx.sync एक Vue घटक और उसके अभिभावक के बीच एक दो-तरफ़ा बंधन है]। राज्य अतिक्रमित रहता है। यह माता-पिता का है। यह बेहतर जरूरी नहीं है!

— bbsimonbb

Answer 2

सरल शब्दों v-modelमें दो तरह से बाइंडिंग का अर्थ है: यदि आप इनपुट मूल्य बदलते हैं, तो बाध्य डेटा को बदल दिया जाएगा और इसके विपरीत ।

लेकिन एक तरह से बाइंडिंगv-bind:value कहा जाता है, जिसका अर्थ है: आप बाध्य डेटा को बदलकर इनपुट मान को बदल सकते हैं, लेकिन आप तत्व के माध्यम से इनपुट मान को बदलकर बाध्य डेटा को नहीं बदल सकते ।

इस सरल उदाहरण को देखें: https://jsfiddle.net/gs0kphvc/

Comments

'यदि आप इनपुट मान बदलते हैं, तो बाध्य डेटा को बदल दिया जाएगा और इसके विपरीत। '- फिडेल उदाहरण से' इसके विपरीत 'भाग को भी नहीं समझ सकते। क्या आप इसे समझा सकते हैं ?

— इस्तियाक अहमद

यदि आप तत्व के माध्यम से इनपुट मूल्य को बदलते हैं, तो बाध्य डेटा को बदल दिया जाएगा और यदि आप उदाहरण के लिए बाध्य डेटा को बदलते हैं तो Vue APIs के माध्यम से आपका इनपुट तत्व मान बदल जाएगा।

— मदमदी

कैसे Vue एपीआई के माध्यम से बाध्य डेटा को बदलने के लिए?

— इस्तियाक अहमद

फिडेल उदाहरण में, हमारे पास एक तरीका है जो data_source को इस तरह बदलता हैthis.data_source = 'Some new value'

— Madmadi

द्वारा data_source, आप मतलब है कि डोम में से इंजेक्शन HTML input, है ना?

— इस्तियाक अहमद

Answer 3

v- मॉडल
यह दो तरह से डेटा बाइंडिंग है, इसका उपयोग html इनपुट तत्व को बांधने के लिए किया जाता है जब आप इनपुट वैल्यू को बदलते हैं तो बाउंड डेटा को बदल दिया जाएगा।

v- मॉडल का उपयोग केवल HTML इनपुट तत्वों के लिए किया जाता है

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

v-bind
यह एक तरह से डेटा बाइंडिंग है, इसका मतलब है कि आप केवल डेटा को इनपुट एलिमेंट से बाँध सकते हैं, लेकिन बाउंड डेटा को बदलने वाले इनपुट एलिमेंट को नहीं बदल सकते। v- बाँध का उपयोग html विशेषता
पूर्व बाँधने के लिए किया जाता है :
<input type="text" v-bind:class="abc" v-bind:value="">

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

Comments

'वी-मॉडल यह दो तरह से डेटा बाइंडिंग है': विशेष रूप से वे 2 तरीके क्या हैं?

— इस्तियाक अहमद

Answer 4

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/

आशा है कि यह आपको बुनियादी समझ में मदद करता है

Answer 5

ऐसे मामले हैं जहां आप उपयोग नहीं करना चाहते हैं 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>