Vue.js v ভি-মডেল এবং ভি-বাইন্ডের মধ্যে পার্থক্য

Question

আমি একটি অনলাইন কোর্সের সাথে ভ্যু শিখছি এবং প্রশিক্ষক আমাকে ডিফল্ট মান সহ একটি ইনপুট পাঠ্য তৈরি করার জন্য অনুশীলন করেছিলেন। আমি ভি-মডেল ব্যবহার করে এটি সম্পন্ন করেছি তবে, প্রশিক্ষক ভি-বাইন্ড বেছে নিয়েছেন: মান এবং কেন তা আমি বুঝতে পারি না।

কেউ কি আমাকে এই দুটিয়ের মধ্যে পার্থক্য সম্পর্কে সহজ ব্যাখ্যা দিতে পারেন এবং যখন এটি প্রতিটি ব্যবহারের আরও ভাল হয়?

Comments

v-modelমূলত ইনপুট এবং ফর্ম বিডিংয়ের জন্য ব্যবহৃত হয়, তাই আপনি যখন বিভিন্ন ইনপুট প্রকারের সাথে ডিল করেন তখন এটি ব্যবহার করুন। v-bindনির্দেশিকা আপনাকে কিছু জেএস এক্সপ্রেশন টাইপ করে কিছু গতিশীল মান তৈরি করতে দেয় যা বেশিরভাগ ক্ষেত্রে ডেটা মডেল থেকে প্রাপ্ত ডেটার উপর নির্ভর করে - সুতরাং ভি-বাইন্ড সম্পর্কে মনে করুন যে আপনি যখন কিছু গতিশীল বিষয় নিয়ে ডিল করতে চান তখন আপনাকে ব্যবহার করা উচিত।

— বেলমিন বেদাক

কিছু ক্ষেত্রে আপনি সেগুলির প্রতিটি ব্যবহার করতে পারেন। কখনও কখনও না, উদাহরণস্বরূপ: <div v-bind:class="{ active: isActive }"></div>- আপনি এইচটিএমএল বৈশিষ্ট্যটিকে মডেল ব্যবহার করে আবদ্ধ করতে পারবেন না, আপনার v-bindনির্দেশিকা ব্যবহার করা উচিত । ফর্মের উপাদানগুলির জন্য আপনি v-modelনির্দেশনাটি ব্যবহার করতে চাইবেন - "এটি ইনপুট প্রকারের ভিত্তিতে উপাদানটি আপডেট করার জন্য স্বয়ংক্রিয়ভাবে সঠিক উপায়টি গ্রহণ করে।"

— আলেকজান্ডার

@ আলেকজান্ডার "বাইন্ড এইচটিএমএল গুণাবলী" এই শব্দটি আমাকে আরও ভালভাবে এটি ভাবতে সহায়তা করেছিল। এই দুটি কন্সট্রাক্টরের সাথে আসলে কী ঘটছে সে সম্পর্কে আরও সম্পূর্ণ উত্তরের সাথে আপনি এটি সম্পর্কে ভারী হওয়া ভাল।

— টম রাসেল

উপাদানগুলির প্রসঙ্গে @ আলেকজান্দার এসপ 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, যা একটি JS মান এনেছে মার্কআপ মধ্যে, এবং v-on:inputকরা JS মান আপডেট ।

v-modelআপনি যখন পারেন ব্যবহার করুন । v-bind/ v-onযখন আপনার অবশ্যই ব্যবহার করুন :-) আমি আশা করি আপনার উত্তর গৃহীত হয়েছে।

v-model সমস্ত বুনিয়াদি এইচটিএমএল ইনপুট ধরণের (পাঠ্য, টেক্সারিয়া, সংখ্যা, রেডিও, চেকবক্স, নির্বাচন) সাথে কাজ করে। আপনি ব্যবহার করতে পারেন v-modelসঙ্গে input type=dateযদি আইএসও স্ট্রিং (YYYY-MM-DD) হিসেবে আপনার মডেল দোকানে তারিখ। আপনি যদি আপনার মডেলটিতে তারিখের অবজেক্টগুলি ব্যবহার করতে চান (আপনি এগুলি হেরফের করতে বা ফর্ম্যাট করতে যাবেন ঠিক তখনই একটি ভাল ধারণা), এটি করুন ।

v-modelকিছু অতিরিক্ত স্মার্ট রয়েছে যা সম্পর্কে সচেতন হওয়া ভাল। আপনি যদি কোনও আইএমই (প্রচুর মোবাইল কীবোর্ড, বা চাইনিজ / জাপানি / কোরিয়ান) ব্যবহার করছেন তবে ভি-মডেল কোনও শব্দ সম্পূর্ণ না হওয়া অবধি আপডেট হবে না (কোনও স্থান প্রবেশ করা না হলে বা ব্যবহারকারী ক্ষেত্রটি ছেড়ে যায়)। v-inputআরও ঘন ঘন আগুন লাগবে।

v-modelএছাড়াও সংশোধনকারীদের হয়েছে .lazy, .trim, .number, মধ্যে আবৃত ডক ।

Comments

'আপনি যখন পারবেন তখন ভি-মডেল ব্যবহার করুন। আপনার অবশ্যই যখন হবে তখন ভি-বাইন্ড / ভি-অন ব্যবহার করুন। দুর্দান্ত সারসংক্ষেপ! আপনাকে অনেক ধন্যবাদ!

— 尤川豪

মধ্যে পার্থক্য কি v-modelএবং v-bind:xxx.sync?

— এল ম্যাক

@ এলম্যাক ভি-মডেল হ'ল ভু উপাদান এবং জাভাস্ক্রিপ্ট মডেলের মধ্যে দ্বিমুখী বাইন্ডিং। উত্স (বাইন্ডিংয়ের মডেল পাশ) ভ্যু উপাদানটির ডেটাতে ঘোষিত হয়। এটির মতো, ভ্যু আপনাকে আপনার উপাদানগুলি থেকে রাষ্ট্রটি বের করতে দেয়, তারপরে উপাদান থেকে সরাসরি এই রাজ্যটি সংশোধন করে। এটি স্টেট ম্যানেজমেন্টের জন্য একটি সাধারণ প্যাটার্ন যা ভয়ের একটি বৈশিষ্ট্য (কঠিন / লুকানো / অসম্ভব / কৌণিক এবং প্রতিক্রিয়াতে নিরুৎসাহিত)। ভি-বাইন্ড: xxx.sync একটি ভ্যু উপাদান এবং এর পিতামাতার মধ্যে দ্বিমুখী আবদ্ধ] রাজ্য আবদ্ধ থাকে। এটি পিতামাতার সাথে 'সম্পর্কিত'। এটি অগত্যা ভাল না!

— bbsimonbb

Answer 2

সহজ কথায় v-modelজন্য দুটি উপায় বাইন্ডিং মাধ্যম: আপনি ইনপুট মান পরিবর্তন করেন, আবদ্ধ তথ্য পরিবর্তন করা হবে এবং তদ্বিপরীত ।

তবে v-bind:valueএকে ওয়ান ওয়ে বাইন্ডিং বলা হয় অর্থ: আপনি সীমাবদ্ধ ডেটা পরিবর্তন করে ইনপুট মান পরিবর্তন করতে পারেন তবে উপাদানটির মাধ্যমে ইনপুট মান পরিবর্তন করে আপনি বাউন্ড ডেটা পরিবর্তন করতে পারবেন না ।

এই সাধারণ উদাহরণটি দেখুন: https://jsfiddle.net/gs0kphvc/

Comments

'আপনি যদি ইনপুট মান পরিবর্তন করেন তবে সীমাবদ্ধ ডেটা পরিবর্তন করা হবে এবং বিপরীতে। '- উচ্চারণ উদাহরণ থেকে এমনকি' তদ্বিপরীত 'অংশটি বুঝতে পারে না। তুমি কি এটা ব্যাখ্যা করতে পারবে ?

— ইসতিয়াক আহমেদ

আপনি যদি উপাদানটির মাধ্যমে ইনপুট মান পরিবর্তন করেন তবে সীমাবদ্ধ ডেটা পরিবর্তন করা হবে এবং আপনি যদি বাউন্ড ডেটা পরিবর্তন করেন তবে উদাহরণস্বরূপ Vue APIs আপনার ইনপুট উপাদানটির মান পরিবর্তন করতে পারে।

— ম্যাডমাদি

Vue API এর মাধ্যমে বাউন্ড ডেটা কীভাবে পরিবর্তন করবেন?

— ইসতিয়াক আহমেদ

মলত্যাগের উদাহরণে, আমাদের একটি পদ্ধতি রয়েছে যা ডেটা_সোর্সকে এভাবে পরিবর্তন করেthis.data_source = 'Some new value'

— ম্যাডমাদি

ঠিক আছে data_source, আপনি ডম থেকে ইনজেক্ট করা এইচটিএমএল থেকে inputডান?

— ইসতিয়াক আহমেদ

Answer 3

ভি-মডেল
এটি দ্বি - উপাত্তের ডেটা বাইন্ডিং, এটি আপনি যখন ইনপুট মান পরিবর্তন করেন তখন এইচটিএমএল ইনপুট উপাদানকে বাঁধতে ব্যবহার করা হয় তখন সীমান্তের ডেটা পরিবর্তন হবে।

ভি-মডেল কেবলমাত্র এইচটিএমএল ইনপুট উপাদানগুলির জন্য ব্যবহৃত হয়

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

ভি-বাইন্ড
এটি এক উপায়ে ডেটা বাঁধাই, এর অর্থ আপনি কেবল ইনপুট উপাদানকে ডেটা বাঁধতে পারেন তবে ইনপুট উপাদান পরিবর্তন করে বাউন্ডেড ডেটা পরিবর্তন করতে পারবেন না। ভি-বাইন্ডটি এইচটিএমএল বৈশিষ্ট্য প্রেরণে ব্যবহৃত হয়
:
<input type="text" v-bind:class="abc" v-bind:value="">

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

Comments

'ভি-মডেল এটি দ্বিমুখী ডেটা বাঁধাই': বিশেষত সেই দুটি উপায় কী?

— ইসতিয়াক আহমেদ

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>